Skip to main content

getInstructionIndexAtLength()

属于@remotion/paths包。

从v4.0.84版本开始可用。

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

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

示例
tsx
import { getInstructionIndexAtLength } from "@remotion/paths";
 
const { index, lengthIntoInstruction } = getInstructionIndexAtLength(
  "M 0 0 L 100 0 L 200 0",
  105,
);
console.log(index); // 1
console.log(lengthIntoInstruction); // 5
示例
tsx
import { getInstructionIndexAtLength } from "@remotion/paths";
 
const { index, lengthIntoInstruction } = getInstructionIndexAtLength(
  "M 0 0 L 100 0 L 200 0",
  105,
);
console.log(index); // 1
console.log(lengthIntoInstruction); // 5

要获取特定索引处的指令，可以使用parsePath()：

获取指令
tsx
import { getInstructionIndexAtLength, parsePath } from "@remotion/paths";
 
const path = "M 0 0 L 100 0 L 200 0";
const { index } = getInstructionIndexAtLength(path, 105);
 
const parsed = parsePath(path);
const instruction = parsed[index]; // {type: 'L', x: 100, y: 0}
获取指令
tsx
import { getInstructionIndexAtLength, parsePath } from "@remotion/paths";
 
const path = "M 0 0 L 100 0 L 200 0";
const { index } = getInstructionIndexAtLength(path, 105);
 
const parsed = parsePath(path);
const instruction = parsed[index]; // {type: 'L', x: 100, y: 0}

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

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

如果采样长度大于路径的长度，该函数将抛出异常：

tsx
getInstructionIndexAtLength("M 0 0 L 100 0", 105); // Error: A length of 105 was passed to getInstructionIndexAtLength() but the total length of the path is only 100;
tsx
getInstructionIndexAtLength("M 0 0 L 100 0", 105); // Error: A length of 105 was passed to getInstructionIndexAtLength() but the total length of the path is only 100;

Credits​

此函数改编自svg-path-properties。

另请参阅​