【微信小程序canvas】實(shí)現(xiàn)小程序手寫板用戶簽名(附代碼)

工作中公司業(yè)務(wù)需要的微信小程序用戶簽字功能

先看效果圖：

demo

wxml

重寫

完成

bindtouchend="uploadScaleEnd"?bindtap="mouseDown"?canvas-id="handWriting">

手寫板

js

datapage({

data:?{

canvasName:?'handWriting',

ctx:?'',

canvasWidth:?0,

canvasHeight:?0,

transparent:?1,?//?透明度

selectColor:?'black',

lineColor:?'#1A1A1A',?//?顏色

lineSize:?1.5,??//?筆記倍數(shù)

lineMin:?0.5,???//?最小筆畫半徑

lineMax:?4,?????//?最大筆畫半徑

pressure:?1,?????//?默認(rèn)壓力

smoothness:?60,??//順滑度，用60的距離來計算速度

currentPoint:?{},

currentLine:?[],??//?當(dāng)前線條

firstTouch:?true,?//?第一次觸發(fā)

radius:?1,?//畫圓的半徑

cutArea:?{?top:?0,?right:?0,?bottom:?0,?left:?0?},?//裁剪區(qū)域

bethelPoint:?[],??//保存所有線條?生成的貝塞爾點(diǎn)；

lastPoint:?0,

chirography:?[],?//筆跡

currentChirography:?{},?//當(dāng)前筆跡

linePrack:?[],?//劃線軌跡?,?生成線條的實(shí)際點(diǎn)

}

})

初始化page({

onLoad?()?{????let?canvasName?=?this.data.canvasName????let?ctx?=?wx.createCanvasContext(canvasName)????this.setData({??????ctx:?ctx

})????var?query?=?wx.createSelectorQuery();

query.select('.handCenter').boundingClientRect(rect?=>?{query.select('.handCenter').boundingClientRect(rect?=>?{??????????this.setData({this.setData({????????????canvasWidth:?rect.width,canvasWidth:?rect.width,????????????canvasHeight:?rect.heightcanvasHeight:?rect.height

})})

}).exec();?}).exec();

},?},

})

事件函數(shù)

筆跡開始//?筆跡開始

uploadScaleStart?(e)?{????if?(e.type?!=?'touchstart')?return?false;????let?ctx?=?this.data.ctx;

ctx.setFillStyle(this.data.lineColor);??//?初始線條設(shè)置顏色

ctx.setGlobalAlpha(this.data.transparent);??//?設(shè)置半透明

let?currentPoint?=?{??????x:?e.touches[0].x,??????y:?e.touches[0].y

}????let?currentLine?=?this.data.currentLine;

currentLine.unshift({??????time:?new?Date().getTime(),??????dis:?0,??????x:?currentPoint.x,??????y:?currentPoint.y

})????this.setData({

currentPoint,??????//?currentLine

})????if?(this.data.firstTouch)?{??????this.setData({????????cutArea:?{?top:?currentPoint.y,?right:?currentPoint.x,?bottom:?currentPoint.y,?left:?currentPoint.x?},????????firstTouch:?false

})

}????this.pointToLine(currentLine);

},

筆跡移動//?筆跡移動

uploadScaleMove?(e)?{????if?(e.type?!=?'touchmove')?return?false;????if?(e.cancelable)?{??????//?判斷默認(rèn)行為是否已經(jīng)被禁用

if?(!e.defaultPrevented)?{

e.preventDefault();

}

}????let?point?=?{??????x:?e.touches[0].x,??????y:?e.touches[0].y

}????//測試裁剪

if?(point.y?

}????if?(point.y??this.data.cutArea.right)?{??????this.data.cutArea.right?=?point.x;

}????if?(this.data.canvasWidth?-?point.x?<=?0)?{??????this.data.cutArea.right?=?this.data.canvasWidth;

}????if?(point.y?>?this.data.cutArea.bottom)?{??????this.data.cutArea.bottom?=?point.y;

}????if?(this.data.canvasHeight?-?point.y?<=?0)?{??????this.data.cutArea.bottom?=?this.data.canvasHeight;

}????if?(point.x?

}????if?(point.x?

})????let?currentLine?=?this.data.currentLine

currentLine.unshift({??????time:?new?Date().getTime(),??????dis:?this.distance(this.data.currentPoint,?this.data.lastPoint),??????x:?point.x,??????y:?point.y

})????//?this.setData({

//???currentLine

//?})

this.pointToLine(currentLine);

},

筆跡結(jié)束//?筆跡結(jié)束

uploadScaleEnd?(e)?{????if?(e.type?!=?'touchend')?return?0;????let?point?=?{??????x:?e.changedTouches[0].x,??????y:?e.changedTouches[0].y

}????this.setData({??????lastPoint:?this.data.currentPoint,??????currentPoint:?point

})????let?currentLine?=?this.data.currentLine

currentLine.unshift({??????time:?new?Date().getTime(),??????dis:?this.distance(this.data.currentPoint,?this.data.lastPoint),??????x:?point.x,??????y:?point.y

})????//?this.setData({

//???currentLine

//?})

if?(currentLine.length?>?2)?{??????var?info?=?(currentLine[0].time?-?currentLine[currentLine.length?-?1].time)?/?currentLine.length;??????//$("#info").text(info.toFixed(2));

}????//一筆結(jié)束，保存筆跡的坐標(biāo)點(diǎn)，清空，當(dāng)前筆跡

//增加判斷是否在手寫區(qū)域；

this.pointToLine(currentLine);????var?currentChirography?=?{??????lineSize:?this.data.lineSize,??????lineColor:?this.data.lineColor

};????var?chirography?=?this.data.chirography

chirography.unshift(currentChirography);????this.setData({

chirography

})????var?linePrack?=?this.data.linePrack

linePrack.unshift(this.data.currentLine);????this.setData({

linePrack,??????currentLine:?[]

})

},

wxsspage?{??background:?#fbfbfb;??height:?auto;??overflow:?hidden;

}.wrapper?{??width:?100%;??height:?95vh;??margin:?30rpx?0;??overflow:?hidden;??display:?flex;??align-content:?center;??flex-direction:?row;??justify-content:?center;??font-size:?28rpx;

}.handWriting?{??background:?#fff;??width:?100%;??height:?95vh;

}.handRight?{??display:?inline-flex;??align-items:?center;

}.handCenter?{??border:?4rpx?dashed?#e9e9e9;??flex:?5;??overflow:?hidden;??box-sizing:?border-box;

}.handTitle?{??transform:?rotate(90deg);??flex:?1;??color:?#666;

}.handBtn?button?{??font-size:?28rpx;

}.handBtn?{??height:?95vh;??display:?inline-flex;??flex-direction:?column;??justify-content:?space-between;??align-content:?space-between;??flex:?1;

}.delBtn?{??position:?absolute;??top:?550rpx;??left:?0rpx;??transform:?rotate(90deg);??color:?#666;

}.delBtn?image?{??position:?absolute;??top:?13rpx;??left:?25rpx;

}

結(jié)語

詳細(xì)項(xiàng)目代碼handwriting-weapp(微信小程序原生canvas用戶簽字手寫板，后續(xù)更新計劃組件化、優(yōu)化渲染邏輯、增加功能，歡迎start 和 PR)

作者：老夫很性感

鏈接：https://www.jianshu.com/p/84dcc0adfe44

總結(jié)

以上是生活随笔為你收集整理的微信小程序 手写签名_【微信小程序canvas】实现小程序手写板用户签名(附代码)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。