Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

  • Graphics
    • PixiGraphics

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

_accessibleActive

_accessibleActive: boolean
member

{boolean}

memberof

PIXI.DisplayObject#

todo

Needs docs.

_accessibleDiv

_accessibleDiv: boolean
member

{boolean}

memberof

PIXI.DisplayObject#

todo

Needs docs.

_bounds

_bounds: Bounds

The bounds object, this is used to calculate and store the bounds of the displayObject.

member

{PIXI.Bounds} PIXI.DisplayObject#_bounds

Protected _boundsID

_boundsID: number

Flags the cached bounds as dirty.

member

{number} PIXI.DisplayObject#_boundsID

Protected _boundsRect

_boundsRect: Bounds

Cache of this display-object's bounds-rectangle.

member

{PIXI.Bounds} PIXI.DisplayObject#_boundsRect

Private _createjs

_createjs: CreatejsGraphics

Protected _destroyed

_destroyed: boolean

If the object has been destroyed via destroy(). If true, it should not be used.

member

{boolean} PIXI.DisplayObject#_destroyed

Protected _enabledFilters

_enabledFilters: Filter[]

Currently enabled filters

member

{PIXI.Filter[]} PIXI.DisplayObject#_enabledFilters

Protected _fillStyle

_fillStyle: FillStyle

Current fill style

member

{PIXI.FillStyle} PIXI.Graphics#_fillStyle

Protected _holeMode

_holeMode: boolean

Current hole mode is enabled.

member

{boolean} PIXI.Graphics#_holeMode

default

false

Protected _lastSortedIndex

_lastSortedIndex: number

Which index in the children array the display component was before the previous zIndex sort. Used by containers to help sort objects with the same zIndex, by using previous array index as the decider.

member

{number} PIXI.DisplayObject#_lastSortedIndex

Protected _lineStyle

_lineStyle: LineStyle

Current line style

member

{PIXI.LineStyle} PIXI.Graphics#_lineStyle

_localBounds

_localBounds: Bounds

Local bounds object, swapped with _bounds when using getLocalBounds().

member

{PIXI.Bounds} PIXI.DisplayObject#_localBounds

Protected _localBoundsRect

_localBoundsRect: Bounds

Cache of this display-object's local-bounds rectangle.

member

{PIXI.Bounds} PIXI.DisplayObject#_localBoundsRect

Protected _mask

_mask: null | Container | MaskData

The original, cached mask of the object.

member

{PIXI.Container|PIXI.MaskData|null} PIXI.DisplayObject#_mask

Protected _matrix

_matrix: Matrix

Current shape transform matrix.

member

{PIXI.Matrix} PIXI.Graphics#_matrix

Protected _tempDisplayObjectParent

_tempDisplayObjectParent: Container
member

{PIXI.Container}

Protected _zIndex

_zIndex: number

The zIndex of the displayObject. A higher value will mean it will be rendered on top of other displayObjects within the same container.

member

{number} PIXI.DisplayObject#_zIndex

accessible

accessible: boolean

Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set

member

{boolean}

memberof

PIXI.DisplayObject#

accessibleChildren

accessibleChildren: boolean

Setting to false will prevent any children inside this container to be accessible. Defaults to true.

member

{boolean}

memberof

PIXI.DisplayObject#

default

true

accessibleHint

accessibleHint: string

Sets the aria-label attribute of the shadow div

member

{string}

memberof

PIXI.DisplayObject#

accessiblePointerEvents

accessiblePointerEvents: string

Specify the pointer-events the accessible div will use Defaults to auto.

member

{string}

memberof

PIXI.DisplayObject#

default

'auto'

accessibleTitle

accessibleTitle: string

Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'displayObject [tabIndex]'

member

{?string}

memberof

PIXI.DisplayObject#

accessibleType

accessibleType: string

Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.

member

{string}

memberof

PIXI.DisplayObject#

default

'button'

alpha

alpha: number

The opacity of the object.

member

{number} PIXI.DisplayObject#alpha

angle

angle: number

The angle of the object in degrees. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.

member

{number}

Protected batchDirty

batchDirty: number

Update dirty for limiting calculating batches.

member

{number} PIXI.Graphics#batchDirty

default

-1

Protected batchTint

batchTint: number

Update dirty for limiting calculating tints for batches.

member

{number} PIXI.Graphics#batchTint

default

-1

Protected batches

batches: any[]

A collections of batches! These can be drawn by the renderer batch system.

member

{object[]} PIXI.Graphics#batches

blendMode

blendMode: number

The blend mode to be applied to the graphic shape. Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode.

member

{number}

default

PIXI.BLEND_MODES.NORMAL;

see

PIXI.BLEND_MODES

buttonMode

buttonMode: boolean

If enabled, the mouse cursor use the pointer behavior when hovered over the displayObject if it is interactive Setting this changes the 'cursor' property to 'pointer'.

example

const sprite = new PIXI.Sprite(texture); sprite.interactive = true; sprite.buttonMode = true;

member

{boolean}

memberof

PIXI.DisplayObject#

cacheAsBitmap

cacheAsBitmap: boolean

When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite. This is useful if your graphics element does not change often, as it will speed up the rendering of the object in exchange for taking up texture memory. It is also useful if you need the graphics object to be anti-aliased, because it will be rendered using canvas. This is not recommended if you are constantly redrawing the graphics element.

name

cacheAsBitmap

member

{boolean}

memberof

PIXI.Graphics#

default

false

Readonly children

children: DisplayObject[]

The array of children of this container.

member

{PIXI.DisplayObject[]} PIXI.Container#children

readonly

Protected currentPath

currentPath: Polygon

Current path

member

{PIXI.Polygon} PIXI.Graphics#currentPath

cursor

cursor: string

This defines what cursor mode is used when the mouse cursor is hovered over the displayObject.

example

const sprite = new PIXI.Sprite(texture); sprite.interactive = true; sprite.cursor = 'wait';

see

https://developer.mozilla.org/en/docs/Web/CSS/cursor

member

{string}

memberof

PIXI.DisplayObject#

Readonly fill

fill: FillStyle

The current fill style.

member

{PIXI.FillStyle}

readonly

filterArea

filterArea: Rectangle

The area the filter is applied to. This is used as more of an optimization rather than figuring out the dimensions of the displayObject each frame you can set this rectangle.

Also works as an interaction mask.

member

{?PIXI.Rectangle} PIXI.DisplayObject#filterArea

filters

filters: Filter[]

Sets the filters for the displayObject.

  • IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer. To remove filters simply set this property to 'null'.
member

{?PIXI.Filter[]} PIXI.DisplayObject#filters

Readonly geometry

geometry: GraphicsGeometry

Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU. Can be shared between multiple Mesh or Graphics objects.

member

{PIXI.GraphicsGeometry}

readonly

height

height: number

The height of the Container, setting this will actually modify the scale to achieve the value set

member

{number}

hitArea

hitArea: IHitArea

Interaction shape. Children will be hit first, then this shape will be checked. Setting this will cause this shape to be checked in hit tests rather than the displayObject's bounds.

example

const sprite = new PIXI.Sprite(texture); sprite.interactive = true; sprite.hitArea = new PIXI.Rectangle(0, 0, 100, 100);

member

{PIXI.IHitArea}

memberof

PIXI.DisplayObject#

interactive

interactive: boolean

Enable interaction events for the DisplayObject. Touch, pointer and mouse events will not be emitted unless interactive is set to true.

example

const sprite = new PIXI.Sprite(texture); sprite.interactive = true; sprite.on('tap', (event) => { //handle event });

member

{boolean}

memberof

PIXI.DisplayObject#

interactiveChildren

interactiveChildren: boolean

Determines if the children to the displayObject can be clicked/touched Setting this to false allows PixiJS to bypass a recursive hitTest function

member

{boolean}

memberof

PIXI.Container#

isMask

isMask: boolean

Does any other displayObject use this object as a mask?

member

{boolean} PIXI.DisplayObject#isMask

isSprite

isSprite: boolean

used to fast check if a sprite is.. a sprite!

member

{boolean} PIXI.DisplayObject#isSprite

Readonly line

line: LineStyle

The current line style.

member

{PIXI.LineStyle}

readonly

Readonly localTransform

localTransform: Matrix

Current transform of the object based on local factors: position, scale, other stuff.

member

{PIXI.Matrix}

readonly

mask

mask: null | Container | MaskData

Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. In PixiJS a regular mask must be a {@link PIXI.Graphics} or a {@link PIXI.Sprite} object. This allows for much faster masking in canvas as it utilities shape clipping. To remove a mask, set this property to null.

For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.

example

const graphics = new PIXI.Graphics(); graphics.beginFill(0xFF3300); graphics.drawRect(50, 250, 100, 100); graphics.endFill();

const sprite = new PIXI.Sprite(texture); sprite.mask = graphics;

todo

At the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask.

member

{PIXI.Container|PIXI.MaskData|null}

name

name: string

The instance name of the object.

memberof

PIXI.DisplayObject#

member

{string} name

parent

parent: Container

The display object container that contains this display object.

member

{PIXI.Container} PIXI.DisplayObject#parent

pivot

pivot: ObservablePoint

The pivot point of the displayObject that it rotates around. Assignment by value since pixi-v4.

member

{PIXI.ObservablePoint}

pluginName

pluginName: string

Renderer plugin for batching

member

{string} PIXI.Graphics#pluginName

default

'batch'

position

position: ObservablePoint

The coordinate of the object relative to the local coordinates of the parent. Assignment by value since pixi-v4.

member

{PIXI.ObservablePoint}

renderable

renderable: boolean

Can this object be rendered, if false the object will not be drawn but the updateTransform methods will still be called.

Only affects recursive calls from parent. You can ask for bounds manually.

member

{boolean} PIXI.DisplayObject#renderable

rotation

rotation: number

The rotation of the object in radians. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.

member

{number}

scale

scale: ObservablePoint

The scale factor of the object. Assignment by value since pixi-v4.

member

{PIXI.ObservablePoint}

shader

shader: Shader

Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. Can be shared between multiple Graphics objects.

member

{PIXI.Shader} PIXI.Graphics#shader

skew

skew: ObservablePoint

The skew factor for the object in radians. Assignment by value since pixi-v4.

member

{PIXI.ObservablePoint}

sortDirty

sortDirty: boolean

Should children be sorted by zIndex at the next updateTransform call. Will get automatically set to true if a new child is added, or if a child's zIndex changes.

member

{boolean} PIXI.Container#sortDirty

sortableChildren

sortableChildren: boolean

If set to true, the container will sort its children by zIndex value when updateTransform() is called, or manually if sortChildren() is called.

This actually changes the order of elements in the array, so should be treated as a basic solution that is not performant compared to other solutions, such as @link https://github.com/pixijs/pixi-display

Also be aware of that this may not work nicely with the addChildAt() function, as the zIndex sorting may cause the child to automatically sorted to another position.

see

PIXI.settings.SORTABLE_CHILDREN

member

{boolean} PIXI.Container#sortableChildren

state

state: State

Represents the WebGL state the Graphics required to render, excludes shader and geometry. E.g., blend mode, culling, depth testing, direction of rendering triangles, backface, etc.

member

{PIXI.State} PIXI.Graphics#state

tint

tint: number

The tint applied to the graphic shape. This is a hex value. A value of 0xFFFFFF will remove any tint effect.

member

{number}

default

0xFFFFFF

transform

transform: Transform

World transform and local transform of this object. This will become read-only later, please do not assign anything there unless you know what are you doing.

member

{PIXI.Transform} PIXI.DisplayObject#transform

Protected vertexData

vertexData: Float32Array

Copy of the object vertex data.

member

{Float32Array} PIXI.Graphics#vertexData

visible

visible: boolean

The visibility of the object. If false the object will not be drawn, and the updateTransform function will not be called.

Only affects recursive calls from parent. You can ask for bounds or call updateTransform manually.

member

{boolean} PIXI.DisplayObject#visible

width

width: number

The width of the Container, setting this will actually modify the scale to achieve the value set

member

{number}

Readonly worldAlpha

worldAlpha: number

The multiplied alpha of the displayObject.

member

{number} PIXI.DisplayObject#worldAlpha

readonly

Readonly worldTransform

worldTransform: Matrix

Current transform of the object based on world (parent) factors.

member

{PIXI.Matrix}

readonly

Readonly worldVisible

worldVisible: boolean

Indicates if the object is globally visible.

member

{boolean}

readonly

x

x: number

The position of the displayObject on the x axis relative to the local coordinates of the parent. An alias to position.x

member

{number}

y

y: number

The position of the displayObject on the y axis relative to the local coordinates of the parent. An alias to position.y

member

{number}

zIndex

zIndex: number

The zIndex of the displayObject. If a container has the sortableChildren property set to true, children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other displayObjects within the same container.

member

{number}

Accessors

createjs

Methods

Protected _calculateBounds

  • _calculateBounds(): void
  • Retrieves the bounds of the graphic shape as a rectangle object

    Returns void

Protected _initCurve

  • _initCurve(x?: number, y?: number): void
  • Initialize the curve

    Parameters

    • Optional x: number
    • Optional y: number

    Returns void

Protected _populateBatches

  • _populateBatches(): void
  • Populating batches for rendering

    Returns void

_recursivePostUpdateTransform

  • _recursivePostUpdateTransform(): void
  • Recursively updates transform of all objects from the root to this one internal function for toLocal()

    Returns void

Protected _render

  • _render(renderer: Renderer): void
  • Renders the object using the WebGL renderer

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

Protected _renderBatched

  • _renderBatched(renderer: Renderer): void
  • Renders the batches using the BathedRenderer plugin

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

Protected _renderDirect

  • _renderDirect(renderer: Renderer): void
  • Renders the graphics direct

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

_renderDrawCallDirect

  • _renderDrawCallDirect(renderer: Renderer, drawCall: BatchDrawCall): void
  • Renders specific DrawCall

    Parameters

    • renderer: Renderer
    • drawCall: BatchDrawCall

    Returns void

Protected _resolveDirectShader

  • _resolveDirectShader(renderer: Renderer): void
  • Resolves shader for direct rendering

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

addChild

  • addChild<TChildren>(...children: TChildren): TChildren[0]
  • Adds one or more children to the container.

    Multiple items can be added like so: myContainer.addChild(thingOne, thingTwo, thingThree)

    Type parameters

    • TChildren: DisplayObject[]

    Parameters

    • Rest ...children: TChildren

      The DisplayObject(s) to add to the container

    Returns TChildren[0]

    The first child that was added.

addChildAt

  • addChildAt<T>(child: T, index: number): T
  • Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    Type parameters

    • T: DisplayObject<T>

    Parameters

    • child: T

      The child to add

    • index: number

      The index to place the child in

    Returns T

    The child that was added.

addListener

  • addListener(event: InteractionEventTypes, fn: (event: InteractionEvent) => void, context?: any): PixiGraphics
  • addListener(event: string | symbol, fn: Function, context?: any): PixiGraphics
  • Parameters

    • event: InteractionEventTypes
    • fn: (event: InteractionEvent) => void
        • (event: InteractionEvent): void
        • Parameters

          • event: InteractionEvent

          Returns void

    • Optional context: any

    Returns PixiGraphics

  • Parameters

    • event: string | symbol
    • fn: Function
    • Optional context: any

    Returns PixiGraphics

arc

  • arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): Graphics
  • The arc method creates an arc/curve (used to create circles, or parts of circles).

    Parameters

    • cx: number

      The x-coordinate of the center of the circle

    • cy: number

      The y-coordinate of the center of the circle

    • radius: number

      The radius of the circle

    • startAngle: number

      The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)

    • endAngle: number

      The ending angle, in radians

    • Optional anticlockwise: boolean

    Returns Graphics

    This Graphics object. Good for chaining method calls

arcTo

  • arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics
  • The arcTo() method creates an arc/curve between two tangents on the canvas.

    "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!

    Parameters

    • x1: number

      The x-coordinate of the first tangent point of the arc

    • y1: number

      The y-coordinate of the first tangent point of the arc

    • x2: number

      The x-coordinate of the end of the arc

    • y2: number

      The y-coordinate of the end of the arc

    • radius: number

      The radius of the arc

    Returns Graphics

    This Graphics object. Good for chaining method calls

beginFill

  • beginFill(color?: number, alpha?: number): Graphics
  • Specifies a simple one-color fill that subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) use when drawing.

    Parameters

    • Optional color: number
    • Optional alpha: number

    Returns Graphics

    This Graphics object. Good for chaining method calls

beginHole

  • beginHole(): Graphics
  • Begin adding holes to the last draw shape IMPORTANT: holes must be fully inside a shape to work Also weirdness ensues if holes overlap! Ellipses, Circles, Rectangles and Rounded Rectangles cannot be holes or host for holes in CanvasRenderer, please use moveTo lineTo, quadraticCurveTo if you rely on pixi-legacy bundle.

    Returns Graphics

    Returns itself.

beginTextureFill

  • beginTextureFill(options?: { alpha?: number; color?: number; matrix?: Matrix; texture?: Texture }): Graphics
  • Begin the texture fill

    Parameters

    • Optional options: { alpha?: number; color?: number; matrix?: Matrix; texture?: Texture }
      • Optional alpha?: number
      • Optional color?: number
      • Optional matrix?: Matrix
      • Optional texture?: Texture

    Returns Graphics

    This Graphics object. Good for chaining method calls

bezierCurveTo

  • bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): Graphics
  • Calculate the points for a bezier curve and then draws it.

    Parameters

    • cpX: number

      Control point x

    • cpY: number

      Control point y

    • cpX2: number

      Second Control point x

    • cpY2: number

      Second Control point y

    • toX: number

      Destination point x

    • toY: number

      Destination point y

    Returns Graphics

    This Graphics object. Good for chaining method calls

calculateBounds

  • calculateBounds(): void
  • Recalculates the bounds of the container.

    Returns void

Protected calculateTints

  • calculateTints(): void
  • Recalcuate the tint by applying tin to batches using Graphics tint.

    Returns void

Protected calculateVertices

  • calculateVertices(): void
  • If there's a transform update or a change to the shape of the geometry, recaculate the vertices.

    Returns void

clear

  • clear(): Graphics
  • Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.

    Returns Graphics

    This Graphics object. Good for chaining method calls

clone

  • clone(): Graphics
  • Creates a new Graphics object with the same values as this one. Note that only the geometry of the object is cloned, not its transform (position,scale,etc)

    Returns Graphics

    A clone of the graphics object

closePath

  • closePath(): Graphics
  • Closes the current path.

    Returns Graphics

    Returns itself.

containerUpdateTransform

  • containerUpdateTransform(): void
  • Container default updateTransform, does update children of container. Will crash if there's no parent element.

    memberof

    PIXI.Container#

    function

    containerUpdateTransform

    Returns void

containsPoint

  • containsPoint(point: IPointData): boolean
  • Tests if a point is inside this graphics object

    Parameters

    • point: IPointData

      the point to test

    Returns boolean

    the result of the test

destroy

  • destroy(options?: { baseTexture?: boolean; children?: boolean; texture?: boolean }): void
  • Destroys the Graphics object.

    Parameters

    • Optional options: { baseTexture?: boolean; children?: boolean; texture?: boolean }
      • Optional baseTexture?: boolean
      • Optional children?: boolean
      • Optional texture?: boolean

    Returns void

disableTempParent

  • disableTempParent(cacheParent: DisplayObject): void
  • Pair method for enableTempParent

    Parameters

    • cacheParent: DisplayObject

      actual parent of element

    Returns void

displayObjectUpdateTransform

  • displayObjectUpdateTransform(): void
  • DisplayObject default updateTransform, does not update children of container. Will crash if there's no parent element.

    memberof

    PIXI.DisplayObject#

    function

    displayObjectUpdateTransform

    Returns void

drawChamferRect

  • drawChamferRect(x: number, y: number, width: number, height: number, chamfer: number): Graphics
  • Draw Rectangle with chamfer corners.

    Note: Only available with @pixi/graphics-extras.

    method

    PIXI.Graphics#drawChamferRect

    Parameters

    • x: number

      Upper left corner of rect

    • y: number

      Upper right corner of rect

    • width: number

      Width of rect

    • height: number

      Height of rect

    • chamfer: number

      accept negative or positive values

    Returns Graphics

    Returns self.

drawCircle

  • drawCircle(x: number, y: number, radius: number): Graphics
  • Draws a circle.

    Parameters

    • x: number

      The X coordinate of the center of the circle

    • y: number

      The Y coordinate of the center of the circle

    • radius: number

      The radius of the circle

    Returns Graphics

    This Graphics object. Good for chaining method calls

drawEllipse

  • drawEllipse(x: number, y: number, width: number, height: number): Graphics
  • Draws an ellipse.

    Parameters

    • x: number

      The X coordinate of the center of the ellipse

    • y: number

      The Y coordinate of the center of the ellipse

    • width: number

      The half width of the ellipse

    • height: number

      The half height of the ellipse

    Returns Graphics

    This Graphics object. Good for chaining method calls

drawFilletRect

  • drawFilletRect(x: number, y: number, width: number, height: number, fillet: number): Graphics
  • Draw Rectangle with fillet corners.

    Note: Only available with @pixi/graphics-extras.

    method

    PIXI.Graphics#drawFilletRect

    Parameters

    • x: number

      Upper left corner of rect

    • y: number

      Upper right corner of rect

    • width: number

      Width of rect

    • height: number

      Height of rect

    • fillet: number

      non-zero real number, size of corner cutout

    Returns Graphics

    Returns self.

drawPolygon

  • drawPolygon(...path: (Polygon | number[] | PixiPoint[])[]): Graphics
  • Draws a polygon using the given path.

    Parameters

    • Rest ...path: (Polygon | number[] | PixiPoint[])[]

      The path data used to construct the polygon.

    Returns Graphics

    This Graphics object. Good for chaining method calls

drawRect

  • drawRect(x: number, y: number, width: number, height: number): Graphics
  • Draws a rectangle shape.

    Parameters

    • x: number

      The X coord of the top-left of the rectangle

    • y: number

      The Y coord of the top-left of the rectangle

    • width: number

      The width of the rectangle

    • height: number

      The height of the rectangle

    Returns Graphics

    This Graphics object. Good for chaining method calls

drawRegularPolygon

  • drawRegularPolygon(x: number, y: number, radius: number, sides: number, rotation: number): Graphics
  • Draw a regular polygon where all sides are the same length.

    Note: Only available with @pixi/graphics-extras.

    method

    PIXI.Graphics#drawRegularPolygon

    Parameters

    • x: number

      X position

    • y: number

      Y position

    • radius: number

      Polygon radius

    • sides: number

      Minimum value is 3

    • rotation: number

      Starting rotation values in radians..

    Returns Graphics

drawRoundedRect

  • drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): Graphics
  • Draw a rectangle shape with rounded/beveled corners.

    Parameters

    • x: number

      The X coord of the top-left of the rectangle

    • y: number

      The Y coord of the top-left of the rectangle

    • width: number

      The width of the rectangle

    • height: number

      The height of the rectangle

    • radius: number

      Radius of the rectangle corners

    Returns Graphics

    This Graphics object. Good for chaining method calls

drawShape

  • drawShape(shape: Rectangle | Polygon | Circle | Ellipse | RoundedRectangle): Graphics
  • Draw any shape.

    Parameters

    • shape: Rectangle | Polygon | Circle | Ellipse | RoundedRectangle

      Shape to draw

    Returns Graphics

    This Graphics object. Good for chaining method calls

drawStar

  • drawStar(x: number, y: number, points: number, radius: number, innerRadius?: number, rotation?: number): Graphics
  • Draw a star shape with an arbitrary number of points.

    Parameters

    • x: number

      Center X position of the star

    • y: number

      Center Y position of the star

    • points: number

      The number of points of the star, must be > 1

    • radius: number

      The outer radius of the star

    • Optional innerRadius: number
    • Optional rotation: number

    Returns Graphics

    This Graphics object. Good for chaining method calls

drawTorus

  • drawTorus(x: number, y: number, innerRadius: number, outerRadius: number, startArc?: number, endArc?: number): Graphics
  • Draw a torus shape, like a donut. Can be used for something like a circle loader.

    Note: Only available with @pixi/graphics-extras.

    method

    PIXI.Graphics#drawTorus

    Parameters

    • x: number

      X position

    • y: number

      Y position

    • innerRadius: number

      Inner circle radius

    • outerRadius: number

      Outer circle radius

    • Optional startArc: number
    • Optional endArc: number

    Returns Graphics

emit

  • emit(event: string | symbol, ...args: any[]): boolean
  • Calls each of the listeners registered for a given event.

    Parameters

    • event: string | symbol

      The event name.

    • Rest ...args: any[]

      Arguments that are passed to registered listeners

    Returns boolean

    true if the event had listeners, else false.

enableTempParent

  • enableTempParent(): DisplayObject
  • Used in Renderer, cacheAsBitmap and other places where you call an updateTransform on root

    const cacheParent = elem.enableTempParent();
    elem.updateTransform();
    elem.disableTempParent(cacheParent);
    

    Returns DisplayObject

    current parent

endFill

  • endFill(): Graphics
  • Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.

    Returns Graphics

    This Graphics object. Good for chaining method calls

endHole

  • endHole(): Graphics
  • End adding holes to the last draw shape

    Returns Graphics

    Returns itself.

eventNames

  • eventNames(): (string | symbol)[]
  • Return an array listing the events for which the emitter has registered listeners.

    Returns (string | symbol)[]

Protected finishPoly

  • finishPoly(): void
  • Finish the polygon object.

    Returns void

getBounds

  • getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle
  • Retrieves the bounds of the displayObject as a rectangle object.

    Parameters

    • Optional skipUpdate: boolean
    • Optional rect: Rectangle

    Returns Rectangle

    The rectangular bounding area.

getChildAt

  • getChildAt(index: number): DisplayObject
  • Returns the child at the specified index

    Parameters

    • index: number

      The index to get the child at

    Returns DisplayObject

    The child at the given index, if any.

getChildByName

  • getChildByName(name: string, deep?: boolean): DisplayObject
  • Returns the display object in the container.

    Recursive searches are done in a preorder traversal.

    method

    getChildByName

    memberof

    PIXI.Container#

    Parameters

    • name: string

      Instance name.

    • Optional deep: boolean

    Returns DisplayObject

    The child with the specified name.

getChildIndex

  • getChildIndex(child: DisplayObject): number
  • Returns the index position of a child DisplayObject instance

    Parameters

    • child: DisplayObject

      The DisplayObject instance to identify

    Returns number

    The index position of the child display object to identify

getGlobalPosition

  • Returns the global position of the displayObject. Does not depend on object scale, rotation and pivot.

    method

    getGlobalPosition

    memberof

    PIXI.DisplayObject#

    Parameters

    • Optional point: PixiPoint
    • Optional skipUpdate: boolean

    Returns PixiPoint

    The updated point.

getLocalBounds

  • getLocalBounds(rect?: Rectangle, skipChildrenUpdate?: boolean): Rectangle
  • Retrieves the local bounds of the displayObject as a rectangle object.

    Parameters

    • Optional rect: Rectangle
    • Optional skipChildrenUpdate: boolean

    Returns Rectangle

    The rectangular bounding area.

isFastRect

  • isFastRect(): boolean
  • True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor.

    Returns boolean

    True if only 1 rect.

lineStyle

  • lineStyle(width?: number, color?: number, alpha?: number, alignment?: number, native?: boolean): Graphics
  • lineStyle(width?: number, color?: number, alpha?: number, alignment?: number, native?: boolean): Graphics
  • Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.

    method

    PIXI.Graphics#lineStyle

    Parameters

    • Optional width: number
    • Optional color: number
    • Optional alpha: number
    • Optional alignment: number
    • Optional native: boolean

    Returns Graphics

    This Graphics object. Good for chaining method calls

  • Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.

    method

    PIXI.Graphics#lineStyle

    Parameters

    • Optional width: number
    • Optional color: number
    • Optional alpha: number
    • Optional alignment: number
    • Optional native: boolean

    Returns Graphics

    This Graphics object. Good for chaining method calls

lineTextureStyle

  • lineTextureStyle(options?: { alignment?: number; alpha?: number; cap?: LINE_CAP; color?: number; join?: LINE_JOIN; matrix?: Matrix; miterLimit?: number; native?: boolean; texture?: Texture; width?: number }): Graphics
  • Like line style but support texture for line fill.

    Parameters

    • Optional options: { alignment?: number; alpha?: number; cap?: LINE_CAP; color?: number; join?: LINE_JOIN; matrix?: Matrix; miterLimit?: number; native?: boolean; texture?: Texture; width?: number }
      • Optional alignment?: number
      • Optional alpha?: number
      • Optional cap?: LINE_CAP
      • Optional color?: number
      • Optional join?: LINE_JOIN
      • Optional matrix?: Matrix
      • Optional miterLimit?: number
      • Optional native?: boolean
      • Optional texture?: Texture
      • Optional width?: number

    Returns Graphics

    This Graphics object. Good for chaining method calls

lineTo

  • lineTo(x: number, y: number): Graphics
  • Draws a line using the current line style from the current drawing position to (x, y); The current drawing position is then set to (x, y).

    Parameters

    • x: number

      the X coordinate to draw to

    • y: number

      the Y coordinate to draw to

    Returns Graphics

    This Graphics object. Good for chaining method calls

listenerCount

  • listenerCount(event: string | symbol): number
  • Return the number of listeners listening to a given event.

    Parameters

    • event: string | symbol

      The event name.

    Returns number

listeners

  • listeners(event: string | symbol): Function[]
  • Return the listeners registered for a given event.

    Parameters

    • event: string | symbol

      The event name.

    Returns Function[]

moveTo

  • moveTo(x: number, y: number): Graphics
  • Moves the current drawing position to x, y.

    Parameters

    • x: number

      the X coordinate to move to

    • y: number

      the Y coordinate to move to

    Returns Graphics

    This Graphics object. Good for chaining method calls

off

  • off(event: string, fn?: Function, context?: any): PixiGraphics
  • Parameters

    • event: string
    • Optional fn: Function
    • Optional context: any

    Returns PixiGraphics

on

  • on(event: "added" | "removed", fn: (displayObject: DisplayObject) => void, context?: any): PixiGraphics
  • on(event: string, fn: Function, context?: any): PixiGraphics
  • Parameters

    • event: "added" | "removed"
    • fn: (displayObject: DisplayObject) => void
        • (displayObject: DisplayObject): void
        • Parameters

          • displayObject: DisplayObject

          Returns void

    • Optional context: any

    Returns PixiGraphics

  • Parameters

    • event: string
    • fn: Function
    • Optional context: any

    Returns PixiGraphics

Protected onChildrenChange

  • onChildrenChange(): void
  • Overridable method that can be used by Container subclasses whenever the children array is modified

    Returns void

once

  • once(event: "added" | "removed", fn: (displayObject: DisplayObject) => void, context?: any): PixiGraphics
  • once(event: string, fn: Function, context?: any): PixiGraphics
  • Parameters

    • event: "added" | "removed"
    • fn: (displayObject: DisplayObject) => void
        • (displayObject: DisplayObject): void
        • Parameters

          • displayObject: DisplayObject

          Returns void

    • Optional context: any

    Returns PixiGraphics

  • Parameters

    • event: string
    • fn: Function
    • Optional context: any

    Returns PixiGraphics

quadraticCurveTo

  • quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics
  • Calculate the points for a quadratic bezier curve and then draws it. Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c

    Parameters

    • cpX: number

      Control point x

    • cpY: number

      Control point y

    • toX: number

      Destination point x

    • toY: number

      Destination point y

    Returns Graphics

    This Graphics object. Good for chaining method calls

removeAllListeners

  • removeAllListeners(event?: InteractionEventTypes): PixiGraphics
  • removeAllListeners(event?: string | symbol): PixiGraphics
  • Parameters

    • Optional event: InteractionEventTypes

    Returns PixiGraphics

  • Parameters

    • Optional event: string | symbol

    Returns PixiGraphics

removeChild

  • removeChild<TChildren>(...children: TChildren): TChildren[0]
  • Removes one or more children from the container.

    Type parameters

    • TChildren: DisplayObject[]

    Parameters

    • Rest ...children: TChildren

      The DisplayObject(s) to remove

    Returns TChildren[0]

    The first child that was removed.

removeChildAt

  • removeChildAt(index: number): DisplayObject
  • Removes a child from the specified index position.

    Parameters

    • index: number

      The index to get the child from

    Returns DisplayObject

    The child that was removed.

removeChildren

  • removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[]
  • Removes all children from this container that are within the begin and end indexes.

    Parameters

    • Optional beginIndex: number
    • Optional endIndex: number

    Returns DisplayObject[]

    List of removed children

removeListener

  • removeListener(event: InteractionEventTypes, fn?: (event: InteractionEvent) => void, context?: any): PixiGraphics
  • removeListener(event: string | symbol, fn?: Function, context?: any): PixiGraphics
  • Parameters

    • event: InteractionEventTypes
    • Optional fn: (event: InteractionEvent) => void
        • (event: InteractionEvent): void
        • Parameters

          • event: InteractionEvent

          Returns void

    • Optional context: any

    Returns PixiGraphics

  • Parameters

    • event: string | symbol
    • Optional fn: Function
    • Optional context: any

    Returns PixiGraphics

render

  • render(renderer: Renderer): void
  • Renders the object using the WebGL renderer

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

Protected renderAdvanced

  • renderAdvanced(renderer: Renderer): void
  • Render the object using the WebGL renderer and advanced features.

    Parameters

    • renderer: Renderer

      The renderer

    Returns void

setChildIndex

  • setChildIndex(child: DisplayObject, index: number): void
  • Changes the position of an existing child in the display object container

    Parameters

    • child: DisplayObject

      The child DisplayObject instance for which you want to change the index number

    • index: number

      The resulting index number for the child display object

    Returns void

setMatrix

  • setMatrix(matrix: Matrix): Graphics
  • Apply a matrix to the positional data.

    Parameters

    • matrix: Matrix

      Matrix to use for transform current shape.

    Returns Graphics

    Returns itself.

setParent

  • setParent(container: Container): Container
  • Set the parent Container of this DisplayObject.

    Parameters

    • container: Container

      The Container to add this DisplayObject to.

    Returns Container

    The Container that this DisplayObject was added to.

setTransform

  • setTransform(x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, skewX?: number, skewY?: number, pivotX?: number, pivotY?: number): DisplayObject
  • Convenience function to set the position, scale, skew and pivot at once.

    Parameters

    • Optional x: number
    • Optional y: number
    • Optional scaleX: number
    • Optional scaleY: number
    • Optional rotation: number
    • Optional skewX: number
    • Optional skewY: number
    • Optional pivotX: number
    • Optional pivotY: number

    Returns DisplayObject

    The DisplayObject instance

sortChildren

  • sortChildren(): void
  • Sorts children by zIndex. Previous order is mantained for 2 children with the same zIndex.

    Returns void

Protected startPoly

  • startPoly(): void
  • Start a polygon object internally

    Returns void

swapChildren

  • swapChildren(child: DisplayObject, child2: DisplayObject): void
  • Swaps the position of 2 Display Objects within this container.

    Parameters

    • child: DisplayObject

      First display object to swap

    • child2: DisplayObject

      Second display object to swap

    Returns void

toGlobal

  • Calculates the global position of the display object.

    Parameters

    • position: IPointData

      The world origin to calculate from.

    • Optional point: PixiPoint
    • Optional skipUpdate: boolean

    Returns PixiPoint

    A point object representing the position of this object.

toLocal

  • toLocal(position: IPointData, from?: DisplayObject, point?: PixiPoint, skipUpdate?: boolean): PixiPoint
  • Calculates the local position of the display object relative to another point.

    Parameters

    • position: IPointData

      The world origin to calculate from.

    • Optional from: DisplayObject
    • Optional point: PixiPoint
    • Optional skipUpdate: boolean

    Returns PixiPoint

    A point object representing the position of this object

updateTransform

  • updateTransform(): void
  • Updates the transform on all children of this container for rendering

    Returns void

Static mixin

  • mixin(source: any): void
  • Mixes all enumerable properties and methods from a source object to DisplayObject.

    Parameters

    • source: any

      The source of properties and methods to mix in.

    Returns void

Generated using TypeDoc