微信小程序实现的涂鸦功能示例【附源码下载】
程序员文章站
2022-09-02 14:11:31
本文实例讲述了微信小程序实现的涂鸦功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
布局文件index.wxml:
本文实例讲述了微信小程序实现的涂鸦功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
布局文件index.wxml:
<view class="container"> <!--画布区域--> <view class="canvas_area"> <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作--> <canvas canvas-id="mycanvas" class="mycanvas" disable-scroll="false" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"> </canvas> </view> <!--画布工具区域--> <view class="canvas_tools"> <view class="box box1" bindtap="penselect" data-param="5"></view> <view class="box box2" bindtap="penselect" data-param="15"></view> <view class="box box3" bindtap="colorselect" data-param="#cc0033"></view> <view class="box box4" bindtap="colorselect" data-param="#ff9900"></view> <view class="box box5" bindtap="clearcanvas"></view> </view> </view>
逻辑功能文件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跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/> 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; } })
附:完整实例代码点击此处。
希望本文所述对大家微信小程序开发有所帮助。
上一篇: 神奇的白开水作用,白开水醒酒吗?
下一篇: Vue中实现权限控制的方法示例