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 600)
-
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 571)
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 42)
-
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 55)
-
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 405)
-
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 491)
-
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 276)
-
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 633)
-
contains(child) → {Boolean}
-
Determines whether the specified display object is a child of the DisplayObjectContainer instance or the instance itself.
Parameters
Name Type Description child
DisplayObject -
Returns
Boolean -- Inherited From
- Source code: pixi/display/DisplayObjectContainer.js (Line 449)
-
destroyCachedSprite()
-
Destroys a previous cached sprite.
- Source code: pixi/primitives/Graphics.js (Line 1173)
-
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 565)
-
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 581)
-
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 598)
-
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 534)
-
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 550)
-
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 1184)
-
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 519)
-
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 654)
-
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 848)
-
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 153)
-
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 112)
-
getLocalBounds() → {Rectangle}
-
Retrieves the non-global local bounds of the graphic shape as a rectangle. The calculation takes all visible children into consideration.
Returns
Rectangle -The rectangular bounding area
- Source code: pixi/primitives/Graphics.js (Line 936)
-
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 149)
-
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 198)
-
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 183)
-
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-cParameters
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 221)
-
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 171)
-
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 191)
-
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 213)
-
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 132)
-
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 85)
-
updateLocalBounds()
-
Update the bounds of the object
- Source code: pixi/primitives/Graphics.js (Line 997)