在Raphael中画出Bezier路径的一半

Question

在Raphael中画出Bezier路径的一半

5

假设我有一个立方贝塞尔曲线路径，如下所示（格式化为与Raphael路径函数一起使用）：

M55 246S55 247 55 248

这只是一个例子。这是从我的绘图应用程序中提取的，我在其中使用光标在用户按住鼠标按钮时绘制一条线，类似于铅笔或记号笔。我使用jquery的mousemove事件在用户移动鼠标时在两个点之间绘制线条。还有另一个（参考点），在绘制线条之前被取出，以便可以创建贝塞尔曲线。

我的问题是：是否可能使Raphael仅绘制给定路径的一半？我知道getSubpath（）函数，但如果我对贝塞尔曲线的理解正确，计算第二个参数将相当困难。 animate函数的问题是它会创建双重线条（也就是说，它创建了我想要的曲线和不应该显示的角形线框线，可能是因为鼠标移动得比动画处理快）。

当然，如果我的方法本身有缺陷（或者我对可能的解决方案的理解有误），我希望听到它。任何帮助都将不胜感激。

- Fibericon

“Half”是什么意思？你想画哪一半？ - Gabe

我想要绘制贝塞尔曲线的前半部分（从鼠标移动开始到曲线中点）。这样做的理由是为了消除如果仅从一个光标位置绘制直线时不可避免出现的边缘。 - Fibericon

3个回答

1

可以计算中点，但不知道 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 您可以轻松计算中心点。

- Jan Vladimir Mostert

我一直在测试这个，但使用CurveTo似乎会加剧我遇到的双线问题。 - Fibericon

你有双线截图吗？ - Jan Vladimir Mostert

-1

将贝塞尔曲线分成两半只需要一点数学知识，不算太难。您可以参考raphaël的路径扩展，并且在那里添加一个方法来完成分割应该很简单。

"只是一点数学知识"部分可以使用De Castelau's algorithm在任意给定点处分割曲线。

- Erik Dahlström

1

将贝塞尔曲线平分只是一点数学，不算太难。我认为他的问题围绕着这个，而“不算太难”无法回答他的问题。也许你可以更具体些？ - Beaker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Beaker · Accepted Answer

虽然有点凌乱，但也许这可以回答你的问题：

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);

说实话，这样做效率相当低。但是，我想不到更好的方法。你不能仅仅抓住切线并除以二，因为贝塞尔曲线的长度比切线长（就像乌鸦飞过去一样）。这意味着你必须通过 Raphael 处理该线，并获取一半长度的子路径。