new Graphics()
The Graphics class contains methods used to draw primitive shapes such as lines, circles and rectangles to the display, and color and fill them.
- Source code: pixi/primitives/Graphics.js (Line 5)
Extends
Public Properties
-
blendMode : number
-
The blend mode to be applied to the graphic shape. Apply a value of PIXI.blendModes.NORMAL to reset the blend mode.
- Default Value
- PIXI.blendModes.NORMAL;
- Source code: pixi/primitives/Graphics.js (Line 61)
-
boundsPadding : number
-
The bounds' padding used for bounds calculation.
- Source code: pixi/primitives/Graphics.js (Line 96)
-
[readonly] children : Array.<DisplayObject>
-
[read-only] The array of children of this container.
Type
- Array.<DisplayObject>
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 17)
-
fillAlpha : number
-
The alpha value used when filling the Graphics object.
- Source code: pixi/primitives/Graphics.js (Line 18)
-
height : number
-
The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 72)
-
ignoreChildInput : boolean
-
If
ignoreChildInput
isfalse
it will allow this objects children to be considered as valid for Input events.If this property is
true
then the children will not be considered as valid for Input events.Note that this property isn't recursive: only immediate children are influenced, it doesn't scan further down.
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 26)
-
isMask : boolean
-
Whether this shape is being used as a mask.
- Source code: pixi/primitives/Graphics.js (Line 88)
-
lineColor : string
-
The color of any lines drawn.
- Default Value
- 0
- Source code: pixi/primitives/Graphics.js (Line 34)
-
lineWidth : number
-
The width (thickness) of any lines drawn.
- Source code: pixi/primitives/Graphics.js (Line 26)
-
tint : number
-
The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
- Default Value
- 0xFFFFFF
- Source code: pixi/primitives/Graphics.js (Line 52)
-
width : number
-
The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 43)
Public Methods
-
addChild(child) → {DisplayObject}
-
Adds a child to the container.
Parameters
Name Type Description child
DisplayObject The DisplayObject to add to the container
Returns
The child that was added.
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 102)
-
addChildAt(child, index) → {DisplayObject}
-
Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
Parameters
Name Type Description child
DisplayObject The child to add
index
Number The index to place the child in
Returns
The child that was added.
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 114)
-
arc(cx, cy, radius, startAngle, endAngle, anticlockwise, segments) → {PIXI.Graphics}
-
The arc method creates an arc/curve (used to create circles, or parts of circles).
Parameters
Name Type Description 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
anticlockwise
Boolean Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
segments
Number Optional. The number of segments to use when calculating the arc. The default is 40. If you need more fidelity use a higher number.
Returns
- Source code: pixi/primitives/Graphics.js (Line 395)
-
beginFill(color, alpha) → {PIXI.Graphics}
-
Specifies a simple one-color fill that subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) use when drawing.
Parameters
Name Type Description color
Number the color of the fill
alpha
Number the alpha of the fill
Returns
- Source code: pixi/primitives/Graphics.js (Line 481)
-
bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY) → {PIXI.Graphics}
-
Calculate the points for a bezier curve and then draws it.
Parameters
Name Type Description 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
- Source code: pixi/primitives/Graphics.js (Line 266)
-
clear() → {PIXI.Graphics}
-
Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
Returns
- Source code: pixi/primitives/Graphics.js (Line 623)
-
destroyCachedSprite()
-
Destroys a previous cached sprite.
- Source code: pixi/primitives/Graphics.js (Line 1136)
-
drawCircle(x, y, diameter) → {PIXI.Graphics}
-
Draws a circle.
Parameters
Name Type Description x
Number The X coordinate of the center of the circle
y
Number The Y coordinate of the center of the circle
diameter
Number The diameter of the circle
Returns
- Source code: pixi/primitives/Graphics.js (Line 555)
-
drawEllipse(x, y, width, height) → {PIXI.Graphics}
-
Draws an ellipse.
Parameters
Name Type Description 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
- Source code: pixi/primitives/Graphics.js (Line 571)
-
drawPolygon(path) → {PIXI.Graphics}
-
Draws a polygon using the given path.
Parameters
Name Type Description path
Array | PhaserPolygon The path data used to construct the polygon. Can either be an array of points or a Phaser.Polygon object.
Returns
- Source code: pixi/primitives/Graphics.js (Line 588)
-
drawRect(x, y, width, height) → {PIXI.Graphics}
-
Parameters
Name Type Description 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
- Source code: pixi/primitives/Graphics.js (Line 524)
-
drawRoundedRect(x, y, width, height, radius)
-
Parameters
Name Type Description 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. In WebGL this must be a value between 0 and 9.
- Source code: pixi/primitives/Graphics.js (Line 540)
-
drawShape(shape) → {PIXI.GraphicsData}
-
Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
Parameters
Name Type Description shape
Circle | Rectangle | Ellipse | Line | Polygon The Shape object to draw.
Returns
The generated GraphicsData object.
- Source code: pixi/primitives/Graphics.js (Line 1147)
-
endFill() → {PIXI.Graphics}
-
Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
Returns
- Source code: pixi/primitives/Graphics.js (Line 509)
-
generateTexture(resolution, scaleMode, padding) → {PIXI.Texture}
-
Useful function that returns a texture of the graphics object that can then be used to create sprites This can be quite useful if your geometry is complicated and needs to be reused multiple times.
Parameters
Name Type Argument Default Description resolution
Number <optional>
1 The resolution of the texture being generated
scaleMode
Number <optional>
0 Should be one of the PIXI.scaleMode consts
padding
Number <optional>
0 Add optional extra padding to the generated texture (default 0)
Returns
a texture of the graphics object
- Source code: pixi/primitives/Graphics.js (Line 643)
-
getBounds() → {Rectangle}
-
Retrieves the bounds of the graphic shape as a rectangle object
Returns
Rectangle -the rectangular bounding area
- Source code: pixi/primitives/Graphics.js (Line 837)
-
getChildAt(index) → {DisplayObject}
-
Returns the child at the specified index
Parameters
Name Type Description index
Number The index to get the child from
Returns
The child at the given index, if any.
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 205)
-
getChildIndex(child) → {Number}
-
Returns the index position of a child DisplayObject instance
Parameters
Name Type Description child
DisplayObject The DisplayObject instance to identify
Returns
Number -The index position of the child display object to identify
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 170)
-
getLocalBounds() → {Rectangle}
-
Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. The calculation takes all visible children into consideration.
Returns
Rectangle -The rectangular bounding area
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 383)
-
lineStyle(lineWidth, color, alpha) → {PIXI.Graphics}
-
Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
Parameters
Name Type Description lineWidth
Number width of the line to draw, will update the objects stored style
color
Number color of the line to draw, will update the objects stored style
alpha
Number alpha of the line to draw, will update the objects stored style
Returns
- Source code: pixi/primitives/Graphics.js (Line 139)
-
lineTo(x, y) → {PIXI.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
Name Type Description x
Number the X coordinate to draw to
y
Number the Y coordinate to draw to
Returns
- Source code: pixi/primitives/Graphics.js (Line 188)
-
moveTo(x, y) → {PIXI.Graphics}
-
Moves the current drawing position to x, y.
Parameters
Name Type Description x
Number the X coordinate to move to
y
Number the Y coordinate to move to
Returns
- Source code: pixi/primitives/Graphics.js (Line 173)
-
quadraticCurveTo(cpX, cpY, toX, toY) → {PIXI.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
Name Type Description cpX
Number Control point x
cpY
Number Control point y
toX
Number Destination point x
toY
Number Destination point y
Returns
- Source code: pixi/primitives/Graphics.js (Line 211)
-
removeChild(child) → {DisplayObject}
-
Removes a child from the container.
Parameters
Name Type Description child
DisplayObject The DisplayObject to remove
Returns
The child that was removed.
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 222)
-
removeChildAt(index) → {DisplayObject}
-
Removes a child from the specified index position.
Parameters
Name Type Description index
Number The index to get the child from
Returns
The child that was removed.
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 237)
-
removeChildren(beginIndex, endIndex)
-
Removes all children from this container that are within the begin and end indexes.
Parameters
Name Type Description beginIndex
Number The beginning position. Default value is 0.
endIndex
Number The ending position. Default value is size of the container.
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 255)
-
removeStageReference()
-
Removes the current stage reference from the container and all of its children.
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 428)
-
setChildIndex(child, index)
-
Changes the position of an existing child in the display object container
Parameters
Name Type Description 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
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 187)
-
setStageReference(stage)
-
Sets the containers Stage reference. This is the Stage that this object, and all of its children, is connected to.
Parameters
Name Type Description stage
Stage the stage that the container will have as its current stage reference
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 412)
-
swapChildren(child, child2)
-
Swaps the position of 2 Display Objects within this container.
Parameters
Name Type Description child
DisplayObject -
child2
DisplayObject -
- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 145)
-
updateLocalBounds()
-
Update the bounds of the object
- Source code: pixi/primitives/Graphics.js (Line 960)