Class Path

A vector path. Can be used to build curves and shapes using vector paths rather than pixels.

The path uses even-odd fill rule to draw the shapes. Solid shapes should have counter clockwise winding and holes should have counter clockwise order. To specify winding of a path you can call This is useful especially for the common shapes, which are drawn counter-clockwise.

Filling and stroking are executed using a The describes a solid color or a gradient. You can set the paint by calling or

You can use scissors to cut a part from a shape. This can be useful when you have a path, but only wants to use a section of it. You can set a scissor by calling You can reset any scissor by calling

You can close any path, at any time, by calling Sub-paths are closed with a straight line to its first point.

Paths can be rendered to a texture. To render a path to a texture you need to first convert it into a

The object holds the list of all commands that need to be executed by the system to render the required shape. You can submit a shape for rendering using it's method. See in how to render the shape object.

Hierarchy

  • FrameworkObject
    • Path

Constructors

constructor

Accessors

bounds empty

Methods

addArc addArcTo addBezierTo addCircle addEllipse addLineTo addQuadTo addRectangle addRoundedRectangle close createShape disableMask fill moveTo reset resetScissor scissor setAntiAliasing setCompositeOperation setFill setLineCap setLineJoin setMiterLimit setReadMask setStroke setStrokeWidth setWinding setWriteMask stroke

Constructors

constructor

  • new Path(svgFileContentsOrPath?, isInternalConstructor?): Path

  • Creates a new path from the specified svgSourceContents.

    Parameters

    • OptionalsvgFileContentsOrPath: string | Path

      The parameter to the call.

    • OptionalisInternalConstructor: boolean

    Returns Path

Accessors

bounds

empty

  • get empty(): boolean

  • Checks if the path is empty and has no commands.

    Returns boolean

Methods

addArc

  • addArc(options): Path

  • Adds an arc segment at the corner defined by the last path point, and two specified points.

    Parameters

    Returns Path

addArcTo

  • addArcTo(options): Path

  • Adds an arc segment at the corner defined by the last path point, and two specified points.

    Parameters

    • options: {
          point1: Immutable<Vector2>;
          point2: Immutable<Vector2>;
          radius: number;
      } | {
          radius: number;
          x1: number;
          x2: number;
          y1: number;
          y2: number;
      }

      Options object for the function call.

    Returns Path

addBezierTo

  • addBezierTo(options): Path

  • Adds cubic bezier segment from last point in the path via two control points to the specified point.

    Parameters

    • options: {
          c1: Immutable<Vector2>;
          c2: Immutable<Vector2>;
          point: Immutable<Vector2>;
      } | {
          c1x: number;
          c1y: number;
          c2x: number;
          c2y: number;
          x: number;
          y: number;
      }

      Options object for the function call.

    Returns Path

addCircle

  • addCircle(options): Path

  • Creates new circle shaped sub-path with the given radius and with it's center at origin.

    Parameters

    • options: {
          origin: Immutable<Vector2>;
          radius: number;
      } | {
          radius: number;
          x: number;
          y: number;
      }

      Options object for the function call.

    Returns Path

addEllipse

  • addEllipse(options): Path

  • Creates new ellipse shaped sub-path with the given radius and with it's center at origin.

    Parameters

    • options: {
          origin: Immutable<Vector2>;
          radius: Immutable<Vector2>;
      } | {
          height: number;
          width: number;
          x: number;
          y: number;
      }

      Options object for the function call.

    Returns Path

addLineTo

  • addLineTo(options): Path

  • Adds line segment from the last point in the path to the specified point.

    Parameters

    • options: {
          point: Immutable<Vector2>;
      } | {
          x: number;
          y: number;
      }

      Options object for the function call.

    Returns Path

addQuadTo

  • addQuadTo(options): Path

  • Adds quadratic bezier segment from last point in the path via a control point to the specified point.

    Parameters

    • options: {
          controlPoint: Immutable<Vector2>;
          point: Immutable<Vector2>;
      } | {
          cx: number;
          cy: number;
          x: number;
          y: number;
      }

      Options object for the function call.

    Returns Path

addRectangle

  • addRectangle(options): Path

  • Creates new rectangle shaped sub-path.

    Parameters

    • options: {
          rect: Immutable<Rect2>;
      } | {
          origin: Immutable<Vector2>;
          size: Immutable<Vector2>;
      } | {
          height: number;
          width: number;
          x: number;
          y: number;
      }

      Options object for the function call.

    Returns Path

addRoundedRectangle

  • addRoundedRectangle(options): Path

  • Creates new rounded rectangle shaped sub-path.

    Parameters

    • options:
          | {
              bottomLeft: number;
              bottomRight: number;
              rect: Immutable<Rect2>;
              topLeft: number;
              topRight: number;
          }
          | {
              bottomLeft: number;
              bottomRight: number;
              origin: Immutable<Vector2>;
              size: Immutable<Vector2>;
              topLeft: number;
              topRight: number;
          }
          | {
              bottomLeft: number;
              bottomRight: number;
              height: number;
              topLeft: number;
              topRight: number;
              width: number;
              x: number;
              y: number;
          }
          | {
              radius: number;
              rect: Immutable<Rect2>;
          }
          | {
              origin: Immutable<Vector2>;
              radius: number;
              size: Immutable<Vector2>;
          }
          | {
              height: number;
              radius: number;
              width: number;
              x: number;
              y: number;
          }

      Options object for the function call.

    Returns Path

close

  • close(): Path

  • Closes current sub-path with a line segment.

    Returns Path

createShape

  • createShape(): Shape

  • Creates a new shape based on the given path.

    Returns Shape

disableMask

  • disableMask(clearStencil?): Path

  • Performs disableMask2.

    Parameters

    Returns Path

fill

  • fill(): Path

  • Fills the current sub-path with current fill style.

    Returns Path

moveTo

  • moveTo(options): Path

  • Starts new sub-path with specified point as first point.

    Parameters

    • options: {
          point: Immutable<Vector2>;
      } | {
          x: number;
          y: number;
      }

      Options object for the function call.

    Returns Path

reset

  • reset(): void

  • Clears the path and remove all recorded commands.

    Returns void

resetScissor

  • resetScissor(): Path

  • Reset and disables scissoring.

    Returns Path

scissor

  • scissor(area): Path

  • Sets the current scissor rectangle. The scissor can be used to cut a path.

    Parameters

    Returns Path

setAntiAliasing

  • setAntiAliasing(antiAliasing): Path

  • Enables or disables the anti aliasing.

    Parameters

    • antiAliasing: boolean

    Returns Path

setCompositeOperation

  • setCompositeOperation(compositeOperation): Path

  • Sets the composite operation. See for valid values.

    Parameters

    Returns Path

setFill

  • setFill(paint): Path

  • Sets current fill style to a paint, which can be a one of the gradients or a solid color.

    Parameters

    Returns Path

setLineCap

  • setLineCap(cap): Path

  • Sets how the end of the line (cap) is drawn. By default,

    Parameters

    Returns Path

setLineJoin

  • setLineJoin(join): Path

  • Sets how sharp path corners are drawn. By default,

    Parameters

    Returns Path

setMiterLimit

  • setMiterLimit(miterLimit): Path

  • Sets the miter limit of the stroke style. Miter limit controls when a sharp corner is beveled.

    Parameters

    • miterLimit: number

    Returns Path

setReadMask

  • setReadMask(value, isIntersect): Path

  • Enables reading a stencil mask previously written using SetWriteMask for the shapes that were drawn using that write mask. The operation has 2 modes: one in which only the pixels that have the stencil value, i.e. intersection, and the second one in which pixels that do not have that mask will pass, i.e. the difference of shapes. Only fill commands will be affected by this setting.

    Parameters

    • value: number

      The mask value to compare against

    • isIntersect: boolean

      If set, the intersection will pass, else the difference will pass

    Returns Path

setStroke

  • setStroke(paint): Path

  • Sets current stroke style to a paint, which can be a one of the gradients or a solid color.

    Parameters

    Returns Path

setStrokeWidth

  • setStrokeWidth(width): Path

  • Sets the stroke width of the stroke style.

    Parameters

    • width: number

    Returns Path

setWinding

setWriteMask

  • setWriteMask(value, isDrawDisabled): Path

  • Enables writing a stencil mask for the shapes that will be rendered after this call. Only fill commands will write masks. To draw the shapes, just do it normally, the Path will make sure the stencil masking is enabled.

    Parameters

    • value: number

      The mask value to write to the stencil

    • isDrawDisabled: boolean

      A boolean flag which enables or disables writing color to the framebuffer While the mask operation is set. If set, colors will not be outputed, else colors will be written.

    Returns Path

stroke

  • stroke(): Path

  • Fills the current sub-path with current stroke style.

    Returns Path

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods