Options
All
• Public
• Public/Protected
• All

A Path is made of a sequence of PathSegments connected by a Stroke.

The Path class has the following helper methods to add segments to a Path.

• moveTo - lifts and moves "pen" stroke to another point
• lineTo - draws a straight line to a point
• quadraticCurveTo - draws a simple curve to a point
• cubicCurveTo - draws a bezier curve to a point
• close - connects a stroke from the current point to the Paths' start point.

Each of these helper methods returns a reference to the same Path object it was called on. This allows you to chain these calls together. For example:

``````let p: Path = new Path(0, 0);
p.lineTo(10, 0).moveTo(0, 0).lineTo(0, 10);
``````

By default, a Path has a fill opacity of 0% so its fill will not show up. If you would like to add a Fill color to your Path, be sure to set its fillOpacity to 1.0 for 100% fill opacity.

For more details on SVG Paths, checkout MDN's Path documentation.

Constructors

constructor

• new Path(x: number, y: number): Path
• Parameters

• x: number

The starting x-coordinate of the Path.

• y: number

The starting y-coordinate of the Path.

Properties

fill

fill: Color = Color.BLACK

fillOpacity

fillOpacity: number = 0

Accessors

opacity

opacity:

The opacity of the entire Shape.

segments:

stroke

stroke:

The Stroke object to outline the element with.

strokeOpacity

strokeOpacity:

The opacity of just the Stroke.

transform:

Methods

clearObservers

• clearObservers(): void

close

• Close the path by creating a stroke from the current end-point in the Path to the start point of the path.

cubicCurveTo

• cubicCurveTo(cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number): Path
• Draw a cubic, bezier curve to a specific end point. For more information on how quadratic curves work and to tinker with its two control points, see this cubic curve demo.

Parameters

• cx1: number

first control point's x-coordinate

• cy1: number

first control point's y-coordinate

• cx2: number

second control point's x-coordinate

• cy2: number

second control point's y-coordinate

• x: number

x-coordinate of end point

• y: number

y-coordinate of end point

lineTo

• lineTo(x: number, y: number): Path
• Parameters

• x: number

the x-coordinate to draw a line to from the current position of the stroke

• y: number

the y-coordinate to draw a line to from the current position of the stroke

moveTo

• moveTo(x: number, y: number): Path
• Parameters

• x: number

the x-coordinate of the point to move the "pen" to without drawing a stroke.

• y: number

the y-coordinate of the point to move the "pen" to without drawing a stroke.

notify

• notify(): void

onclick

• onclick(event: MouseEvent): void

ondblclick

• ondblclick(event: MouseEvent): void

onmousedown

• onmousedown(event: MouseEvent): void

onmousemove

• onmousemove(event: MouseEvent): void

onmouseout

• onmouseout(event: MouseEvent): void

onmouseover

• onmouseover(event: MouseEvent): void

onmouseup

• onmouseup(event: MouseEvent): void

• quadraticCurveTo(cx: number, cy: number, x: number, y: number): Path
• Draw a quadratic curve to a specific end point. For more information on how quadratic curves work and to tinker with its control point, see this quadratic curve demo.

Parameters

• cx: number

control point's x-coordinate

• cy: number

control point's y-coordinate

• x: number

x-coordinate of end point

• y: number

y-coordinate of end point

removeObserver

• removeObserver(observer: Observer<SVGElement>): void

toString

• toString(): string

Legend

• Module
• Object literal
• Variable
• Function
• Function with type parameter
• Index signature
• Type alias
• Enumeration
• Enumeration member
• Property
• Method
• Interface
• Interface with type parameter
• Constructor
• Property
• Method
• Index signature
• Class
• Class with type parameter
• Constructor
• Property
• Method
• Accessor
• Index signature
• Inherited constructor
• Inherited property
• Inherited method
• Inherited accessor
• Protected property
• Protected method
• Protected accessor
• Private property
• Private method
• Private accessor
• Static property
• Static method

Generated using TypeDoc