方法一
<template> <view class="signBox"> <view class="topHint">请在下方空白书写区域内写出您的名字</view> <view class="btn"> <view class="saveBtn" @click="save">确认</view> <view class="cancelBtn" @click="clear">清除</view> </view> <canvas class="canvas" disable-scroll="true" :style="{'width':width,'height':height}" canvas-id="designature" @touchstart="starts" @touchmove="moves" @touchend="end"></canvas> </view> </template> <script> export default { components: {}, data() { return { dom: null, line: [], radius: 0, width: '0rpx', height: '0rpx', } }, onl oad() {}, computed: {}, created() { uni.getSystemInfo({ success: (res) => { this.width = res.windowWidth - 60 + 'rpx'; this.height = res.windowHeight - 56 + 'rpx'; } }); this.dom = uni.createCanvasContext('designature', this); }, onShow() {}, methods: { end(e) {}, distance(a, b) { let x = b.x - a.x; let y = b.y - a.y; return Math.sqrt(x * x + y * y); }, // 开始 starts(e) { this.line.push({ points: [{ time: new Date().getTime(), x: e.touches[0].x, y: e.touches[0].y, dis: 0 }] }) let currentPoint = { x: e.touches[0].x, y: e.touches[0].y } this.currentPoint = currentPoint this.drawer(this.line[this.line.length - 1]) }, // 滑动 moves(e) { let point = { x: e.touches[0].x, y: e.touches[0].y } this.lastPoint = this.currentPoint, this.currentPoint = point this.line[this.line.length - 1].points.push({ time: new Date().getTime(), x: e.touches[0].x, y: e.touches[0].y, dis: this.distance(this.currentPoint, this.lastPoint) }) this.drawer(this.line[this.line.length - 1]) }, // 书写 drawer(item) { let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5, x, y; var time = 0; if (item.points.length > 2) { let lines = item.points[item.points.length - 3]; let line = item.points[item.points.length - 2]; let end = item.points[item.points.length - 1]; x = line.x; y = line.y; x1 = lines.x; y1 = lines.y; x2 = end.x; y2 = end.y; var dis = 0; time = (line.time - lines.time) + (end.time - line.time) dis = line.dis + lines.dis + end.dis; var dom = this.dom; var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax); cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t)) cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t)) dom.setLineCap('round') dom.beginPath(); dom.setStrokeStyle('black') dom.setLineWidth(5) dom.moveTo(x1, y1); dom.quadraticCurveTo(cx, cy, x2, y2); dom.stroke(); dom.draw(true) } }, // 清除 clear() { this.dom.clearRect(0, 0, 1000, 1000) this.dom.draw() }, // 保存图片 save() { var t = this; uni.canvasToTempFilePath({ canvasId: 'designature', fileType: 'png', quality: 1, //图片质量 success: function(res) { t.$emit('getImg', res.tempFilePath) console.log(res.tempFilePath, '148') // uni.navigateBack({ // delta:1 // }) }, fail(e) { console.log(e) } }, this) } } } </script> <style scoped lang="less"> .signBox { position: relative; overflow: hidden; background-color: #F6F6F6; height: 100vh; width: 100vw; .canvas { width: 100% !important; background-color: #FFFFFF; position: absolute; z-index: 9999; left: 0rpx; top: 25rpx; // border: 1rpx solid #d6d6d6; } .topHint{ width: 100%; height: 25rpx; line-height: 25rpx; font-size: 15rpx; color: #999999; text-align: center; background: ; } .btn { width: 100%; height: 60rpx; position: fixed; bottom: 0; // background-color: red; display: flex; align-items: center; justify-content: center; .saveBtn { width: 190rpx; height: 40rpx; line-height: 40rpx; background: linear-gradient(306deg, #4281EA 0%, #6363F2 100%); border-radius: 10rpx; text-align: center; font-size: 18rpx; color: #FFFFFF; margin-right: 10rpx; } .cancelBtn { width: 190rpx; height: 40rpx; line-height: 40rpx; background: #FFFFFF; border-radius: 10rpx; text-align: center; font-size: 18rpx; color: #222222; margin-left: 10rpx; } } } </style> json文件 { "path": "pages/clientDitch/sign", "style": { "navigationBarTitleText": "签字手签", "pageOrientation": "landscape", //控制横屏 // "navigationStyle": "custom" } },
方法二
<template> <view class="signBox column-me"> <!-- 这个是自定义的title-可根据自己封装的title的作为调整 --> <status-bar title="电子签名" :bgColor="null"></status-bar> <view class="topHint">请绘制清晰可辨的签名并保存</view> <canvas class="canvas flex1" :canvas-id="cid" :id="cid" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :disable-scroll="true"></canvas> <view class="btn margin-top10 margin-bottom10"> <view class="cancelBtn" @click="reWrite">重写</view> <view class="saveBtn margin-left30" @click="save">保存</view> </view> </view> </template> <script> export default { components: {}, data() { return { line: [], radius: 0, taskId: '', //以下与签名有关参数 dom: null, cid: 'canvas', //画布id Strokes: [], showCanvasDialog: false, canvasImg: '', //签名图片 } }, onl oad(e) { this.taskId = e.taskId }, computed: {}, mounted: function() { let that = this this.initCanvas() }, methods: { initCanvas() { let that = this this.$nextTick(function() { this.dom = uni.createCanvasContext(this.cid, this); var query = wx.createSelectorQuery(); query.select('#canvas').boundingClientRect(); query.exec(function(res) { let widths = res[0].width let heights = res[0].height that.dom.rect(0, 0, widths, heights) that.dom.setFillStyle('#FFFFFF') that.dom.fill() that.dom.draw() }) }); }, touchstart(e) { this.Strokes.push({ imageData: null, style: { color: '#000000', lineWidth: '3', }, points: [{ x: e.touches[0].x, y: e.touches[0].y, type: e.type, }] }) this.drawLine(this.Strokes[this.Strokes.length - 1], e.type); }, touchmove(e) { this.Strokes[this.Strokes.length - 1].points.push({ x: e.touches[0].x, y: e.touches[0].y, type: e.type, }) this.drawLine(this.Strokes[this.Strokes.length - 1], e.type); }, touchend(e) { if (this.Strokes[this.Strokes.length - 1].points.length < 2) { //当此路径只有一个点的时候 this.Strokes.pop(); } }, drawLine(StrokesItem, type) { if (StrokesItem.points.length > 1) { this.dom.setLineCap('round') this.dom.setStrokeStyle(StrokesItem.style.color); this.dom.setLineWidth(StrokesItem.style.lineWidth); this.dom.moveTo(StrokesItem.points[StrokesItem.points.length - 2].x, StrokesItem.points[StrokesItem .points.length - 2].y); this.dom.lineTo(StrokesItem.points[StrokesItem.points.length - 1].x, StrokesItem.points[StrokesItem .points.length - 1].y); this.dom.stroke(); this.dom.draw(true); } }, //重写签名 reWrite() { this.Strokes = []; this.dom.draw(); this.initCanvas() }, // 保存图片 save() { let that = this uni.canvasToTempFilePath({ canvasId: 'canvas', fileType: 'png', quality: 1, //图片质量 success: function(res) { let imgs = [res.tempFilePath] that.$.upload_img(imgs, 0, res => { let imgUrl = res.data //签名图片 let mediaUrl = that.$.get_data('mediaUrl') //采集图片 if (that.$.isEmpty(mediaUrl)) { mediaUrl = '' } that.$.ajax("POST", "/customer/user/checkTask", { taskId: that.taskId, status: 1, //状态:1同意2拒绝 signImage: imgUrl, userVideo: mediaUrl, }, (res) => { if (res.code === 1000) { that.$.ti_shi(res.message) setTimeout(() => { uni.$emit('signOk') that.$.back() }, 1000) } else { that.$.ti_shi(res.message) } }); }) }, fail(e) { console.log(e) } }) } } } </script> <style scoped lang="less"> .signBox { position: relative; overflow: hidden; background-color: #F6F6F6; height: 100vh; width: 100vw; .canvas { width: 100%; background: #FFFFFF; } .topHint { width: 100%; height: 60rpx; line-height: 60rpx; font-size: 28rpx; color: #6D7984; text-align: center; background: ; } .btn { width: 100%; height: 132rpx; display: flex; align-items: center; justify-content: center; .saveBtn { width: 300rpx; height: 88rpx; line-height: 88rpx; background: #215AA0; border-radius: 20rpx; text-align: center; font-size: 32rpx; color: #FFFFFF; } .cancelBtn { width: 298rpx; height: 86rpx; line-height: 86rpx; background: #FFFFFF; border-radius: 20rpx; text-align: center; font-size: 32rpx; color: #202233; border: 1px solid #BBC4CC; } } } </style>
标签:uniapp,vue,dom,res,height,length,points,手写,line From: https://www.cnblogs.com/qqqq122418812/p/18186302