本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下:
先来看看运行效果:
布局文件 index.wxml:
逻辑功能文件 index.js:
<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>
附:完整实例代码点击此处 本站下载 .
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;
}
})
希望本文所述对大家微信小程序开发有所帮助.
您可能感兴趣的文章:
微信小程序 二维码 canvas 绘制实例详解
JS 绘制微信小程序画布时钟
微信小程序 绘图之饼图实现
微信小程序 小程序制作及动画(animation 样式)详解
微信小程序的动画效果详解
微信小程序 连续旋转动画(this.animation.rotate)详解
微信小程序实现登录页云层漂浮的动画效果
微信小程序开发之 animation 循环动画实现的让云朵飘效果
微信小程序开发 animation 心跳动画效果
微信小程序开发之麦克风动画 帧动画 放大 淡出
微信小程序 动画的简单实例
来源: http://www.jb51.net/article/132771.htm