Interface PathCommand

Represents a path command in Penpot. This interface includes a property for defining the type of command.

interface PathCommand {
    command:
        | "M"
        | "move-to"
        | "Z"
        | "close-path"
        | "L"
        | "line-to"
        | "H"
        | "line-to-horizontal"
        | "V"
        | "line-to-vertical"
        | "C"
        | "curve-to"
        | "S"
        | "smooth-curve-to"
        | "Q"
        | "quadratic-bezier-curve-to"
        | "T"
        | "smooth-quadratic-bezier-curve-to"
        | "A"
        | "elliptical-arc";
    params?: {
        x?: number;
        y?: number;
        c1x?: number;
        c1y?: number;
        c2x?: number;
        c2y?: number;
        rx?: number;
        ry?: number;
        xAxisRotation?: number;
        largeArcFlag?: boolean;
        sweepFlag?: boolean;
    };
}

Properties

command params?

Properties

command

command:
    | "M"
    | "move-to"
    | "Z"
    | "close-path"
    | "L"
    | "line-to"
    | "H"
    | "line-to-horizontal"
    | "V"
    | "line-to-vertical"
    | "C"
    | "curve-to"
    | "S"
    | "smooth-curve-to"
    | "Q"
    | "quadratic-bezier-curve-to"
    | "T"
    | "smooth-quadratic-bezier-curve-to"
    | "A"
    | "elliptical-arc"

The type of path command. Possible values include:

  • 'M' or 'move-to': Move to a new point.
  • 'Z' or 'close-path': Close the current path.
  • 'L' or 'line-to': Draw a straight line to a new point.
  • 'H' or 'line-to-horizontal': Draw a horizontal line to a new point.
  • 'V' or 'line-to-vertical': Draw a vertical line to a new point.
  • 'C' or 'curve-to': Draw a cubic Bezier curve to a new point.
  • 'S' or 'smooth-curve-to': Draw a smooth cubic Bezier curve to a new point.
  • 'Q' or 'quadratic-bezier-curve-to': Draw a quadratic Bezier curve to a new point.
  • 'T' or 'smooth-quadratic-bezier-curve-to': Draw a smooth quadratic Bezier curve to a new point.
  • 'A' or 'elliptical-arc': Draw an elliptical arc to a new point.

Example

const pathCommand: PathCommand = { command: 'M', params: { x: 0, y: 0 } };

Optionalparams

params?: {
    x?: number;
    y?: number;
    c1x?: number;
    c1y?: number;
    c2x?: number;
    c2y?: number;
    rx?: number;
    ry?: number;
    xAxisRotation?: number;
    largeArcFlag?: boolean;
    sweepFlag?: boolean;
}

Optional parameters associated with the path command.

Type declaration

  • Optionalx?: number

    The x-coordinate of the point (or endpoint).

  • Optionaly?: number

    The y-coordinate of the point (or endpoint).

  • Optionalc1x?: number

    The x-coordinate of the first control point for curves.

  • Optionalc1y?: number

    The y-coordinate of the first control point for curves.

  • Optionalc2x?: number

    The x-coordinate of the second control point for curves.

  • Optionalc2y?: number

    The y-coordinate of the second control point for curves.

  • Optionalrx?: number

    The radius of the ellipse's x-axis.

  • Optionalry?: number

    The radius of the ellipse's y-axis.

  • OptionalxAxisRotation?: number

    The rotation angle of the ellipse's x-axis.

  • OptionallargeArcFlag?: boolean

    A flag indicating whether to use the larger arc.

  • OptionalsweepFlag?: boolean

    A flag indicating the direction of the arc.

Settings

Member Visibility

On This Page

Properties