uni-app简单实现手写签名

本次项目要求实现手写签名功能，首先百度了一下，度娘还是很强大的，有 vue 的，也有 uniapp 的，我这边用的是 uniapp，有个博主确实帮到了我，特此附上他（节节竹）的链接，方便各位看源码

https://blog.csdn.net/qq_32289849/article/details/106571184

废话不多说，上项目要求
)
（1）html 此处模态框用的 uview，兼容性好一点，图片路径不必在意，用的七牛云上的图片

<view class="xsh-start" @click="autograph">签名</view>
//签名弹框
<u-modal v-model="showAutograph" border-radius="14" width="605rpx" :show-title="false" :confirm-style="{'font-size':'29rpx','color': '#341DB7'}":show-cancel-button='true' :cancel-style="{'font-size':'29rpx','color': '#666666'}" @confirm="confirm" @cancel="cancel"><view class="x-modal"><view class="x-m-title"><text>请在框内进行签名</text><view class="xm-t-clear" @click="clear"><image :src="`${configUrl}/clear.png`" mode=""></image><text>清除</text></view></view><view class="x-m-con">//重点在此，画布<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas></view></view>
</u-modal>

（2）js

<script>import config from '../../common/config.js' //封装文件，用来获取七牛云地址export default {data() {return {configUrl: config.STATIC_URL, //七牛云地址showAutograph: false, //签名弹框是否显示ctx: '', //绘图图像points: [], //路径点集合 signature: ''}},methods: {//创建并显示签名画布autograph() {this.showAutograph = true;//创建绘图对象this.ctx = uni.createCanvasContext("mycanvas", this);//设置画笔样式this.ctx.lineWidth = 4;this.ctx.lineCap = "round"this.ctx.lineJoin = "round"},//触摸开始，获取到起点touchstart(e) {let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = {X: startX,Y: startY};this.points.push(startPoint);//每次触摸开始，开启新的路径this.ctx.beginPath();},//触摸移动，获取到路径点touchmove(e) {let moveX = e.changedTouches[0].x;let moveY = e.changedTouches[0].y;let movePoint = {X: moveX,Y: moveY};this.points.push(movePoint); //存点let len = this.points.length;if (len >= 2) {this.draw(); //绘制路径}},// 触摸结束，将未绘制的点清空防止对后续路径产生干扰touchend() {this.points = [];},/* ***********************************************#   绘制笔迹#  1.为保证笔迹实时显示，必须在移动的同时绘制笔迹#    2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）************************************************ */draw() {let point1 = this.points[0]let point2 = this.points[1]this.points.shift()this.ctx.moveTo(point1.X, point1.Y)this.ctx.lineTo(point2.X, point2.Y)this.ctx.stroke()this.ctx.draw(true)},//清空画布clear() {let that = this;uni.getSystemInfo({success: function(res) {let canvasw = res.windowWidth;let canvash = res.windowHeight;that.ctx.clearRect(0, 0, canvasw, canvash);that.ctx.draw(true);},})},//关闭并清空画布cancel() {this.showAutograph = false;this.clear();},//完成绘画并保存到本地confirm() {let that = this;uni.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {console.log(res.tempFilePath) //图片格式为base64，如果不是可上传七牛云，之后请求签名接口即可that.$api.api.h5.sign({"merSignName": res.tempFilePath,"workId": that.workId}).then(res=>{if(res.result.code=='000000') {//走到这里就签名成功了uni.redirectTo({url:'/pages/workOrder/workOrder'})}else{that.$u.toast(res.result.message)}})}})},}}
</script>

（3）css 样式仅供参考哦，需求不一定一样

@mixin playcenter {display: flex;align-items: center;justify-content: center;
}
.xsh-start {width: 105rpx;height: 105rpx;background: #FFFFFF;border-radius: 50%;font-size: 29rpx;color: #4135EB;@include playcenter;flex-wrap: wrap;
}
.x-modal {width: 100%;.x-m-title {width: 100%;height: 90rpx;padding: 0 38rpx 0 31rpx;box-sizing: border-box;font-size: 29rpx;color: #333333;border-bottom: 1px dashed #999;@include playcenter;justify-content: space-between;.xm-t-clear {font-size: 25rpx;color: #341DB7;@include playcenter;>image {width: 28rpx;height: 28rpx;display: block;margin-right: 8rpx;}}}.x-m-con {width: 100%;padding: 0 31rpx 18rpx;margin-top: 5rpx;box-sizing: border-box;}
}

uni-app简单实现手写签名相关推荐

uniapp手写_手写签名
前言: 简单的手写签名参考 https://www.auiaa.com/fron/uni/2019-03-17/103.html 的例子,进行了修改主要代码 @touchcancel='cance ...
贝塞尔曲线实现手写签名
项目前些天要求完成手写签名并生成图片的功能,找了很多的文章,大多数比较麻烦,而且也不需要实现那么多附带的功能.只需要实现简单的签名就可以,如何实现呢?其实这个手写签名和画板是一样的思路. 我们利用 p ...
Android App实战项目之实现手写签名APP功能（附源码，简单易懂可直接实用）
运行有问题或需要源码请点赞关注收藏后评论区留言~~~ 一.跟踪滑动轨迹实现手写签名手写签名的原理是把手机屏幕当作画板,把用户手指当作画笔,手指在屏幕上划来划去,屏幕就会显示手指的移动轨迹,就像画笔在 ...
在app端手写签名并保存下来（以文件形式或者是base64编码）
最近做的项目有个需求,在app端手写签名的并保存为文件或者base64编码.所以就刚好有时间写了一下并记录下来: 先上效果图: 分析思路:因为这里是要获取手势轨迹并画出来,所以肯定是有个Touch事件 ...
html app签名,html5手写签名
sxqm 清空生成图片 var canvas, board; canvas = document.getElementById('myCanvas'); canvas.height = 300; ...
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
一.简介在微信小程序开发中,有时候需要手写签名生成图片上传服务器.制作一个手绘板.画板并支持保存图片等,然后就封装了一下:DZMDrawingBoard. DZMDrawingBoard 通过 Ca ...
Android 手写签名实例
这篇文章本来想在一个月前就发布的,最近一直忙于国家电网手持终端的应用开发,所以没抽出时间来写.周末到了,终于可以闲下来整理整理.话不多说,直奔主题. Android 提供了很多丰富.实用而且很有特色的 ...
Android中通过自定义签名控件实现手写签名
场景实现手写签名并获取签名照片注: 博客: BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主关注公众号霸道的程序猿获取编 ...
Qt绘制和保存成图片(手写签名)
想要实现的是,手写签名的效果,最终把手写的结果保存,也可以加上水印什么的. 在控件的 MouseButtonPress 和 MouseMove 事件中,保存绘制的路径,然后再 Paint 重绘事件中绘 ...
canvas 插件_基于Angular的Canvas手写签名插件
灵感来源之前, 在轻流的业务中遇到了一个需求, 是能够让客户使用手写签名的功能. 签名演示问题来了, 这...我不会啊! 这得是Canvas了吧. 正所谓, 插件用的好, 下班走的早. 于是我就开 ...

uni-app简单实现手写签名

uni-app简单实现手写签名相关推荐

最新文章

热门文章