微信小程序-基于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%;
  100%;
}

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

/* 显示的题目 */

.container .question {
   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;
   80rpx;
  border-radius: 50%;
  overflow: hidden;
}

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

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

/* 中间画板 */

.container .palette {
   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大师代发，拒绝转载，转载需要作者授权