微信小程序自定义canvas手写签名组件

需求如下图展示，因为小程序中有好几个地方使用签名，所以做成组件。

1、创建组件

signature.js

const app = getApp();
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {context: null,index: 0,height: 0,width: 0,src: '', //保存后的签名图片地址},/*** 组件的方法列表*/methods: {goPage(e) {wx.redirectTo({url: e.currentTarget.dataset.url})},initCanvas() {const that = this;const query = wx.createSelectorQuery().in(this)query.select('#firstCanvas').fields({node: true,size: true}).exec((rect) => {console.log('rect===', rect)let width = rect[0].width;let height = rect[0].height;that.setData({width,height});const context = wx.createCanvasContext('firstCanvas', that)that.setData({context: context})context.setStrokeStyle('#061A06')context.setLineWidth(2)context.draw()})},/**记录开始点 */bindtouchstart(e) {this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)},/**记录移动点，刷新绘制 */bindtouchmove(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() {this.data.context.clearRect(0, 0, this.data.width, this.data.height);this.data.context.setStrokeStyle('#061A06')this.data.context.setLineWidth(2)this.data.context.draw();},/**导出图片 */export () {const that = this;this.data.context.draw(true, () => {that.exportImage();});},exportImage() {const that = this;setTimeout(() => {wx.canvasToTempFilePath({fileType: 'png',canvasId: 'firstCanvas',success(res) {wx.uploadFile({url: '***/api/v1/common/stream', //服务器上传图片urlfilePath: res.tempFilePath,name: 'file',header: {"content-type": "multipart/form-data"},success(res) {let data = res.data;data = JSON.parse(res.data);console.log(data)if (data.success) {that.setData({src: data.data})that.colseSign()app.showMsg('保存成功')} else {app.showMsg(data.msg)}},fail(err) {console.log(err)app.showMsg('保存失败api')}})},fail(err) {console.log(err)app.showMsg('保存失败')}}, that)}, 500)},colseSign() {this.triggerEvent('sign', this.data.src)}},lifetimes: {ready: function() {this.initCanvas()}},
})

wxml:

<view class="mask" catchtouchmove="true"><view class="sign-pop" catchtouchmove="true"><view class="tc h1">签名区，请手写输入清晰可辨的签名</view><view class="sign-box"><canvas canvas-id="firstCanvas" class="canvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas></view><view class="btn-group tc"><van-button bind:click="clear" round color="#DC1515" custom-style="width: 230rpx;height:80rpx;font-weight: 400;font-size: 28rpx;margin-right:20rpx">清空</van-button><van-button bind:click="export" round color="#185729" custom-style="width: 230rpx;height:80rpx;font-weight: 400;font-size: 28rpx;margin-right:20rpx">保存</van-button><van-button bind:click="colseSign" round color="#9F9F9F" custom-style="width: 230rpx;height:80rpx;font-weight: 400;font-size: 28rpx;">返回</van-button></view></view>
</view>

css样式就不展示了。。

2、在父组件中的使用

js:

Page({/*** 页面的初始数据*/data: {show_sign: false,  //签名显示},openSing(){this.setData({show_sign: true})},saveSign(src){console.log(src)this.setData({show_sign: false})},
})

wxml:

<view class="tc"><van-button bind:click="back" round  color="#9F9F9F" custom-style="width: 300rpx;height:80rpx;font-weight: 400;font-size: 28rpx;margin-right:20rpx">返回</van-button><van-button bind:click="openSing" round  color="#185729" custom-style="width: 320rpx;height:80rpx;font-weight: 400;font-size: 28rpx;">点击这里，签名确认</van-button>
</view><view wx:if="{{show_sign}}"><signature bind:sign="saveSign"></signature>
</view>

微信小程序自定义canvas手写签名组件相关推荐

微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
【微信小程序】实现手写电子签名并保存为图片功能
需求概述: 微信小程序的一个功能,类似于画板,用于电子签名,要求有一键清空画板和保存功能. 实现思路: 微信开发文档中的Canvas组件微信画布API中的 wx.createCanvasContex ...
微信小程序自定义封装环形进度条组件
我们先看效果-选不了视频没办法了说明:此组件对圆的宽度,进度条的宽度.颜色.旋转方向,还有进度条的值,还有两端是否要圆角都进行了动态化,无坑可放心用,参数解释在注释里,我就不写了 .效果图看到尾部的 ...
微信小程序自定义带金额的日历组件
// component/dateSelect/dateSelect.jsComponent({/*** 组件的属性列表*/properties: {timeData: {type: Array,va ...
记录一下小程序的手写签名组件
文章目录前言一..js文件的内容二..json文件的内容三..wxml文件的内容四..wxss文件的内容五.要引用的.wxml文件的内容六.要引用的.js文件的内容七.总结前言由于 ...
基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

微信小程序自定义canvas手写签名组件

微信小程序自定义canvas手写签名组件相关推荐

最新文章

热门文章