微信小程序-基于canvas画画涂鸦

立即下载用AI写一个

发布时间：2018-11-13

110人 | 浏览：13852次 | 收藏 |

技术：微信小程序

概述

微信小程序-基于canvas画画涂鸦。实现用户自定画笔大小，实现用户自定色彩，实现用户动画撤回之前的操作，实现生成分享海报，实现用户预览画作,清除画布。

详细

#### 一、前期准备工作
软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
##### 1、基本需求。
- 实现用户自定画笔大小
- 实现用户自定色彩
- 实现用户动画撤回之前的操作
- 实现生成分享海报
- 实现用户预览画作,清除画布

##### 2、案例目录结构
![案例目录结构](/contentImages/image/20181113/y7N20rb62PdpaDQ5bAw.png)

#### 二、程序实现具体步骤
##### 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>

<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);
      }
    })
  },
```

#### 三、案例运行效果图
![](/contentImages/image/20181113/GDxKnv1NhQRULBXpOJZ.gif)

#### 四、总结与备注

暂无

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

微信小程序-基于canvas画画涂鸦

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子