这篇文章主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了微信小程序实现的涂鸦功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
布局文件index.wxml：
登录后复制
逻辑功能文件index.js：
Page({ data:{ pen : 3, //画笔粗细默认值 color : '#cc0033' //画笔颜色默认值 }, startX: 0, //保存X坐标轴变量 startY: 0, //保存X坐标轴变量 isClear : false, //是否启用橡皮擦标记 //手指触摸动作开始 touchStart: function (e) { //得到触摸点的坐标 this.startX = e.changedTouches[0].x this.startY = e.changedTouches[0].y this.context = wx.createContext() if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画 this.context.setStrokeStyle('#F8F8F8') //设置线条样式 此处设置为画布的背景颜色 橡皮擦原理就是：利用擦过的地方被填充为画布的背景颜色一致 从而达到橡皮擦的效果 this.context.setLineCap('round') //设置线条端点的样式 this.context.setLineJoin('round') //设置两线相交处的样式 this.context.setLineWidth(20) //设置线条宽度 this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息 this.context.beginPath() //开始一个路径 this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //添加一个弧形路径到当前路径，顺时针绘制 这里总共画了360度 也就是一个圆形 this.context.fill(); //对当前路径进行填充 this.context.restore(); //恢复之前保存过的坐标轴的缩放、旋转、平移信息 }else{ this.context.setStrokeStyle(this.data.color) this.context.setLineWidth(this.data.pen) this.context.setLineCap('round') // 让线条圆润 this.context.beginPath() } }, //手指触摸后移动 touchMove: function (e) { var startX1 = e.changedTouches[0].x var startY1 = e.changedTouches[0].y if(this.isClear){ //判断是否启用的橡皮擦功能 ture表示清除 false表示画画 this.context.save(); //保存当前坐标轴的缩放、旋转、平移信息 this.context.moveTo(this.startX,this.startY); //把路径移动到画布中的指定点，但不创建线条 this.context.lineTo(startX1,startY1); //添加一个新点，然后在画布中创建从该点到最后指定点的线条 this.context.stroke(); //对当前路径进行描边 this.context.restore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息 this.startX = startX1; this.startY = startY1; }else{ this.context.moveTo(this.startX, this.startY) this.context.lineTo(startX1, startY1) this.context.stroke() this.startX = startX1; this.startY = startY1; } //只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个 wx.drawCanvas({ canvasId: 'myCanvas', reserve: true, actions: this.context.getActions() // 获取绘图动作数组 }) }, //手指触摸动作结束 touchEnd: function () { }, //启动橡皮擦方法 clearCanvas: function(){ if(this.isClear){ this.isClear = false; }else{ this.isClear = true; } }, penSelect: function(e){ //更改画笔大小的方法 console.log(e.currentTarget); this.setData({pen:parseInt(e.currentTarget.dataset.param)}); this.isClear = false; }, colorSelect: function(e){ //更改画笔颜色的方法 console.log(e.currentTarget); this.setData({color:e.currentTarget.dataset.param}); this.isClear = false; }})
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
有关jquery自动加载数据的方法
有关jquery自动加载数据的方法
有关jquery自动加载数据的方法
有关jquery自动加载数据的方法
有关jquery自动加载数据的方法
以上就是微信小程序如何实现涂鸦的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3185256.html
