微信小程序-基於canvas畫畫塗鴉

代碼地址如下：
http://www.demodashi.com/demo/14461.html

一、前期准備工作

軟件環境：微信開發者工具
官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

• 實現用戶自定畫筆大小
• 實現用戶自定色彩
• 實現用戶動畫撤回之前的操作
• 實現生成分享海報
• 實現用戶預覽畫作,清除畫布

2、案例目錄結構

二、程序實現具體步驟

1.index.wxml代碼

<view class="option-panel">
    <view class="option-row" id="firstRow">
      <view class="width-container">
        <text>筆觸大小</text>
        <block wx:for="{{lineWidthArr.length}}" wx:key="index">
          <brush-point class="brush-point" radius="{{lineWidthArr[index]}}" data-index="{{index}}" selected="{{index === curWidthIndex}}" bind:select="clickChangeWidth" color="{{currentColor}}"></brush-point>
        </block>
      </view>
    </view>
    <view class="option-row" id="secondRow">
      <view class="color-slecotr-left"></view>
      <scroll-view scroll-x="true">
        <block wx:for="{{avaliableColors}}" wx:key="index">
          <color-box class="color-box" data-color="{{avaliableColors[index]}}" selected="{{avaliableColors[index]===currentColor}}" bind:select="clickChangeColor"></color-box>
        </block>
      </scroll-view>
      <view class="color-slecotr-right"></view>
    </view>

    <view class="option-row" id="thirdRow">
      <view class="tool-container">
      <custom-button class="icon-text" 
          imgUrl="/images/games/common/btn_back.png"
          bind:clickEvent="clickFallback"
          text="撤銷"
          width="100%">
        </custom-button>

        <custom-toggle class="icon-text" 
          imgUrl="/images/games/common/btn_erase.png" 
          selected="{{bgColor===currentColor}}" 
          bind:clickEvent="clickErase"
          text="橡皮"
          width="100%">
        </custom-toggle>
        
        <custom-button class="icon-text" 
          imgUrl="/images/games/common/btn_tranCan.png" 
          bind:clickEvent="clickClearAll"
          text="清除"
          width="100%">
        </custom-button>

        <custom-button class="icon-text" 
          imgUrl="/images/games/common/btn_pageview.png" 
          bind:clickEvent="pageView"
          text="預覽"
          width="100%">
        </custom-button>
      </view>
    </view>
    <view class="option-row" id="forthRow">
      <button type="primary" class="share-btn" bindtap='goRelease'>發布佳作</button>
      <button type="primary" class="share-btn" bindtap='clickShare'>發起猜猜</button>
    </view>
  </view>
</view>

2.index.wxss代碼

page{
  height: 100%;
  width:100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* 顯示的題目 */

.container .question {
  width: 100%;
  height: 10%;
  background: #f0efef;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #fb21a1;
  box-shadow: 2rpx 5rpx 2rpx silver;
}

/* 刷新按鈕 */

.container .question .userinfo-avatar {
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
  overflow: hidden;
}

.container .question text {
  margin: auto 10rpx auto 20rpx;
}

.container .question .refresh-btn {
  width: 50rpx;
  height: 50rpx;
  transform: scaleX(-1);
}

/* 中間畫板 */

.container .palette {
  width: 100%;
  height: 56%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 2rpx 5rpx 2rpx silver;
}

3.index.js邏輯代碼

a.UI事件動畫部分的功能實現

/*--------------------- UI事件 --------------------------------------------------- */
  // 繪制開始 手指開始按到屏幕上
  touchStart: function (e) {
    this.lineBegin(e.touches[0].x, e.touches[0].y)
    curDrawArr.push({
      x: e.touches[0].x,
      y: e.touches[0].y
    });
  },

  // 繪制中 手指在屏幕上移動
  touchMove: function (e) {
    if (begin) {
      this.lineAddPoint(e.touches[0].x, e.touches[0].y);
      this.draw(true);
      curDrawArr.push({
        x: e.touches[0].x,
        y: e.touches[0].y
      });
    }
  },

  // 繪制結束 手指抬起
  touchEnd: function () {
    drawInfos.push({
      drawArr: curDrawArr,
      color: this.data.currentColor,
      lineWidth: this.data.lineWidthArr[this.data.curWidthIndex],
    });
    curDrawArr = [];
    this.lineEnd();
  },

b.設置線條顏色,設置線條寬度,開始繪制線條,繪制線條中間添加點,等操作...

 // 設置線條顏色
  setCurrentColor: function (color) {
    this.data.currentColor = color;
    this.context.strokeStyle = color;
    this.setData({
      currentColor: color
    });
  },

  // 設置線條寬度
  setLineWidthByIndex: function (index) {
    let width = this.data.lineWidthArr[index];
    this.context.setLineWidth(width);
    this.setData({
      curWidthIndex: index
    });
  },

  // 開始繪制線條
  lineBegin: function (x, y) {
    begin = true;
    this.context.beginPath()
    startX = x;
    startY = y;
    this.context.moveTo(startX, startY)
    this.lineAddPoint(x, y);
  },

  // 繪制線條中間添加點
  lineAddPoint: function (x, y) {
    this.context.moveTo(startX, startY)
    this.context.lineTo(x, y)
    this.context.stroke();
    startX = x;
    startY = y;
  },

  // 繪制線條結束
  lineEnd: function () {
    this.context.closePath();
    begin = false;
  },

  // 根據保存的繪制信息重新繪制
  reDraw: function () {
    this.init();
    this.fillBackground(this.context);
    // this.draw(false);
    for (var i = 0; i < drawInfos.length; i++) {
      this.context.strokeStyle = drawInfos[i].color;
      this.context.setLineWidth(drawInfos[i].lineWidth);
      let drawArr = drawInfos[i].drawArr;
      this.lineBegin(drawArr[0].x, drawArr[0].y)
      for (var j = 1; j < drawArr.length; j++) {
        this.lineAddPoint(drawArr[j].x, drawArr[j].y);
        // this.draw(true);
      }

      this.lineEnd();
    }

    this.draw();
  },

  // 將canvas導出為臨時圖像文件
  // canvasId： 要導出的canvas的id
  // cb: 回調函數
  store: function (canvasId, cb) {
    wx.canvasToTempFilePath({
      destWidth: 400,
      destHeight: 300,
      canvasId: canvasId,
      success: function (res) {
        typeof (cb) == 'function' && cb(res.tempFilePath);
      },
      fail: function (res) {
        console.log("store fail");
        console.log(res);
      }
    })
  },

三、案例運行效果圖

四、總結與備注

暫無微信小程序-基於canvas畫畫塗鴉

代碼地址如下：
http://www.demodashi.com/demo/14461.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權