微信小程序如何实现涂鸦

本文实例讲述了微信小程序实现的涂鸦功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

布局文件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;
 }
})

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

有关jquery自动加载数据的方法

有关ajax在jquery中的请求（详细教程）

在JavaScript中有关EventLoop问题

在element中有关vue表单验证问题

vue2.x中图片放大镜插件如何使用？