canvas画布曲线（贝塞尔曲线）优化

weixin_46465090

已于 2024-11-11 14:54:04 修改

阅读量439

点赞数 1

分类专栏：小程序 canvas 案例文章标签： canvas js

于 2021-07-02 14:47:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46465090/article/details/118412971

版权

本文探讨了在canvas上绘制贝塞尔曲线时遇到的问题，原有的实现方式未能提供直观的用户体验。作者提出了一种改进方案，允许用户通过拖拽来确定曲线的控制点，从而动态计算出相切的贝塞尔曲线。在用户开始触摸时记录起点，拖拽过程中收集触点位置，并在结束触摸时使用这些数据计算并绘制曲线。虽然存在一些显示偏差，但这种优化提高了用户在画板上绘制曲线的交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇文章小汪写到用canvas实现画板的功能，但是思前想后在曲线上有一定的问题，点我去看上篇canvas画板。由于我把自己代入了角色，但作为用户的感官不应该是这样子的。
二次贝塞尔曲线canvas手册在描述中讲出：
在这里插入图片描述
也就是需要得到起始点，控制点，结束点，从而自动绘制出相切切角的曲线。
而小汪在上篇的案例中实际效果为：

也就是说用户在一开始可能并不知道这是贝塞尔曲线，即便给出相应点位也应该把操作点2通过计算改变位置才对。
所以我做出了修改，改成用户拖拽画贝塞尔曲线。
思路：起始点在用户手指/鼠标点击时记录，在拖拽的过程中记录“touchmove”事件的返回位置并存入一个全局数组中。在用户结束触摸是正式绘制。
理论语法为：

this.ctx.moveTo(x1, y1); //起始点
this.ctx.quadraticCurveTo(x2, y2, x3, y3); //操作点与结束点
this.ctx.stroke();//封闭路径进行绘制

x1,y1 点位我们在触摸时获得，x3,y3 点位我们在结束触摸时获得，重点讲x2,y2 获得方式；
x2,y2 由于我们在拖拽的过程中向全局的一个数组存入鼠标/手指移动的位置，然后我们取数组的中间那一个为操作点，然后计算出绘制这条曲线的实际操作点为：(这里贴出代码片段，提供思路)

        setMoveTo() {
   
            this.ctx.moveTo(this.sX, this.sY

最低0.47元/天解锁文章