uniapp小程序实现横屏手写签名

在这里插入图片描述

<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', //画布idStrokes: [],showCanvasDialog: false,canvasImg: '', //签名图片}},onLoad(e) {this.taskId = e.taskId},computed: {},mounted: function() {let that = thisthis.initCanvas()},methods: {initCanvas() {let that = thisthis.$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].widthlet heights = res[0].heightthat.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 = thisuni.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>