微信小程序实现签字功能


Posted in Javascript onDecember 23, 2019

效果展示

微信小程序实现签字功能 

准备工作

1.canvas的使用

主要用到了 bindtouchstart , bindtouchmove 两个属性,捕捉手指移动的同时,将移动前的坐标和移动后的坐标用canvas的画图api绘制出来

2.wx.createCanvasContext

这个api用于创建并获取指定canvas对象

代码说明

在wxml中声明一个canvas

指定canvas-id和触摸开始和移动函数

<canvas canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>

初始化canvas

onShow: function() {
 const context = wx.createCanvasContext('firstCanvas')
 this.setData({
  context: context
 })
 context.draw()
 },

给手指触摸绑定函数

// 开始触摸
bindtouchstart: function(e) {
 console.log("bindtouchstart", e);
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
 },
 
// 触摸移动
bindtouchmove: function(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(true);
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
 },

具体代码

index.wxml

<view class="container">
 <canvas style="margin: 0 15rpx;width: 720rpx;height: 720rpx;border: 1px #333 solid;background-color: #fff;" canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
 <view class="btn">
 <view bindtap='clear' class="clear">
  清除
 </view>
 <view bindtap='export' class="submit">
  提交
 </view>
 </view>
 <image style="width:360rpx;height:360rpx;margin: 10rpx 0;" mode="aspectFill" src="{{imgUrl}}"></image>
</view>

index.js

Page({
 data: {
 context: null,
 imgUrl: ""
 },
 /**记录开始点 */
 bindtouchstart: function(e) {
 this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
 },
 /**记录移动点,刷新绘制 */
 bindtouchmove: function(e) {
 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);
 },
 /**清空画布 */
 clear: function() {
 this.data.context.draw();
 },
 /**导出图片 */
 export: function() {
 const that = this;
 this.data.context.draw(false, wx.canvasToTempFilePath({
  x: 0,
  y: 0,
  fileType: 'jpg',
  canvasId: 'firstCanvas',
  success(res) {
  const {
   tempFilePath
  } = res;
  that.setData({
   imgUrl: tempFilePath,
  })
  },
  fail() {
  wx.showToast({
   title: '导出失败',
   icon: 'none',
   duration: 2000
  })
  }
 }))
 },
 onShow: function() {
 const context = wx.createCanvasContext('firstCanvas')
 this.setData({
  context: context
 })
 context.draw()
 },
})

总结

以上所述是小编给大家介绍的微信小程序实现签字功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
js实现时间日期校验
May 26 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 #Javascript
vue实现移动端图片上传功能
Dec 23 #Javascript
vue实现拖拽效果
Dec 23 #Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
Php图像处理类代码分享
2012/01/19 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python之web模板应用
2017/12/26 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
NumPy中的维度Axis详解
2019/11/26 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
打架检讨书400字
2014/01/17 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
人工作失职检讨书
2015/05/05 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android