大家好,这是小汪在社区发表的第一篇文章。主要是实现小程序实现画板功能(web端同理),下面进入正题。(只贴出小程序的代码)
这次的项目需求是给搞绘图的学生弄一个画图的功能。最终实现效果如下:
弄了一个代码片段,有兴趣的朋友可以下下来看看。(最下方↓)
功能有:画直线、二次贝塞尔曲线、自由画线、矩形、圆、撤销、恢复等功能。
不过首先声明一下,由于canvas无法对单一路径进行删除,所以无法实现在绘制矩形、圆出现实时路径。(或者说小汪太菜不会,恳请指点),
但不是毫无办法,理论上使用一个元素,实时通过样式实现此效果也是可以的,但由于原生组件的层级问题,小程序并不是那么好实现,研究过,使用cover-view理论可以实现这一效果。但实际测试就是 cover-view无法盖在canvas上,也试过很多方法,如:给cover-view设置出现延迟,放在canvas里边;都不行,但是如果不需要背景图(也就是底图)就可以盖住。所以这个问题大家自己去想解决方案吧,看看官方准备怎么解决(也可能是我自己还不会用的问题,有兴趣可以评论区讨论)。当然,代码片段中也有矩形与圆的操作案例,有兴趣可以了解一下;下面讲讲实现思路:
1.矩形:在手指/鼠标按下时记录按下点位置,在手指移动的过程中不断更新盒子的大小实现此目的。
2.圆:与矩形同理,不过在样式上有一个调整,那就是改变圆心(因为小汪写的代码是以起始点为圆心向外扩张)。
3.贝塞尔曲线的话由于要标点,所以建议给出一个小提示。然后再有cover-view 标识出点位 如:画布的 (20,20) 标记数字1 (40,40)标记数字2....
4.直线:直线的话处理起来比较麻烦,因为你在移动中绘制的话就一直保留着之前的路径,想用cover-view来弄一个显示效果还得算路径/角度 然后用css渲染,只能有时间在来补全这篇文章了。如果有大佬能搭把手那就更好啦(心中窃喜)
关于代码逻辑思路与备注 小汪在代码片段中已经写的挺详细,可以下下来观看。案例中有绘制路径点击确定保存的图片是无底图的,所以如果不考虑性能的情况下,可以使用2张画布,1张给用户做操作用,可见。一张绘制底图并保留用户在画布1绘制的内容。最后生成是以画布2为主。
使用效果图,无路径:不知道文件太大还是咋地,反正没传上去。目前就放在代码片段里吧。
使用效果图,带路径:
代码片段地址:https://developers.weixin.qq.com/s/QHGXtlmj7prF
非常感谢各位姥爷能看到这里。如果这篇文章对你有所帮助,希望不要吝啬那几秒钟的时间点个赞吧。没帮助也看到这里,也给整一个? 哈哈 开个玩笑 老爷们随意。但是小汪期望与各位大佬多交流 嘿嘿。下次再见
注:转载请注明出处!
这个圆的路径是不是有点不大对劲
贴了一下修改后的代码,
lineTo7(data) {
let x = Math.abs(data.x - this.sX),
y = Math.abs(data.y - this.sY),
r = Math.sqrt(x * x + y * y).toFixed(1) * 1;
this.ctx.beginPath(); //创建一条路径
this.ctx.arc(this.sX, this.sY, r, 0, 2 * Math.PI);
this.ctx.stroke();
},