我需要将仅由直线段组成的路径分解为角点数组。
我的输入看起来像这样：
M447,390h-24l26.77686,-18.11376c0.40304,3.41283 0.66687,6.74013 0.77624,9.94164z
或像这样的图形：
我设法通过parse-svg-path将d属性转换为一系列命令，结果是：
[
["M", 447, 390],
["h", -24],
["l", 26.77686, -18.11376],
["c", 0.40304, 3.41283, 0.66687, 6.74013, 0.77624, 9.94164],
["z"]
]
如何将其转换为一系列4个角点坐标？
最佳答案
您可以将此["M", 447, 390]转换为{x:447,y:390}
您可以将此["h", -24]转换为{x:447-24,y:390}。
说明：h是一条水平线。由于命令是小写字母，因此坐标是相对于上一个点的相对坐标，并且由于它是一条水平线，因此y坐标与最后一个点的y相同
您可以将此["l", 26.77686, -18.11376]转换为{x:447-24+26.77686,y:390-18.11376}
说明：l是一条线，由于命令是小写字母，因此坐标是相对于上一点的相对坐标
这是：["c", 0.40304, 3.41283, 0.66687, 6.74013, 0.77624, 9.94164]是三次贝塞尔曲线，但是如果您只需要一点，您可以使用最后两位数字，并且该点是：{x:447-24+26.77686+0.77624,y:390-18.11376+9.94164}
完全像以前一样，c是小写命令，并且坐标是相对于上一点的相对位置
此["z"]告诉您路径已关闭，您可以再次使用第一个点{x:447,y:390}
这是一个示例，其中我使用这些点绘制了小圆圈：
<svg viewBox="421 371 31 20" width="300">
<path d="M447,390h-24l26.77686,-18.11376c0.40304,3.41283 0.66687,6.74013 0.77624,9.94164z" />
<circle fill="red" cx="447" cy="390" r=".5" />
<circle fill="red" cx="423" cy="390" r=".5" />
<circle fill="red" cx="449.77686" cy="371.88624" r=".5" />
<circle fill="red" cx="450.5531" cy="381.82788" r=".5" />
</svg>关于javascript - 在SVG路径中查找 Angular 点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57493512/