微信小程序实现签字功能
作者:Ezio 发布时间:2024-04-16 09:26:12
标签:小程序,签字,js
效果展示
准备工作
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()
},
})
总结
以上所述是小编给大家介绍的微信小程序实现签字功能网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://segmentfault.com/a/1190000021286617
0
投稿
猜你喜欢
- 一、打开、关闭文件 语法为open (filevar, filename),其中filevar为文件句柄,或者说是程序中用来代表某文件的代号
- 目录1. 字典基础知识字典的基本格式表示字典的键、值设置要求1)键的设置要求2)值的设置要求2. 字典元素增加1.利用赋值给字典增加元素2.
- 使用索引时数据库性能优化的必备技能之一。在MySql数据库中,有四种索引:聚焦索引(主键索引)、普通索引、唯一索引以及我们这里将要介绍的全文
- 防止客户机的请求互相干扰或者服务器与维护程序相互干扰的方法主要有多种。如果你关闭数据库,就可以保证服务器和myisamchk和isamchk
- 有些人说py中有两个函数可以实现对所有函数的了解以及使用,其中之一,就是我们今天要讲解的help函数。有些小伙伴可能比较陌生,但是另一个函数
- 本文为大家分享了windows下pycharm安装、创建文件、配置默认模板的具体步骤,供大家参考,具体内容如下步骤: 下包 —->安装
- 1、配置环境支持python2和python3On Linux, Solaris, or FreeBSD, add the /usr/loc
- 实例如下:# -*- coding: utf-8 -*-"""Spyder EditorThis tempor
- enumerate函数enumerate是一个Python内置函数,一个功能强大的内置函数。其实功能强大不足以形容它, 但是很难用一个词来形
- BP算法是适用于多层神经网络的一种算法,它是建立在梯度下降法的基础上的。本文着重推导怎样利用梯度下降法来minimise Loss Func
- 一般情况下只有需要长期运行的项目才会去关注内存的增长情况,即使是很小部分的内存泄露经过长期的运行仍然会产生很大的隐患。python本身也是支
- 质数(Prime number),又称素数,指在大于1的自然数中,除了1和该数自身外,无法被其他自然数整除的数(也可定义为只有1与该数本身两
- 作为一个测试人员,在学习的过程中,可能经常需要去在linux下安装一些软件,有的软件通过搜索别人的博客教程进行安装的话,随着一些软件的升级,
- 一、安装插件要生成html类型的报告,需要使用pytest-html插件,可以在IDE中安装,也可以在命令行中安装。插件安装的位置涉及到不同
- 目录前言魔法方法__init__方法__new__方法__call__方法__str___方法__del___方法__enter__ &am
- vue2的方式1. 全局挂载Vue.property.xxximport Vue from "vue";import a
- 前言:在上一篇文章,已经实现了访问指定URL就返回了指定的数据,这也体现了RESTful API的一个理念,每一个URL代表着一个资源。当然
- Python 中有很多很实用的语法糖,这些语法糖可以帮助我们简化代码、更易理解等优点,接下里再看一个 Python3 * 别实用的语法序列解
- 本文实例分析了python动态性强类型用法。分享给大家供大家参考。具体如下:Python变量声明和定义与C#不同,Python在使用变量之前
- 本文的目的是讨论Python中 __new__ 和 __ini___ 的用法。 __new__ 和 __init__ 的区别主要表现在:1.