跳过主要内容

MotionPathPlugin.getRawPath

MotionPathPlugin.getRawPath( value:String | Element ) : RawPath (Array)

获取所提供的元素或原始 SVG <path> 数据的 RawPath (Array)。RawPath 实质上是一个包含多个数组的数组,每个连续的线段对应一个子数组,其中交替存储着 x、y、x、y 的三次贝塞尔曲线数据。

参数

  • : 字符串 | 元素

    选择器文本、元素引用或从中获取 RawPath 数组的原始 SVG <path> 数据。例如 "#path"、myPath 或 "M9,100c0,0,18-41,49-65"。

细节

获取所提供元素或原始 SVG 的 RawPath(数组)。<path>数据。

什么是 RawPath?

RawPath 实质上是一个数组,其中包含一个用于每个连续线段的数组,并且该数组具有交替的 x、y、x、y 的三次贝塞尔曲线数据。它类似于 SVG。<path>每个“M”命令对应一个线段(数组)。这个线段(数组)以交替的 x/y 格式包含所有三次贝塞尔坐标点(就像 SVG 路径数据一样),并且是以原始数值形式表示的,这样做的好处是你不需要解析长字符串并进行转换。

例如,这个 SVG<path>具有两个独立的线段,因为存在两个“M”命令,下面是对应的 RawPath 数组:

// original path (notice there are two "M" commands):
(<path d="M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100" /)[
// resulting RawPath Array:
([0, 0, 10, 20, 15, 30, 5, 18], [0, 100, 50, 120, 80, 110, 100, 100])
];

为了简化,上面的例子在每个段中只包含了一个三次贝塞尔曲线,但事实上每个段中可以包含无限数量的贝塞尔曲线。无论原始<path>数据字符串中包含什么路径命令(三次、二次、弧线、直线等),最终生成的 RawPath始终都是三次贝塞尔曲线。

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗