Skip to content

Path

Path

It is used to render image content. The specific type is as follows:

ts
type Path = {
  type: 'path';
  x: number;
  y: number;
  w: number;
  h: number;
  angle: number;
  detail: {
    commands: Array<{
      type: 'M' | 'm' | 'L' | 'l' | 'H' | 'h' | 'V' | 'v' | 'C' | 'c' | 'S' | 's' | 'Q' | 'q' | 'T' | 't' | 'A' | 'a' | 'Z' | 'z';
      params: number[];
    }>;
    originX: number;
    originY: number;
    originW: number;
    originH: number;
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    strokeLineCap?: 'butt' | 'round' | 'square';
  };
};

Path.detail Properties

The basic attribute details of the element can be viewed Element's Detail # .

Path.detail Data-Type

ts
type PathDetail = {
  commands: Array<{
    type: 'M' | 'm' | 'L' | 'l' | 'H' | 'h' | 'V' | 'v' | 'C' | 'c' | 'S' | 's' | 'Q' | 'q' | 'T' | 't' | 'A' | 'a' | 'Z' | 'z';
    params: number[];
  }>;
  originX: number;
  originY: number;
  originW: number;
  originH: number;
  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  strokeLineCap?: 'butt' | 'round' | 'square';
};

Path.detail Properties

PropertyDescriptionTypeDefaultRequiredOthers
fillfill colorstring-trueeg. #000000
strokepath colorstring-trueeg. #000000
strokeWidthpath widthnumber0false-
strokeLineCapPath turning type'butt' | 'round' | 'square'-true-
originXPath original X positionnumber0false-
originYPath original Y positionnumber0false-
originWPath original widthnumber0false-
originHPath original heightnumber0false-

Complete Data Example

js
const elementPath = {
  uuid: '41d437b8-afbd-2d3d-14bc-912e26d3491f',
  x: 100,
  y: 100,
  w: 80,
  h: 80,
  angle: 0,
  type: 'path',
  detail: {
    commands: [
      { type: 'M', params: [10, 30] },
      { type: 'A', params: [20, 20, 0, 0, 1, 50, 30] },
      { type: 'A', params: [20, 20, 0, 0, 1, 90, 30] },
      { type: 'Q', params: [90, 60, 50, 90] },
      { type: 'Q', params: [10, 60, 10, 30] },
      { type: 'z', params: [] }
    ],
    fill: '#FF00006F',
    stroke: '#000000',
    strokeWidth: 1,
    originX: 10,
    originY: 10,
    originH: 80,
    originW: 80
  }
};

Demo Preview

More Demo >>