getPointAtLength()
属于@remotion/paths
包。
获取位于SVG路径上的点的坐标。
第一个参数是SVG路径,第二个参数是应该采样点的长度。它必须介于0
和getLength()
的返回值之间。
如果路径有效,则返回一个包含x
和y
的对象:
tsx
import {getPointAtLength } from "@remotion/paths";constpoint =getPointAtLength ("M 0 0 L 100 0", 50);console .log (point ); // { x: 50, y: 0 }
tsx
import {getPointAtLength } from "@remotion/paths";constpoint =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";constpath = "M 0 0 L 100 0";constlength =getLength (path );constpoint =getPointAtLength (path ,length * 0.5);console .log (point ); // { x: 50, y: 0 }
tsx
import {getLength ,getPointAtLength } from "@remotion/paths";constpath = "M 0 0 L 100 0";constlength =getLength (path );constpoint =getPointAtLength (path ,length * 0.5);console .log (point ); // { x: 50, y: 0 }
鸣谢
源代码主要来自svg-path-properties。