微信小程序实现签字功能


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 相关文章推荐
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
Node.js开发第三方微信公众平台
Jun 05 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
使用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
数字转英文
2006/12/06 PHP
php xml-rpc远程调用
2008/12/19 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
yii数据库的查询方法
2015/12/28 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python编程开发之日期操作实例分析
2015/11/13 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
小学安全工作汇报材料
2014/08/19 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
交通事故责任认定书
2015/08/06 职场文书
导游词之西安骊山
2019/12/03 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL
python标准库ElementTree处理xml
2022/05/20 Python