5

SVG Path要素のd属性を解析しようとしていますが、これまでのところ、fabric.jsがSVGを解析できることがわかりましたが、今のところ、その方法がわかりません。

パス内の形状（線の円弧）を取得してその上に正方形を描画するためにパスを解析する必要があります。最も重要なのは、これらの正方形の属性を返すことです。

これをfabric.jsを使用して行う方法はありますか？または他のライブラリ?? または誰かが別のアプローチを持っていますか？

次の画像には長方形があり、線には両方とも境界に描いた正方形があり、パス要素でも同じことをしようとしています。長方形と境界線

4

4 に答える 4

4

私はこれを見つけました

var cmdRegEx = /[a-z][^a-z]*/ig;
var commands = d.match(cmdRegEx);

これは、各コマンドとそのパラメーターを取得できますが、スペースから各コマンドをトリミングする必要があります

于 2012-02-27T20:05:23.010 に答える
3

zeacussの回答とMarkKCowanの提案に基づいて、私は以下を使用しています。

var cmdRegEx = /([MLQTCSAZVH])([^MLQTCSAZVH]*)/gi
var commands = d.match(cmdRegEx);
于 2016-12-09T16:52:28.213 に答える
2

同じ問題に刻印されています。regep /-？\ d + / igを使用して、文字や空白からストライプされた数字だけを生成できます。とコンマ。

于 2012-03-25T01:02:16.893 に答える
0

Pythonのsvgpathtoolsライブラリは、ニーズに役立つ場合があります。これはその機能のリストです（ドキュメントから）：

含まれているツール：

read, write, and display SVG files containing Path (and other) SVG elements
convert Bézier path segments to numpy.poly1d (polynomial) objects
convert polynomials (in standard form) to their Bézier form
compute tangent vectors and (right-hand rule) normal vectors
compute curvature
break discontinuous paths into their continuous subpaths.
efficiently compute intersections between paths and/or segments
find a bounding box for a path or segment
reverse segment/path orientation
crop and split paths and segments
smooth paths (i.e. smooth away kinks to make paths differentiable)
transition maps from path domain to segment domain and back (T2t and t2T)
compute area enclosed by a closed path
compute arc length
compute inverse arc length
convert RGB color tuples to hexadecimal color strings and back
于 2017-02-23T13:22:08.687 に答える