微信小程序实现手指触摸画板


Posted in Javascript onJuly 09, 2018

本文实例为大家分享了微信小程序实现手指触摸画板的具体代码,供大家参考,具体内容如下

先看效果图:

微信小程序实现手指触摸画板

wxml

<!--pages/shouxieban/shouxieban.wxml-->
<view class="container">
 <view>手写板(请在下方区域手写内容)</view>
 <canvas style="width: {{canvasw}}px; height: {{canvash}}px" class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
 <view class='btns canvaspd'>
 <button bindtap="cleardraw">清除画板</button>
 <button bindtap="setSign">确定</button>
 </view>
 <image src='{{canvasimgsrc}}'></image> 
</view>

js

var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态,标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
// pages/shouxieban/shouxieban.js
Page({
 /**
 * 页面的初始数据
 */
 data: {
 //canvas宽高
 canvasw: 0,
 canvash: 0,
 //canvas生成的图片路径
 canvasimgsrc: ""
 },
 //画布初始化执行
 startCanvas: function () {
 var that = this;
 //创建canvas
 this.initCanvas();
 //获取系统信息
 wx.getSystemInfo({
  success: function (res) {
  canvasw = res.windowWidth - 0;//设备宽度
  canvash = canvasw;
  that.setData({ 'canvasw': canvasw });
  that.setData({ 'canvash': canvash });
  }
 });
 
 },
 //初始化函数
 initCanvas: function () {
 // 使用 wx.createContext 获取绘图上下文 context
 context = wx.createCanvasContext('canvas');
 context.beginPath()
 context.setStrokeStyle('#000000');
 context.setLineWidth(4);
 context.setLineCap('round');
 context.setLineJoin('round');
 },
 //事件监听
 canvasIdErrorCallback: function (e) {
 console.error(e.detail.errMsg)
 },
 canvasStart: function (event) {
 isButtonDown = true;
 arrz.push(0);
 arrx.push(event.changedTouches[0].x);
 arry.push(event.changedTouches[0].y);
 
 },
 canvasMove: function (event) {
 if (isButtonDown) {
  arrz.push(1);
  arrx.push(event.changedTouches[0].x);
  arry.push(event.changedTouches[0].y);
 
 };
 
 for (var i = 0; i < arrx.length; i++) {
  if (arrz[i] == 0) {
  context.moveTo(arrx[i], arry[i])
  } else {
  context.lineTo(arrx[i], arry[i])
  };
 
 };
 context.clearRect(0, 0, canvasw, canvash);
 
 context.setStrokeStyle('#000000');
 context.setLineWidth(4);
 context.setLineCap('round');
 context.setLineJoin('round');
 context.stroke();
 
 context.draw(false);
 },
 canvasEnd: function (event) {
 isButtonDown = false;
 },
 //清除画布
 cleardraw: function () {
 //清除画布
 arrx = [];
 arry = [];
 arrz = [];
 context.clearRect(0, 0, canvasw, canvash);
 context.draw(true);
 },
 //提交签名内容
 setSign: function () {
 var that = this;
 if (arrx.length == 0) {
  wx.showModal({
  title: '提示',
  content: '签名内容不能为空!',
  showCancel: false
  });
  return false;
 };
 console.log("不是空的,canvas即将生成图片")
 //生成图片
 wx.canvasToTempFilePath({
  canvasId: 'canvas',
  success: function (res) {
  console.log("canvas可以生成图片")
  console.log(res.tempFilePath, 'canvas图片地址');
  that.setData({ canvasimgsrc: res.tempFilePath })
  //code 比如上传操作
 
  },
  fail: function () {
  console.log("canvas不可以生成图片")
  wx.showModal({
   title: '提示',
   content: '微信当前版本不支持,请更新到最新版本!',
   showCancel: false
  });
  },
  complete: function () {
 
  }
 })
 
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 //画布初始化执行
 this.startCanvas();
 
 }
})

css

/* pages/shouxieban/shouxieban.wxss */
/*手写板 */
page{
 background: #f6f6f6;
 padding: 5px auto
}
canvas{
 border: 1px solid #d0d0d0;
 margin: 5rpx;
 background: #f2f2f2
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
如何编写jquery插件
Mar 29 jQuery
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 #Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
js中Object.defineProperty()方法的不详解
Jul 09 #Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 #Javascript
微信小程序实现倒计时补零功能
Jul 09 #Javascript
Angular6中使用Swiper的方法示例
Jul 09 #Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 #Javascript
You might like
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
php中文验证码实现方法
2015/06/18 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
Vue指令实现OutClick的示例
2020/11/16 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python实现ATM系统
2020/02/17 Python
pandas参数设置的实用小技巧
2020/08/23 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
一封普通求职者的求职信
2013/11/20 职场文书
英文留学推荐信范文
2014/01/25 职场文书
支部鉴定材料
2014/06/02 职场文书
青奥会口号
2014/06/12 职场文书
介绍信的写法
2015/01/31 职场文书
红色经典电影观后感
2015/06/18 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书