Skip to main content

getPointAtLength()

属于@remotion/paths包。

获取位于SVG路径上的点的坐标。 第一个参数是SVG路径，第二个参数是应该采样点的长度。它必须介于0和getLength()的返回值之间。

如果路径有效，则返回一个包含x和y的对象：

tsx
import { getPointAtLength } from "@remotion/paths";
 
const point = getPointAtLength("M 0 0 L 100 0", 50);
console.log(point); // { x: 50, y: 0 }
tsx
import { getPointAtLength } from "@remotion/paths";
 
const point = getPointAtLength("M 0 0 L 100 0", 50);
console.log(point); // { x: 50, y: 0 }

如果路径无效，则函数会抛出异常：

tsx
getPointAtLength("remotion", 50); // Error: Malformed path data: ...
tsx
getPointAtLength("remotion", 50); // Error: Malformed path data: ...

示例：获取路径中点的中间点​

使用getLength()获取路径的总长度，然后将其乘以介于0和1之间的数字以获取路径上的任意点。例如，length * 0.5以获取路径中点的坐标。

tsx
import { getLength, getPointAtLength } from "@remotion/paths";
 
const path = "M 0 0 L 100 0";
const length = getLength(path);
const point = getPointAtLength(path, length * 0.5);
 
console.log(point); // { x: 50, y: 0 }
tsx
import { getLength, getPointAtLength } from "@remotion/paths";
 
const path = "M 0 0 L 100 0";
const length = getLength(path);
const point = getPointAtLength(path, length * 0.5);
 
console.log(point); // { x: 50, y: 0 }

鸣谢​

源代码主要来自svg-path-properties。

另请参阅​