Applet signature

Document reads as follows:

1、mini-program-signature.js

const app = getApp()
Page({
    data: {
        img:''
    },
    bindtouchstart: function(e) {
      	this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
    },
    bindtouchmove: function(e) {
        this.data.context.lineWidth='7';
      	this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
      	this.data.context.stroke();
      	this.data.context.draw(true);
      	this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
    },
    bindClear: function() {
        this.data.context.clearRect(0, 0);
        this.data.context.draw();
    },
    bindOk() {
        const that=this;
        this.setCanvasAreaInfo(()=>{
            that.data.context.draw(true , wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: that.data.width,
                height: that.data.height,
                destWidth: that.data.width ,
                destHeight: that.data.height ,
                fileType: 'png',
                quality:1,
                canvasId: 'signatureCanvas',
                success(res) {
                    console.log(res);
                    that.setData({
                        img:res.tempFilePath
                    })
                },
                fail(res) {
                    console.log(res);
                }
            }))
        });
    },
    setCanvasAreaInfo(callBack){
        let query = wx.createSelectorQuery();
        const that = this;
        query.select('#signatureCanvas').boundingClientRect(function (rect) {
            that.setData({
                width:rect.width||0,
                height:rect.height||0
            })
            callBack();
        }).exec();
    },
    onLoad(){
        const that=this;
        const context = wx.createCanvasContext('signatureCanvas');
        this.setData({
            context: context
        })
    }
})

　

2、mini-program-signature.wxml

<view class="signatrue-board">
    <view class="signatrue-board-box"  >
        <view class="signatrue-board-content">
            <canvas canvas-id="signatureCanvas"   id='signatureCanvas' class="signatrue-canvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove" ></canvas>
            <view class="signatrue-board-btns">
                <view class="ok" bindtap='bindOk' >
                    保存
                </view>
                <view class="clear"  bindtap='bindClear'>
                  清除
                </view>
            </view>
            
        </view>
      
    </view>
    <view>
         <image mode="scaleToFill" src="{{img}}" ></image>
    </view>
</view>

　　

3、mini-program-signature.wxml.wxss

.signatrue-canvas{
	width: 82%;
	height:100%;
}
.signatrue-board-title{
	font-size:16px;
	font-weight:500;
	color: #fff;
}




.signatrue-Canvas {
	background-color: blue;
	width: 100%;
	height: 200px;
}
.signatrue-board-box{
	padding:10px ;
	background-color: #fff;

}

.signatrue-board-content{
	background:rgba(245,245,245,1);
	border-radius:8px;
	border:1px dashed rgba(176,184,204,1);
	position: relative;
	height: 68vh;
	
}
.signatrue-board-btns{
	position: absolute;
	right: 20px;
	top: 20px;

}

.signatrue-board-btns>view{
	display: block;
	padding:7px 15px;
	color:#fff;
	background:rgba(47,125,205,1);
	border-radius:4px;
	text-align: center;
	margin-bottom: 20px;
	
}
.signatrue-board-btns>.clear{
	background:rgba(248,248,248,1);
	color:#2F7DCD;
	border:1px solid rgba(47,125,205,1);
}
.signatrue-board-label{
	font-size:12px;

	font-weight:400;
	color:rgba(155,155,155,1);
}

 

4、mini-program-signature.json

{
	"pageOrientation":"landscape"
}　　

 

Original code Address: https://github.com/leepyng/mini-program-signature