微信小程序实现签字功能


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 相关文章推荐
js 限制数字 js限制输入实现代码
Dec 04 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
js实现方块上下左右移动效果
Aug 17 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
vue实现列表垂直无缝滚动
Apr 08 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
第十一节 重载 [11]
2006/10/09 PHP
一段php加密解密的代码
2006/10/09 PHP
PHP的FTP学习(二)
2006/10/09 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
jquery插件制作简单示例说明
2012/02/03 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python实现栈的方法
2015/05/26 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python怎么自定义捕获错误
2020/06/29 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
工商管理专业实习生自我鉴定
2013/09/29 职场文书
将相和教学反思
2014/02/04 职场文书
手机银行营销方案
2014/03/14 职场文书
五四青年节演讲稿
2014/05/26 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
技术股份合作协议书
2014/10/05 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫