admin管理员组文章数量:1245200
I need a function or plugin that converts path mands for an SVG path to polygonal points.
I found one :
The problem here is it does not support arcs and curves like A and C.
let pathData = 'M5,15 c5.5,0 10-4.5 10,-10 h10';
let points = pathDataToPolys(pathData, {tolerance:1, decimals:1});
console.log(points);
/*******************************************************************
[
[ [5,15],[7,14.8],[10.6,13.3],[13.3,10.6],[14.8,7],[15,5],[25,5] ]
]
I need a function or plugin that converts path mands for an SVG path to polygonal points.
I found one : https://github./Phrogz/svg-path-to-polygons
The problem here is it does not support arcs and curves like A and C.
let pathData = 'M5,15 c5.5,0 10-4.5 10,-10 h10';
let points = pathDataToPolys(pathData, {tolerance:1, decimals:1});
console.log(points);
/*******************************************************************
[
[ [5,15],[7,14.8],[10.6,13.3],[13.3,10.6],[14.8,7],[15,5],[25,5] ]
]
I have path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'. I need this to be converted to polygon points.
Any help or suggestions highly appreciated.
Share Improve this question edited Nov 20, 2018 at 13:28 user10519853 asked Nov 20, 2018 at 13:22 user10519853user10519853 1551 gold badge1 silver badge10 bronze badges 6- Here's some alternate JS to try: gist.github./alexjlockwood/c037140879806fb4d9820b7e70195494 – Paul LeBeau Commented Nov 20, 2018 at 14:02
- Just to be sure, you do realize that polygons don't support curves, right? If so, you are looking for something that will convert a curve into a series of short lines? – Ted Commented Nov 20, 2018 at 15:28
- I use Three.js for that – Stranger in the Q Commented Nov 20, 2018 at 16:20
- @PaulLeBeau I think its for converting shapes to paths ?? – user10519853 Commented Nov 21, 2018 at 5:22
- 1 Is there nothing as such to convert path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'. I need this to be converted to polygon points. – user10519853 Commented Nov 21, 2018 at 6:24
1 Answer
Reset to default 13I think there is some confusion because it is not clear what sort of conversion you are looking for. There are two solutions with different levels of difficulty.
Flattening. Flattening is a term used by 2D renderers for a step in the process of rendering. The flattening algorithm is adaptive. It will space the polygon points closer together when the path has a high curvature. And it will use fewer points when the path is straighter.
Simple conversion. You can just step along the curve at regular intervals and sample the path location at each step.
The example code and output, you provide in your question, makes it look like you want the Flattening type.
However, if you are not fussy, then option 2 is really easy. SVG includes an API designed for this task.
var NUM_POINTS = 6;
var path = document.getElementById("test");
var len = path.getTotalLength();
var points = [];
for (var i=0; i < NUM_POINTS; i++) {
var pt = path.getPointAtLength(i * len / (NUM_POINTS-1));
points.push([pt.x, pt.y]);
}
console.log("points = ", points);
<svg>
<path id="test" d="M5,15 c5.5,0 10-4.5 10,-10 h10"/>
</svg>
本文标签: javascriptConvert SVG path to polygon coordinatesStack Overflow
版权声明:本文标题:javascript - Convert SVG path to polygon coordinates - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1740188763a2238704.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论