微信小程序制作簡易畫板

效果圖

palette.gif

原理介紹

??利用官方組件canvas來實現(xiàn)畫板的制作，通過不斷獲取手指觸摸的位置，將初始位置和移動位置進行連線，達到實現(xiàn)畫筆的功能。另外利用官方APIclearRect實現(xiàn)橡皮檫的功能，而不僅僅只是在畫布上涂白色達到表面上的消除效果。

??官方文檔鏈接

廢話不多，上代碼

簡單布局一下

??整個布局沒有啥好說的，命個名，綁定兩個事件。唯一需要提醒的一點就是如果希望畫畫的時候禁用屏幕滾動，可以設(shè)置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邏輯

??這里我把要說的都寫進注釋了，相信大家不難理解。當(dāng)然這只是一個模型，需要改進和完善的地方還有很多，如果大家有更好的方法推薦，希望能夠在下方留言。

// js代碼

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    isClear: false
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    // 獲取畫布上下文
    this.context = wx.createCanvasContext('my-canvas');  // 參數(shù)必須和canvas組件中canvas-id值相同
  },

  // 剛開始觸摸
  touchStart(e) {
    // 獲取觸摸點坐標(biāo)
    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) {
    // 移動時坐標(biāo)
    var moveX = e.changedTouches[0].x
    var moveY = e.changedTouches[0].y

    // 判斷是否是橡皮檫
    if (this.data.isClear) {
      // 是
      // 以當(dāng)前坐標(biāo)點為中心創(chuàng)建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();                          // 描繪路徑
    }

    // 改變起點坐標(biāo)
    this.startX = moveX;
    this.startY = moveY;
    this.context.draw(true);  // 畫
  },

  // 橡皮檫
  clear() {
    // 每次點擊都變成相反的狀態(tài)
    this.setData({
      isClear: !this.data.isClear
    })
  }
})