介绍 & lt; view 类=癱ontainer"比;
& lt;才能!——画布区域——比;
& lt;才能view 类=癱anvas_area"比;
,,,& lt; !——注意:同一页面中的,canvas-id 不可重复,如果使用一个已经出现过的,canvas-id,该,canvas 标签对应的画布将被隐藏并不再正常工作——比;
,,,& lt; canvas canvas-id=癿yCanvas",类=癿yCanvas"
,,,,,disable-scroll=癴alse"
,,,,,bindtouchstart=皌ouchStart"
,,,,,bindtouchmove=皌ouchMove"
,,,,,bindtouchend=皌ouchEnd"比;
,,,& lt;/canvas>
& lt;才能/view>
& lt;才能!——画布工具区域——比;
& lt;才能view 类=癱anvas_tools"比;
,,,& lt; view 类=癰ox box1", bindtap=皃enSelect", data-param=?“祝辞& lt;/view>
,,,& lt; view 类=癰ox box2", bindtap=皃enSelect", data-param=?5“祝辞& lt;/view>
,,,& lt; view 类=癰ox box3", bindtap=癱olorSelect", data-param=? cc0033"祝辞& lt;/view>
,,,& lt; view 类=癰ox box4", bindtap=癱olorSelect", data-param=? ff9900"祝辞& lt;/view>
,,,& lt; view 类=癰ox box5", bindtap=癱learCanvas"祝辞& lt;/view>
& lt;才能/view>
& lt;/view> 页面({
,数据:{
:pen 才能;3,,//画笔粗细默认值
color 才能:& # 39;# cc0033& # 39;,//画笔颜色默认值
},
,startX: 0,,//保存X坐标轴变量
,startY: 0,,//保存X坐标轴变量
,isClear :假的,,//是否启用橡皮擦标记
,//手指触摸动作开始
,touchStart: function (e), {
,,//得到触摸点的坐标
,,this.startX =, e.changedTouches[0]以下方式
,,this.startY =, e.changedTouches [0] .y
,,this.context =, wx.createContext ()
,,如果(this.isClear){,//判断是否启用的橡皮擦功能,真正的表示清除,假表示画的画
,,,,this.context.setStrokeStyle (& # 39; # F8F8F8& # 39;),//设置线条样式,此处设置为画布的背景颜色,橡皮擦原理就是:利用擦过的地方被填充为画布的背景颜色一致,从而达到橡皮擦的效果,
,,,,this.context.setLineCap(& # 39;轮# 39;),//设置线条端点的样式
,,,,this.context.setLineJoin(& # 39;轮# 39;),//设置两线相交处的样式
,,,,this.context.setLineWidth(20),//设置线条宽度
,,,,this.context.save();,//保存当前坐标轴的缩放,旋转,平移信息
,,,,this.context.beginPath(),//开始一个路径,
,,,,this.context.arc (this.startX this.startY 5 0 2 * Math.PI,真的),,//添加一个弧形路径到当前路径,顺时针绘制,这里总共画了360度,也就是一个圆形,
,,,,this.context.fill();,//对当前路径进行填充
,,,,this.context.restore();,//恢复之前保存过的坐标轴的缩放,旋转,平移信息
其他,,}{
,,,,this.context.setStrokeStyle (this.data.color)
,,,,this.context.setLineWidth (this.data.pen)
,,,,this.context.setLineCap(& # 39;轮# 39;),//,让线条圆润,
,,,,this.context.beginPath ()
,,}
},
,//手指触摸后移动
,touchMove: function (e), {
,,var startX1 =, e.changedTouches[0]以下方式
,,var startY1 =, e.changedTouches [0] .y
,,如果(this.isClear){,//判断是否启用的橡皮擦功能,真正的表示清除,假表示画的画
,,,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;
其他,,}{
,,,this.context.moveTo (this.startX, this.startY)
,,,this.context.lineTo (startX1, startY1)
,,,this.context.stroke ()
,,,this.startX =, startX1;
,,,this.startY =, startY1;
,,}
,,//只是一个记录方法调用的容器,用于生成记录绘制行为的操作数组.context跟& lt;帆布/祝辞不存在对应关系,一个上下文生成画布的绘制动作数组可以应用于多个& lt;帆布/比;
,,wx.drawCanvas ({
,,,,canvasId:, & # 39; myCanvas& # 39;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关怎么在微信小程序中实现一个涂鸦功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
布局文件索引。wxml:
逻辑功能文件索引。js:
