Skip to main content

cutPath()

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

🌐 Part of the @remotion/paths package.

在指定长度处切割 SVG 路径,返回从起点到该长度的部分。

🌐 Cuts an SVG path at a specified length, returning the portion from the start to that length.

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

const path = "M 0 0 L 100 0 L 100 100";
const cutAtLength = cutPath(path, 50);
console.log(cutAtLength); // "M 0 0 L 50 0"

参数

🌐 Arguments

d

string

一个有效的 SVG 路径属性。例如:

🌐 A valid SVG path property. For example:

M 0 0 L 100 0 L 100 100 L 0 100 Z

length

number

要切割路径的长度。如果长度大于路径总长度,将返回整个路径。如果长度为0,则仅返回初始的移动命令。

🌐 The length at which to cut the path. If the length is greater than the total path length, the entire path is returned. If the length is 0, only the initial move command is returned.

返回值

🌐 Return value

一个表示从起点到指定长度的切割路径的字符串。

🌐 A string representing the cut path from the start to the specified length.

示例

🌐 Examples

切一条简单的线

🌐 Cutting a simple line

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

const simpleLine = "M 0 0 L 100 0";
const halfLine = cutPath(simpleLine, 50);
console.log(halfLine); // "M 0 0 L 50 0"

开一条弯曲的路

🌐 Cutting a path with curves

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

const curvePath = "M 0 0 C 50 0 50 50 100 50";
const cutCurve = cutPath(curvePath, 30);
console.log(cutCurve); // "M 0 0 C 30 0 30 15 60 15" (approximate)

处理边界情况

🌐 Handling edge cases

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

const path = "M 0 0 L 100 0";

// Length greater than path length
const fullPath = cutPath(path, 200);
console.log(fullPath); // "M 0 0 L 100 0"

// Zero length
const startOnly = cutPath(path, 0);
console.log(startOnly); // "M 0 0"

另请参阅

🌐 See also