微信小程序实现签字功能


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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
javascript中this关键字详解
Dec 12 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 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中操作Excel实例代码
2010/04/29 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
深入理解python中sort()与sorted()的区别
2018/08/29 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
const和static readonly区别
2013/05/20 面试题
家居设计专业个人自荐信范文
2013/11/26 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
鸟的天堂导游词
2015/01/31 职场文书
入党介绍人意见2015
2015/06/01 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Python实现文字pdf转换图片pdf效果
2022/04/03 Python