介绍昂秀:,()函数,{
,const context =, wx.createCanvasContext (& # 39; firstCanvas& # 39;)
,this.setData ({
背景:才能上下文
,})
,context.draw ()
}, //,开始触摸
bindtouchstart:函数(e), {
,console.log (“bindtouchstart", e);
,this.data.context.moveTo (e.changedTouches [0]。x,, e.changedTouches [0] .y)
},
,//,触摸移动
bindtouchmove:函数(e), {
,console.log (“bindtouchstart", e);
,this.data.context.lineTo (e.changedTouches [0]。x,, e.changedTouches [0] .y);
,this.data.context.stroke ();
,this.data.context.draw(真正的);
,this.data.context.moveTo (e.changedTouches [0]。x,, e.changedTouches [0] .y);
}, & lt; view 类=癱ontainer"比;
,& lt; canvas canvas-id=癴irstCanvas", id=& # 39; firstCanvas& # 39;, bindtouchstart=癰indtouchstart", bindtouchmove=癰indtouchmove"祝辞& lt;/canvas>
,& lt; view 类=癰tn"比;
,& lt; view bindtap=& # 39;明确# 39;,类=癱lear"比;
清才能除
,& lt;/view>
,& lt; view bindtap=& # 39;出口# 39;,类=皊ubmit"比;
提才能交
,& lt;/view>
,& lt;/view>
,& lt; image 模式=癶ttps://www.yisu.com/zixun/aspectFill", src=" {{imgUrl}} ">
页面({
,数据:{
背景:大敌;空,
,imgUrl:““
},
,/* *记录开始点,*/,bindtouchstart:函数(e), {
,this.data.context.moveTo (e.changedTouches [0]。x,, e.changedTouches [0] .y)
},
,/* *记录移动点,刷新绘制,*/,bindtouchmove:函数(e), {
,this.data.context.lineTo (e.changedTouches [0]。x,, e.changedTouches [0] .y);
,this.data.context.stroke ();
,this.data.context.draw(真正的);
,this.data.context.moveTo (e.changedTouches [0]。x,, e.changedTouches [0] .y);
},
,/* *清空画布,*/,明确:函数(),{
,this.data.context.draw ();
},
,/* *导出图片,*/,出口:函数(),{=,const that ;
,this.data.context.draw(假,wx.canvasToTempFilePath ({
,,x: 0,
,,y: 0,
,,文件类型:& # 39;jpg # 39;
,,canvasId: & # 39; firstCanvas& # 39;
成功才能(res), {
const {才能
tempFilePath。才能
,,},=,res;
that.setData({才能
,,,imgUrl: tempFilePath,
})才能
,,},
失败(),{才能
wx.showToast({才能
,,,标题:& # 39;导出失败& # 39;,
,,,图标:& # 39;没有# 39;
,,时间:2000年
})才能
,,}
,}))
},
,昂秀:函数(),{
,const context =, wx.createCanvasContext (& # 39; firstCanvas& # 39;)
,this.setData ({
背景:才能上下文
,})
,context.draw ()
},
})
这篇文章给大家分享的是有关微信小程序如何实现签字功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
效果展示
& lt; canvas canvas-id=癴irstCanvas", id=& # 39; firstCanvas& # 39;, bindtouchstart=癰indtouchstart", bindtouchmove=癰indtouchmove"祝辞& lt;/canvas>
初始化帆布
给手指触摸绑定函数
具体代码
索引。wxml
索引。js
感谢各位的阅读!关于“微信小程序如何实现签字功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
