PathBuilder • tldraw Docs

Table of contents

Methods
- cubicSplineThroughPoints
- lineThroughPoints
- arcTo
- circularArcTo
- close
- cubicBezierTo
- lineTo
- moveTo
- toD
- toDrawD
- toGeometry
- toPath2D
- toSvg
- transform

class PathBuilder {}

Constructor

Constructs a new instance of the PathBuilder class

Methods

cubicSplineThroughPoints( )

static

static cubicSplineThroughPoints(
  points: VecLike[],
  opts?: PathBuilderLineOpts & {
    endOffsets?: number;
  },
): PathBuilder;

Parameters

Name	Description
`points`	`VecLike[];`
`opts`	`PathBuilderLineOpts & { endOffsets?: number; };`

Returns

PathBuilder;

lineThroughPoints( )

static

static lineThroughPoints(
  points: VecLike[],
  opts?: PathBuilderLineOpts & {
    endOffsets?: number;
  },
): PathBuilder;

Parameters

Name	Description
`points`	`VecLike[];`
`opts`	`PathBuilderLineOpts & { endOffsets?: number; };`

Returns

PathBuilder;

arcTo( )

arcTo(
  rx: number,
  ry: number,
  largeArcFlag: boolean,
  sweepFlag: boolean,
  xAxisRotationRadians: number,
  x2: number,
  y2: number,
  opts?: PathBuilderCommandOpts,
): this;

Parameters

Name	Description
`rx`	`number;`
`ry`	`number;`
`largeArcFlag`	`boolean;`
`sweepFlag`	`boolean;`
`xAxisRotationRadians`	`number;`
`x2`	`number;`
`y2`	`number;`
`opts`	`PathBuilderCommandOpts;`

Returns

this;

circularArcTo( )

circularArcTo(
  radius: number,
  largeArcFlag: boolean,
  sweepFlag: boolean,
  x2: number,
  y2: number,
  opts?: PathBuilderCommandOpts,
): this;

Parameters

Name	Description
`radius`	`number;`
`largeArcFlag`	`boolean;`
`sweepFlag`	`boolean;`
`x2`	`number;`
`y2`	`number;`
`opts`	`PathBuilderCommandOpts;`

Returns

this;

close( )

close(): this;

cubicBezierTo( )

cubicBezierTo(
  x: number,
  y: number,
  cp1X: number,
  cp1Y: number,
  cp2X: number,
  cp2Y: number,
  opts?: PathBuilderCommandOpts,
): this;

Parameters

Name	Description
`x`	`number;`
`y`	`number;`
`cp1X`	`number;`
`cp1Y`	`number;`
`cp2X`	`number;`
`cp2Y`	`number;`
`opts`	`PathBuilderCommandOpts;`

Returns

this;

lineTo( )

lineTo(x: number, y: number, opts?: PathBuilderCommandOpts): this;

Parameters

Name	Description
`x`	`number;`
`y`	`number;`
`opts`	`PathBuilderCommandOpts;`

Returns

this;

moveTo( )

moveTo(x: number, y: number, opts?: PathBuilderLineOpts): this;

Parameters

Name	Description
`x`	`number;`
`y`	`number;`
`opts`	`PathBuilderLineOpts;`

Returns

this;

toD( )

toD(opts?: PathBuilderToDOpts): string;

Parameters

Name	Description
`opts`	`PathBuilderToDOpts;`

Returns

string;

toDrawD( )

toDrawD(opts: DrawPathBuilderDOpts): string;

Parameters

Name	Description
`opts`	`DrawPathBuilderDOpts;`

Returns

string;

toGeometry( )

toGeometry(): Group2d | PathBuilderGeometry2d;

toPath2D( )

toPath2D(opts: PathBuilderOpts): Path2D;

Parameters

Name	Description
`opts`	`PathBuilderOpts;`

Returns

Path2D;

toSvg( )

toSvg(opts: PathBuilderOpts): import("react/jsx-runtime").JSX.Element | null;

Parameters

Name	Description
`opts`	`PathBuilderOpts;`

Returns

import("react/jsx-runtime").JSX.Element | null;

transform( )

Return a new path with every point (including bezier control points) transformed by the given affine matrix. Command metadata (fill, dash, close state, draw offsets, etc.) is preserved, so this can be used to mirror, scale, translate, or otherwise transform a finished path while keeping it renderable and hit-testable.

transform(mat: MatLike): PathBuilder;

Parameters

Name	Description
`mat`	`MatLike;` The affine matrix to apply to each point.

Returns

PathBuilder;