MorphSVGPlugin.stringToRawPath
MorphSVGPlugin.stringToRawPath( data:String ) : RawPath
接收一串路径数据字符串(例如"M0,0 C100,20 300,50 400,0..."
,这是通常出现在d
属性中的内容)<path>
)中的内容,进行解析,将其转换为三次贝塞尔曲线,并作为 RawPath 返回,该 RawPath 只是一个数组,其中每个子数组对应一个片段(每个M
命令开始一个新的片段)。
参数
数据:字符串
一个路径数据字符串,这通常是元素中找到的内容。
d
属性中的内容)<path>
元素。例如:"M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100"
.
返回:RawPath
给定字符串的 RawPath,例如
[
[0, 0, 10, 20, 15, 30, 5, 18],
[0, 100, 50, 120, 80, 110, 100, 100],
];
细节
将类似这样的路径字符串转换为"M0,0 C100,20 300,50 400,0..."
(这通常是在d
属性中的内容)<path>
)转换成RawPath.
A RawPath本质上是一个数组,其中包含每个连续段的数组,每个段内部交替存储 x、y、x、y 的三次贝塞尔曲线数据。它类似于 SVG<path>
其中每个M
命令对应一个段(数组)。该段(数组)以交替的 x/y 格式包含所有三次贝塞尔坐标(与 SVG 路径数据一样),使用原始的数字形式,好处是你不需要解析长字符串并进行转换。
例如,这个 SVG<path>
包含两个独立的段,因为有两个 "M" 命令:
<path d="M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100" />
生成的 RawPath 将是:
[
[0, 0, 10, 20, 15, 30, 5, 18],
[0, 100, 50, 120, 80, 110, 100, 100],
];
为了简化,上面的例子在每个段中只包含了一个三次贝塞尔曲线,但事实上每个段中可以包含无限数量的贝塞尔曲线。无论原始<path>
数据字符串中包含什么路径命令(三次、二次、弧线、直线等),最终生成的 RawPath始终都是三次贝塞尔曲线。
同样还有一个对应的MorphSVGPlugin.rawPathToString()
方法,以便你可以在两者之间互相转换。