Skip to main content

translatePath()

属于@remotion/paths包。

通过给定的xy坐标来翻译路径。

参数

该函数接受三个参数:

  • path,原始的SVG路径。
  • x,水平平移量。
  • y,垂直平移量。

返回值

如果路径有效,则返回一个包含路径的新string

translate-x.ts
tsx
import { translatePath } from "@remotion/paths";
 
const translatedPath = translatePath("M 50 50 L 150 50", 10, 0);
console.log(translatedPath); // "M 50 50 L 150 50"
translate-x.ts
tsx
import { translatePath } from "@remotion/paths";
 
const translatedPath = translatePath("M 50 50 L 150 50", 10, 0);
console.log(translatedPath); // "M 50 50 L 150 50"
translate-y.ts
tsx
import { translatePath } from "@remotion/paths";
 
const translatedPath = translatePath("M10 10 L15 15", 10, 10);
console.log(translatedPath); // "M 20 20 L 25 25"
translate-y.ts
tsx
import { translatePath } from "@remotion/paths";
 
const translatedPath = translatePath("M10 10 L15 15", 10, 10);
console.log(translatedPath); // "M 20 20 L 25 25"
translate-x-and-y.ts
tsx
import { translatePath } from "@remotion/paths";
 
const translatedPath = translatePath(
"M 35,50 a 25,25,0,1,1,50,0 a 25,25,0,1,1,-50,0",
10,
20
);
console.log(translatedPath); // "M 45 70 a 25 25 0 1 1 50 0 a 25, 5 0 1 1 -50 0"
translate-x-and-y.ts
tsx
import { translatePath } from "@remotion/paths";
 
const translatedPath = translatePath(
"M 35,50 a 25,25,0,1,1,50,0 a 25,25,0,1,1,-50,0",
10,
20
);
console.log(translatedPath); // "M 45 70 a 25 25 0 1 1 50 0 a 25, 5 0 1 1 -50 0"

如果路径无效,该函数将抛出异常:

tsx
translatePath("remotion", 10, 0); // Malformed path data: "m" ...
tsx
translatePath("remotion", 10, 0); // Malformed path data: "m" ...

Credits

源代码主要来自于translate-svg-pathserialize-svg-path

另请参阅