登录

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

小程序 置顶
1 288

一,概述

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

软件环境:

    微信开发者工具官方下载地址:HTTPS://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1,基本需求。实现用户自定画笔大小

    实现用户自定色彩

    实现用户动画撤回之前的操作

    实现生成分享海报

    实现用户预览画作清除画布

二,程序实现步骤

1.前端页面的代码

class="option-panel">
    
 

2.样式代码

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.业务逻辑代码

    一个).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);
    }
  })
}

原文链接地址:http//www.demodashi.com/user/yv8x8B7DJdVYrvFaC4t.html



发表评论

1 个回复

admin

admin

148 2017-05-15 加入 上海市

(爱上网,爱学习,但是不搞基.)

扫一扫,有惊喜 ↓