• 代码如下：

<template><view class="content"><button type="primary" @tap="doss">点击签名1</button><button type="primary" @tap="doss2">点击签名2</button><view class="imgs"><image class="img" :src="img1" mode="widthFix"></image><image class="img" :src="img2" mode="widthFix"></image></view><catSignature canvasId="canvas1"  @close="close" @save="save" :visible="isShow" /><catSignature canvasId="canvas2" @close="close2" @save="save2" :visible="isShow2" /></view>
</template><script>import catSignature from "@/components/cat-signature/cat-signature.vue"export default {components:{catSignature},data() {return {img1:'',img2:'',isShow:false,isShow2:false,}},onLoad() {},methods: {doss(){this.isShow = true;},close(){this.isShow = false;},save(val){this.isShow = false;this.img1 = val},doss2(){this.isShow2 = true;},close2(){this.isShow2 = false;},save2(val){this.isShow2 = false;this.img2 = val},}}
</script><style>.imgs{width: 500upx;height: 500upx;display: flex;margin: 0 auto;flex-wrap: wrap;}.imgs img{width: 100%; height: 100%;}
</style>

• 插件代码：

<template><view v-if="visibleSync" class="cat-signature" :class="{'visible':show}" @touchmove.stop.prevent="moveHandle"><view class="mask" @tap="close" /><view class="content"><canvas class='firstCanvas' :canvas-id="canvasId" @touchmove='move' @touchstart='start($event)' @touchend='end'@touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error' /><view class="btns"><view class="btn" @tap="clear">清除</view><view class="btn" @tap="save">保存</view></view></view></view>
</template><script>var content = null;var touchs = [];var canvasw = 0;var canvash = 0;//获取系统信息uni.getSystemInfo({success: function(res) {canvasw = res.windowWidth;canvash = canvasw * 9 / 16;},})export default{name:'cat-signature',props:{visible: {type: Boolean,default: false},canvasId:{type: String,default: 'firstCanvas'}},data(){return{show:false,visibleSync: false,signImage:'',hasDh:false,}},watch:{visible(val) {this.visibleSync = val;this.show = val;this.getInfo()}},created(options) {this.visibleSync = this.visiblethis.getInfo()setTimeout(() => {this.show = this.visible;}, 100)},methods:{getInfo(){//获得Canvas的上下文content = uni.createCanvasContext(this.canvasId,this)//设置线的颜色content.setStrokeStyle("#000")//设置线的宽度content.setLineWidth(5)//设置线两端端点样式更加圆润content.setLineCap('round')//设置两条线连接处更加圆润content.setLineJoin('round')},// close() {this.show = false;this.hasDh = false;this.$emit('close')},moveHandle(){},// 画布的触摸移动开始手势响应start(e){let point = {x: e.touches[0].x,y: e.touches[0].y,}touchs.push(point);this.hasDh = true},// 画布的触摸移动手势响应move: function(e) {let point = {x: e.touches[0].x,y: e.touches[0].y}touchs.push(point)if (touchs.length >= 2) {this.draw(touchs)}},// 画布的触摸移动结束手势响应end: function(e) {//清空轨迹数组for (let i = 0; i < touchs.length; i++) {touchs.pop()}},// 画布的触摸取消响应cancel: function(e) {// console.log("触摸取消" + e)},// 画布的长按手势响应tap: function(e) {// console.log("长按手势" + e)},error: function(e) {// console.log("画布触摸错误" + e)},//绘制draw: function(touchs) {let point1 = touchs[0]let point2 = touchs[1]// console.log(JSON.stringify(touchs))content.moveTo(point1.x, point1.y)content.lineTo(point2.x, point2.y)content.stroke()content.draw(true);touchs.shift()},//清除操作clear: function() {//清除画布content.clearRect(0, 0, canvasw, canvash)content.draw(true)// this.close()this.hasDh = false;this.$emit('clear')},save(){var that = this;if(!this.hasDh){uni.showToast({title:'请先签字',icon:'none'})return;}uni.showLoading({title:'生成中...',mask:true})setTimeout(()=>{uni.canvasToTempFilePath({canvasId: this.canvasId,success: function(res) {that.signImage = res.tempFilePath;that.$emit('save',res.tempFilePath);uni.hideLoading()that.hasDh = false;that.show = false;},fail:function(err){console.log(err)uni.hideLoading()}},this)},100)}}}
</script><style lang="scss">.cat-signature.visible {visibility: visible}.cat-signature{display: block;position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;z-index: 11;height: 100vh;visibility: hidden;.mask{display: block;opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4);transition: opacity .3s;}.content{display: block;position: absolute;top: 0;left: 0;bottom:0;right: 0;margin: auto; width:94%;height: 500upx;background: #fff;border-radius: 8upx;box-shadow: 0px 3px 3px #333;// canvas.firstCanvas {background-color: #fff;width: 100%;height: 400upx;}// canvas.btns{padding: 0 15px;height: 100upx;overflow: hidden; position: absolute;bottom: 10upx;left: 0;right: 0;margin: auto;display: flex;justify-content: space-between;.btn{width: 40%;text-align: center;font-size: 28upx;height:60upx;line-height: 60upx;background-color: #999;color: #fff;border-radius: 6upx;}}}}.visible .mask {display: block;opacity: 1}
</style>