Skip to main content

getPointAtLength()

属于@remotion/paths包。

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

如果路径有效,则返回一个包含xy的对象:

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

另请参阅