繁体   English   中英

在拉斐尔画一半Bezier路径

[英]Drawing half of a Bezier path in Raphael

假设我有一个如下的三次Bezier路径(格式化用于Raphael路径函数):

M55 246S55 247 55 248

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

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

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

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

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

中间点可以计算,不知道Raphael中的任何功能会为你减少一半的bezier。

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

M => MoveTo绝对位置55,24 S => Smooth Curve到绝对值55,247 55,248

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

将贝塞尔曲线分成两半只是一点数学,没什么太难的。 raphaël路径扩展可能会对你有帮助,在那里添加一个方法进行拆分应该非常简单。

“只是一点数学”部分可以例如使用De Castelau的算法在任何给定点分割曲线。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM