Skip to main content

getPointAtLength()

属于 @remotion/paths 软件包的一部分.

🌐 Part of the @remotion/paths package.

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

🌐 Gets the coordinates of a point which is on an SVG path. The first argument is an SVG path, the second one is the length at which the point should be sampled. It must be between 0 and the return value of getLength().

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

🌐 An object containing x and y is returned if the path is valid:

import { getPointAtLength } from "@remotion/paths";

const point = getPointAtLength("M 0 0 L 100 0", 50);
console.log(point); // { x: 50, y: 0 }

如果路径无效，该函数将抛出异常：

🌐 The function will throw if the path is invalid:

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

示例：获取路径的中点​

🌐 Example: Getting the middle point of a path

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

🌐 Use getLength() to get the total length of a path and then multiply it with a number between 0 and 1 to get any point on the path. For example, length * 0.5 to get the coordinates in the middle of the path.

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 }

鸣谢​

🌐 Credits

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

🌐 Source code stems mostly from svg-path-properties.

另请参阅​

🌐 See also

Last updated on