在 Raphael 中绘制一半的 Bezier 路径

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 处理该行，然后获得一半长度的子路径。

Answer 2

可以计算中间点，不知道 Raphael 中的任何功能会为您将贝塞尔曲线减半。

从这些命令的外观来看，它是标准的 SVG 标记（请参阅 SVG 规范以更好地理解它：http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands）

M=> 移动到绝对位置 55,24 S=> 平滑曲线到绝对值 55,247 55,248

如果您愿意，可以将平滑曲线重写为标准 CurveTo 或 C，S 只是它的简写，curveto / C 可以轻松计算中心点。

Answer 3

将贝塞尔曲线一分为二只是一些数学运算，没什么难的。 path extensions for raphaël 可能会帮助您，并且在那里添加一个方法来进行拆分应该非常简单。

“只是一点点数学”部分可以使用 De Castelau's algorithm 在任何给定点分割曲线。