javascript - 在 Raphael 中绘制一半的贝塞尔路径

Question

假设我有一个如下所示的三次贝塞尔曲线路径(格式化为与 Raphael 路径函数一起使用):

M55 246S55 247 55 248

只是一个例子。这是从我的绘图应用程序中获取的，当用户按住鼠标按钮时，我使用光标绘制一条线，有点像铅笔或记号笔。每次用户移动鼠标时，我都使用 jquery 的 mousemove 事件在两点之间画线。在画线之前还有一个(引用点)，这样就可以创建贝塞尔曲线。

这是我的问题:是否可以让拉斐尔只画给定路径的一半？我知道 getSubpath() 函数，但如果我对贝塞尔曲线的理解是正确的，那么计算第二个参数将相当困难。 animate 函数的问题是它创建了双线(也就是说，它创建了我想要的曲线，以及它周围不应显示的四四方方的线，可能是因为鼠标移动速度快于动画可以处理的速度).

当然，如果我的方法本身在某些方面存在缺陷(或者我对可能的解决方案的理解)，我愿意听听。任何帮助将不胜感激。

Answer 1

有点乱，但也许这会回答它:

line[line.length] = paper.path(drawPath); //drawPath being the fill line length 

//get a subpath, being half the length of your bezier curve
subPath = line[line.length - 1].getSubpath(0, line[line.length - 1].getTotalLength()/2);

//remove the full-length bezier curve
line[line.length - 1].remove();

//Draw your new line
line[line.length - 1] = paper.path(subpath);

老实说，这是非常低效的。但是，我想不出更好的方法来解决它。您不能只捕获切线并除以一半，因为贝塞尔曲线会比切线的长度更长(如乌鸦飞翔)。这意味着您必须通过 rapheal 处理该行，然后获得一半长度的 subPath。