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

太过爱你忘了你带给我的痛 2022-03-10 08:44 298阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14461.html][http_www.demodashi.com_demo_14461.html]

#### 一、前期准备工作 ####

软件环境：微信开发者工具  
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html][https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]

##### 1、基本需求。 #####

*  实现用户自定画笔大小
 *  实现用户自定色彩
 *  实现用户动画撤回之前的操作
 *  实现生成分享海报
 *  实现用户预览画作,清除画布

##### 2、案例目录结构 #####

![案例目录结构][y7N20rb62PdpaDQ5bAw.png]

#### 二、程序实现具体步骤 ####

##### 1.index.wxml代码 #####

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

#### 三、案例运行效果图 ####

![GDxKnv1NhQRULBXpOJZ.gif][]

#### 四、总结与备注 ####

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

> 代码地址如下：  
> [http://www.demodashi.com/demo/14461.html][http_www.demodashi.com_demo_14461.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14461.html]: http://www.demodashi.com/demo/14461.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[y7N20rb62PdpaDQ5bAw.png]: /images/20220310/9a6cd881d2bb4ceb8361efab62e8753a.png
[GDxKnv1NhQRULBXpOJZ.gif]: /images/20220310/d394b9c6cac94b9ca6e6707e423eaf7e.png