评论

小程序/web端实现画板功能,项目记录,如果能帮到各位点个 thumb

这篇文章主要是实现canvas的一些简单绘制。帮助新手或者有需求的朋友渡坑。

大家好,这是小汪在社区发表的第一篇文章。主要是实现小程序实现画板功能(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

非常感谢各位姥爷能看到这里。如果这篇文章对你有所帮助,希望不要吝啬那几秒钟的时间点个赞吧。没帮助也看到这里,也给整一个? 哈哈 开个玩笑 老爷们随意。但是小汪期望与各位大佬多交流 嘿嘿。下次再见

注:转载请注明出处!

最后一次编辑于  2021-06-26  
点赞 6
收藏
评论

1 个评论

  • 王路遥
    王路遥
    2021-10-08

    这个圆的路径是不是有点不大对劲

    2021-10-08
    赞同 1
    回复 3
    • 九玖·
      九玖·
      2021-10-08
      确实,当时写出来没想这么多,后来发现了,还是需要采用一下公式套一下。
      贴了一下修改后的代码,
      2021-10-08
      1
      回复
    • 王路遥
      王路遥
      2021-10-08回复九玖·
      雀食,用公式套一下就可以获得手指准确的位置(半径大小)  以这个在画就是准的了
      2021-10-08
      回复
    • 九玖·
      九玖·
      2021-10-08回复王路遥
      哈哈 是的 感谢指出问题
      2021-10-08
      回复
登录 后发表内容