资讯专栏INFORMATION COLUMN

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

3403771864 / 486人阅读

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

  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代码

  <view class="qianming">
  <view class="qianming_top flex-def flex-cCenter"wx:if="{{is_sign==1}}">
  <view class="flex-one">签名</view>
  <view class="clear"bindtap="clear">清空</view>
  </view>
  <view class="canvas">
  <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"></canvas>
  </view>
  <view class="bottom_btn">
  <view class="skin-bg-{{theme}}"bindtap='export'>我已知悉并同意</view>
  </view>
  </view>

  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
  }

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


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

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

相关文章

  • 金三银四,2019大厂Android高级工程师面试题整理

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

    tracymac7 评论0 收藏0
  • 微信程序手写日历组件

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

    genefy 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<