Skip to main content

warpPath()

属于 @remotion/paths 包。从 v3.3.43 版本起可用

🌐 Part of the @remotion/paths package. Available from v3.3.43

允许你使用函数重新映射 SVG 的坐标，以创建扭曲效果。

🌐 Allows you to remap the coordinates of an SVG using a function in order to create a warp effect.

warp-path.ts
import { warpPath, WarpPathFn } from "@remotion/paths";

const fn: WarpPathFn = ({ x, y }) => ({
  x: x + Math.sin(y / 4) * 5,
  y: y,
});

const newPath = warpPath("M 0 0 L 0 100", fn); // M 0 0 L 0.970365514464549 0.78125 L 1.9038320449619508 1.5625 L 2.7649037231526368 2.34375...;

Input

Output

它是如何运作的​

🌐 How it works

此功能的工作原理是将 SVG 指令拆分为许多较小的 SVG 指令，然后重新映射每个指令的坐标。这将导致输出路径比输入路径更长。

🌐 This function works by splitting SVG instructions into many smaller SVG instructions and then remapping the coordinates of each instruction. This will result in the output being a much SVG path than the input.

参数​

🌐 Arguments

path​

一个 SVG 路径字符串。

🌐 An SVG path string.

fn​

一个函数，它接受 SVG 路径的坐标并返回新的坐标。该函数的类型是 WarpPathFn，也可以从 @remotion/paths 导入。

🌐 A function that takes the coordinates of the SVG path and returns the new coordinates. The type of the function is WarpPathFn which can also be imported from @remotion/paths.

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

const fn: WarpPathFn = ({ x, y }) => ({
  x: x + Math.sin(y / 4) * 5,
  y: y,
});

options​

interpolationThreshold​

插值算法 将递归地将 SVG 路径拆分为更小的 SVG 路径。此选项允许你指定一个段的距离，在该距离下算法应停止将路径拆分为更小的段。

🌐 The interpolation algorithm will split the SVG path recursively into smaller SVG paths. This option allows you to specify the distance of a segment at which the algorithm should stop dividing the path into smaller segments.

由于 SVG 是无单位的，阈值以 SVG 单位测量。

🌐 Since SVG is unitless, the threshold is measured in SVG units.

默认情况下，阈值是路径边界框宽度或高度的1%，取较大者。换句话说，它是 Math.max(width, height) * 0.01。

🌐 By default the threshold is the 1% width or height of the bounding box of the path, whichever is bigger. In other terms, it is Math.max(width, height) * 0.01.

鸣谢​

🌐 Credits

此功能基于 WarpJS 库，并已转换为使用 TypeScript 和纯函数式编程 API。

🌐 This function is based on the WarpJS library and has been converted to use TypeScript and a pure functional programming API.

另请参阅​

🌐 See also

Last updated on