微信小程序-基于canvas画画涂鸦
一、前期准备工作
软件环境：微信开发者工具
官方下载地址：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画画涂鸦
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权
