Question

假设我有一个如下的三次Bezier路径（格式化用于Raphael路径函数）：

M55 246S55 247 55 248

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

这是我的问题：是否有可能让拉斐尔只画出一条特定路径的一半？我知道getSubpath（）函数，但如果我对Bezier曲线的理解是正确的，那么计算第二个参数就相当困难了。动画功能的问题在于它会创建双线（也就是说，它会创建我想要的曲线，以及不应该显示的围绕它的四四方向线，可能是因为鼠标的移动速度比动画可以处理的速度快）。

当然，如果我的方法本身存在缺陷（或者我对可能的解决方案的理解），我想听听。任何帮助将不胜感激。

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 =＆GT;移动到绝对位置55,24 S =＆GT;平滑曲线至绝对值55,247 55,248

如果需要，可以将平滑曲线重写为标准CurveTo或C，S只是它的简写，而曲线到/ C则可以轻松计算中心点。

Answer 3

将贝塞尔曲线分成两半只是一点数学，没什么太难的。你可能会受到path extensions for raphaël的帮助，在那里添加一个方法进行拆分应该非常简单。

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

在拉斐尔画一半Bezier路径

3 个答案: