编辑:答案(感谢@musically_ut提供getPointAtLength,但似乎我必须自己做真正的工作。注意:“draw.circle”语法来自svg.js)
- 使用
.attr({id: "mypath"});
将您自己的ID添加到路径中。 找到它:
var a = document.getElementById("IdOfSvgCurve");
在曲线上画几个圆。坐标必须相对于起点。
var pt_start = a.getPointAtLength(0);
for (var i = 0; i < len; i++) { var pt = a.getPointAtLength(i*10); var c = draw.circle(7) .fill({ color: "green" }) .move(pt.x - pt_start.x, pt.y - pt_start.y); }
原始问题:
假设我有一个SVG曲线,可能是贝塞尔曲线或椭圆形
<path id="SvgjsPath1044" d="M 125,75 a100,50 0 0,0 100,50"/>
如何在曲线上直接放置点? 类似于这个:
可以使用像pathLength这样的东西,使用"坐标系",也可以通过实际计算位于曲线上的点并添加它们的坐标来实现。
这主要是为了说明,因此我不一定需要一个通用的解决方案。
我正在使用svg.js库,但可以原生地完成此部分。
谢谢!
intersection
方法,可以找到两条路径的交点。您可以创建临时垂直线路径,计算交点,在这些交点处添加点,并删除垂直线。 - sbking