微信小程序制作简易画板

效果图

palette.gif

原理介绍

  利用官方组件canvas来实现画板的制作，通过不断获取手指触摸的位置，将初始位置和移动位置进行连线，达到实现画笔的功能。另外利用官方APIclearRect实现橡皮檫的功能，而不仅仅只是在画布上涂白色达到表面上的消除效果。

  官方文档链接

废话不多，上代码

简单布局一下

  整个布局没有啥好说的，命个名，绑定两个事件。唯一需要提醒的一点就是如果希望画画的时候禁用屏幕滚动，可以设置disable-scroll='{{true}}'。

<!-- wxml布局 -->

<canvas 
  class='canvas'
  canvas-id='my-canvas' 
  disable-scroll='{{true}}'
  bindtouchstart='touchStart' 
  bindtouchmove='touchMove'>
</canvas>

<view class='rubber' bindtap='clear' hover-class='change'>
  我是橡皮檫
</view>

/* wxss样式 */

page {
  background: #f1f1f1;
}

.canvas {
  background: #fff;
  width: 600rpx;
  height: 900rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
}

.rubber {
  display: flex;
  background: orange;
  width: 200rpx;
  height: 100rpx;
  margin-top: 40rpx;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
}

.change {
  background: #fff;
}

js逻辑

  这里我把要说的都写进注释了，相信大家不难理解。当然这只是一个模型，需要改进和完善的地方还有很多，如果大家有更好的方法推荐，希望能够在下方留言。

// js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isClear: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取画布上下文
    this.context = wx.createCanvasContext('my-canvas');  // 参数必须和canvas组件中canvas-id值相同
  },

  // 刚开始触摸
  touchStart(e) {
    // 获取触摸点坐标
    this.startX = e.changedTouches[0].x
    this.startY = e.changedTouches[0].y

    // 画笔配置
    this.context.setStrokeStyle('red');  // 颜色 
    this.context.setLineWidth(5);        // 粗细 
    this.context.setLineCap('round');    // 线头形状
    this.context.setLineJoin('round');   // 交叉处形状
  },

  // 开始移动
  touchMove(e) {
    // 移动时坐标
    var moveX = e.changedTouches[0].x
    var moveY = e.changedTouches[0].y

    // 判断是否是橡皮檫
    if (this.data.isClear) {
      // 是
      // 以当前坐标点为中心创建20*20像素的橡皮檫
      let rectOriX = this.startX - 10;
      let rectOriY = this.startY - 10;
      this.context.clearRect(rectOriX, rectOriY, 20, 20);
    } else {
      // 不是
      this.context.moveTo(this.startX, this.startY);  // 找到起点
      this.context.lineTo(moveX, moveY);              // 找到终点
      this.context.stroke();                          // 描绘路径
    }

    // 改变起点坐标
    this.startX = moveX;
    this.startY = moveY;
    this.context.draw(true);  // 画
  },

  // 橡皮檫
  clear() {
    // 每次点击都变成相反的状态
    this.setData({
      isClear: !this.data.isClear
    })
  }
})