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


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

先看效果图：



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

}







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。