Skip to main content

parsePath()

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

将SVG字符串路径解析为Instruction数组。

reset-path.ts
tsx
import { parsePath } from "@remotion/paths";
 
const newPath = parsePath("M 10 10 L 20 20");
 
/*
  [
    { type: "M", x: 10, y: 10 },
    { type: "L", x: 20, y: 20 },
  ]
*/
reset-path.ts
tsx
import { parsePath } from "@remotion/paths";
 
const newPath = parsePath("M 10 10 L 20 20");
 
/*
  [
    { type: "M", x: 10, y: 10 },
    { type: "L", x: 20, y: 20 },
  ]
*/

如果SVG路径无效，此函数将抛出异常。

返回类型​

一个Instruction数组。Instruction类型也可以从@remotion/paths中导入：

ts
import type { Instruction } from "@remotion/paths";
ts
import type { Instruction } from "@remotion/paths";

该类型具有以下结构：

ts
export type Instruction =
  | {
      type: "M";
      x: number;
      y: number;
    }
  | {
      type: "L";
      x: number;
      y: number;
    }
  | {
      type: "H";
      x: number;
    }
  | {
      type: "V";
      y: number;
    }
  | {
      type: "C";
      cp1x: number;
      cp1y: number;
      cp2x: number;
      cp2y: number;
      x: number;
      y: number;
    }
  | {
      type: "S";
      cpx: number;
      cpy: number;
      x: number;
      y: number;
    }
  | {
      type: "Q";
      cpx: number;
      cpy: number;
      x: number;
      y: number;
    }
  | {
      type: "T";
      x: number;
      y: number;
    }
  | {
      type: "A";
      rx: number;
      ry: number;
      xAxisRotation: number;
      largeArcFlag: boolean;
      sweepFlag: boolean;
      x: number;
      y: number;
    }
  | {
      type: "m";
      dx: number;
      dy: number;
    }
  | {
      type: "l";
      dx: number;
      dy: number;
    }
  | {
      type: "h";
      dx: number;
    }
  | {
      type: "v";
      dy: number;
    }
  | {
      type: "c";
      cp1dx: number;
      cp1dy: number;
      cp2dx: number;
      cp2dy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "s";
      cpdx: number;
      cpdy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "q";
      cpdx: number;
      cpdy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "t";
      dx: number;
      dy: number;
    }
  | {
      type: "a";
      rx: number;
      ry: number;
      xAxisRotation: number;
      largeArcFlag: boolean;
      sweepFlag: boolean;
      dx: number;
      dy: number;
    }
  | {
      type: "Z";
    }
  | {
      type: "z";
    };
ts
export type Instruction =
  | {
      type: "M";
      x: number;
      y: number;
    }
  | {
      type: "L";
      x: number;
      y: number;
    }
  | {
      type: "H";
      x: number;
    }
  | {
      type: "V";
      y: number;
    }
  | {
      type: "C";
      cp1x: number;
      cp1y: number;
      cp2x: number;
      cp2y: number;
      x: number;
      y: number;
    }
  | {
      type: "S";
      cpx: number;
      cpy: number;
      x: number;
      y: number;
    }
  | {
      type: "Q";
      cpx: number;
      cpy: number;
      x: number;
      y: number;
    }
  | {
      type: "T";
      x: number;
      y: number;
    }
  | {
      type: "A";
      rx: number;
      ry: number;
      xAxisRotation: number;
      largeArcFlag: boolean;
      sweepFlag: boolean;
      x: number;
      y: number;
    }
  | {
      type: "m";
      dx: number;
      dy: number;
    }
  | {
      type: "l";
      dx: number;
      dy: number;
    }
  | {
      type: "h";
      dx: number;
    }
  | {
      type: "v";
      dy: number;
    }
  | {
      type: "c";
      cp1dx: number;
      cp1dy: number;
      cp2dx: number;
      cp2dy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "s";
      cpdx: number;
      cpdy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "q";
      cpdx: number;
      cpdy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "t";
      dx: number;
      dy: number;
    }
  | {
      type: "a";
      rx: number;
      ry: number;
      xAxisRotation: number;
      largeArcFlag: boolean;
      sweepFlag: boolean;
      dx: number;
      dy: number;
    }
  | {
      type: "Z";
    }
  | {
      type: "z";
    };

参见​