小程序有关手写板签名具体代码

3403771864 发布于2023-03-26 17:27 / 423人阅读

　　本文主要为大家讲述在小程序中实现手写板签名的具体代码，下面看看具体内容：

　　1.wxss代码

　　page{
　　background:#F8F8F8;
　　}
　　/*签名*/
　　.qianming{
　　background:#fff;
　　padding:20rpx 30rpx;
　　font-size:32rpx;
　　color:#333;
　　padding-bottom:0;
　　position:fixed;
　　bottom:0;
　　left:0;
　　width:92%;
　　height:47%;
　　}
　　.qianming.clear{
　　font-size:26rpx;
　　color:#669AF2;
　　}
　　.flex-def{
　　display:flex;
　　}
　　.flex-one{
　　flex:1;
　　}
　　.flex-cCenter{
　　align-items:center;
　　}
　　/*底部按钮*/
　　.bottom_btn{
　　font-size:32rpx;
　　color:#fff;
　　padding:30rpx 0;
　　background:#fff;
　　width:100%;
　　}
　　.bottom_btn view{
　　width:100%;
　　background:#FF083C;
　　border-radius:40rpx;
　　height:80rpx;
　　line-height:80rpx;
　　text-align:center;
　　}
　　/*隐藏滚动条*/
　　::-webkit-scrollbar{
　　width:0;
　　height:0;
　　color:transparent;
　　display:none;
　　}

　　2.wxml代码

　　&lt;view class="qianming"&gt;
　　&lt;view class="qianming_top flex-def flex-cCenter"wx:if="{{is_sign==1}}"&gt;
　　&lt;view class="flex-one"&gt;签名&lt;/view&gt;
　　&lt;view class="clear"bindtap="clear"&gt;清空&lt;/view&gt;
　　&lt;/view&gt;
　　&lt;view class="canvas"&gt;
　　&lt;canvas style="width:100%;height:360rpx;border:1px#eee solid;background-color:#fff;border-radius:16rpx;margin-top:20rpx;"canvas-id="firstCanvas"id='firstCanvas'bindtouchstart="bindtouchstart"bindtouchmove="bindtouchmove"&gt;&lt;/canvas&gt;
　　&lt;/view&gt;
　　&lt;view class="bottom_btn"&gt;
　　&lt;view class="skin-bg-{{theme}}"bindtap='export'&gt;我已知悉并同意&lt;/view&gt;
　　&lt;/view&gt;
　　&lt;/view&gt;

　　3.js代码　

　　data:{
　　context:null,
　　imgUrl:"",
　　index:0,//用来判断是否签名
　　},
　　/**记录开始点*/
　　bindtouchstart:function(e){
　　this.data.context.moveTo(e.changedTouches[0].x,e.changedTouches[0].y)
　　//记录已经开始签名
　　this.setData({
　　index:1
　　})
　　},
　　/**记录移动点，刷新绘制*/
　　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);
　　//记录已经开始签名
　　this.setData({
　　index:1
　　})
　　},
　　/**清空画布*/
　　clear:function(){
　　this.data.context.draw();
　　this.setData({
　　index:0
　　})
　　},
　　/**导出图片点击确定按钮*/
　　export:function(){
　　const that=this;
　　if(that.data.index==0){
　　wx.showToast({
　　title:'请阅读并签名',
　　icon:'none',
　　duration:2000
　　})
　　return
　　}
　　that.data.context.draw(true,
　　wx.canvasToTempFilePath({
　　x:0,
　　y:0,
　　fileType:'png',
　　canvasId:'firstCanvas',
　　success(res){
　　that.upload_image(res.tempFilePath)
　　},
　　fail(){
　　wx.showToast({
　　title:'签名失败',
　　icon:'none',
　　duration:2000
　　})
　　}
　　})
　　)
　　}
　　},
　　//将图片保存到服务器
　　upload_image(imgurl){
　　var that=this;
　　},

　　4.注意json文件必须加这个参数为true，否则签名时晃动

　　{
　　"disableScroll":true
　　}

　　全部内容已全部讲述完毕，欢迎关注后续更多精彩内容。

idc机房托管专线服务有关小程序开发的小程序 java比对手写签名 html 5手写签名小程序代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/130353.html

微信小程序实现手写签名具体代码

　　今天我想为大家说明微信小程序实现手写签名的具体代码，现在我们看看具体内容：　　先说具备功能：　　1、笔迹绘制　　2、笔迹清空　　以下是js代码：　　varcontent=null; 　　vartouchs=[]; 　　varcanvasw=0; 　　varcanvash=0; 　　varthat=null; 　　Page({ 　　/** 　　*页面的初始数据　　*/ 　　data:{ 　　}...

3403771864 2023-04-27 17:17 评论0 收藏0
微信小程序实现手写签名(签字版)代码

　　公司近期有个需要用户签名的功能，现在就看看在微信小程序实现手写签名的具体代码，就选择小程序canvas。　　wxml　　<viewclass="sign"> 　　<viewclass="paper"> 　　<canvasclass="handWriting"disable-scroll="tru...

3403771864 2023-05-21 16:05 评论0 收藏0
金三银四，2019大厂Android高级工程师面试题整理

摘要：原文地址游客前言金三银四，很多同学心里大概都准备着年后找工作或者跳槽。最近有很多同学都在交流群里求大厂面试题。最近整理了一波面试题，包括安卓JAVA方面的，目前大厂还是以安卓源码，算法，以及数据结构为主，有一些中小型公司也会问到混合开发的知识，至于我为什么倾向于混合开发，我的一句话就是走上编程之路，将来你要学不仅仅是这些，丰富自己方能与世接轨，做好全栈的装备。原文地址：游客kutd...

沈建明 2019-06-25 12:44 评论0 收藏0
金三银四，2019大厂Android高级工程师面试题整理

摘要：原文地址游客前言金三银四，很多同学心里大概都准备着年后找工作或者跳槽。最近有很多同学都在交流群里求大厂面试题。最近整理了一波面试题，包括安卓JAVA方面的，目前大厂还是以安卓源码，算法，以及数据结构为主，有一些中小型公司也会问到混合开发的知识，至于我为什么倾向于混合开发，我的一句话就是走上编程之路，将来你要学不仅仅是这些，丰富自己方能与世接轨，做好全栈的装备。原文地址：游客kutd...

tracymac7 2019-08-16 16:18 评论0 收藏0
微信小程序：手写日历组件

摘要：一前言最近公司要做一个酒店入住的小程序，不可避免的一定会使用到日历，而小程序没有内置的日历组件。二代码原理分析写一个日历只需要知道两件事情一个月有多少天每个月的第一天是星期几。一、前言最近公司要做一个酒店入住的小程序，不可避免的一定会使用到日历，而小程序没有内置的日历组件。在网上看了一下也没有非常适合需求的日历，于是自己写了一个。二、代码 1. 原理分析写一个日历只需要知道两件...

genefy 2019-08-22 15:01 评论0 收藏0