微信小程序-基于canvas画画涂鸦
2023-09-11 14:18:01 时间
一、前期准备工作
软件环境:微信开发者工具
官方下载地址: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大师代发,拒绝转载,转载需要作者授权
相关文章
- 微信小程序 - 自定义弹窗组件
- 微信小程序 - 自定义components组件详解A篇
- 微信小程序 - 替换tabbar(采用固定定位形式)
- 微信小程序中<view>中的CSS样式合集
- 【微信小程序】-- 分包 - 独立分包 & 分包预下载(四十五)
- 【微信小程序】-- 网络数据请求(十九)
- 【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
- 一个微信群的现状
- 微信开发(微信公众号)
- 微信小程序 - 每隔一段时间请求后端接口获取最新数据,页面每隔一段时间就触发一个函数(实时刷新数据,页面每隔 N 秒自动请求接口数据)让页面每隔一段时间就请求一次接口,详细示例教程可运行示例
- 微信小程序 - input 实现双向数据绑定(实时更新数据变化)
- 《微信小程序:开发入门及案例详解》—— 2.5 模块化
- 微信小程序如何调用API实现数据请求-wx.request()
- 微信小程序wxss的background本地图片问题
- 微信小程序阿里云服务器https搭建
- 微信 小程序 unionId
- 微信小程序 功能函数 定时震动
- 微信小程序之日期与时间插件
- 《移动App测试的22条军规》—App测试综合案例分析23.22节实现微信App的持续集成和持续部署
- Android应用加入微信分享
- 微信小程序独家秘笈之抽奖大转盘
- 微信小程序基于scroll-view实现锚点定位
- 基于spring-boot的社区社交微信小程序,适合做脚手架、二次开发
- 基于olami开放语义平台的微信小程序遥知之源码实现
- 微信小程序~性能
- 基于Python实现的微信小程序校园导航系统 | Python第一课环境篇 | Hellow World 程序 | 不同环境下搭建Python编程环境
- 微信小程序之回调函数
- Fundebug微信小程序BUG监控服务支持Source Map
- 微信小程序 | 微信公众平台SpringBoot开发实例 │ 表情消息
- 微信小程序
- 在微信小程序上做一个「博客园年度总结」:解决前端获取接口数据太慢的一种思路
- 开发一个微信小程序(8):查询天气-获取用户所在位置,查询当前城市天气