Skip to main content

warpPath()

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

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

warp-path.ts
tsx
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...;
warp-path.ts
tsx
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...;

输入

输出

如何工作​

此函数通过将SVG指令拆分为许多较小的SVG指令，然后重新映射每个指令的坐标来运行。这将导致输出比输入更多的SVG路径。

参数​

path​

一个SVG路径字符串。

fn​

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

tsx
import { WarpPathFn } from "@remotion/paths";
 
const fn: WarpPathFn = ({ x, y }) => ({
  x: x + Math.sin(y / 4) * 5,
  y: y,
});
tsx
import { WarpPathFn } from "@remotion/paths";
 
const fn: WarpPathFn = ({ x, y }) => ({
  x: x + Math.sin(y / 4) * 5,
  y: y,
});

options​

interpolationThreshold​

插值算法会将SVG路径递归地拆分为较小的SVG路径。此选项允许您指定算法应在哪个段距离停止将路径分割为较小段的距离。

由于SVG是无单位的，阈值以SVG单位表示。

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

Credits​

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

参见​