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 - pixi/primitives/Graphics.js, line 5
Extends
Members
-
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 - pixi/primitives/Graphics.js, line 61
-
boundsPadding :Number
-
The bounds' padding used for bounds calculation.
- Source - 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 - pixi/display/DisplayObjectContainer.js, line 17
-
fillAlpha :Number
-
The alpha value used when filling the Graphics object.
- Source - 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 - 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 - pixi/display/DisplayObjectContainer.js, line 26
-
isMask :Boolean
-
Whether this shape is being used as a mask.
- Source - pixi/primitives/Graphics.js, line 88
-
lineColor :String
-
The color of any lines drawn.
- Default Value:
- 0
- Source - pixi/primitives/Graphics.js, line 34
-
lineWidth :Number
-
The width (thickness) of any lines drawn.
- Source - 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 - 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 - pixi/display/DisplayObjectContainer.js, line 43
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 - 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 - 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 - 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 - 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 - 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 - pixi/primitives/Graphics.js, line 623
-
destroyCachedSprite()
-
Destroys a previous cached sprite.
- Source - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - pixi/display/DisplayObjectContainer.js, line 255
-
removeStageReference()
-
Removes the current stage reference from the container and all of its children.
- Inherited From:
- Source - 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 - 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 - 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 - pixi/display/DisplayObjectContainer.js, line 145
-
updateLocalBounds()
-
Update the bounds of the object
- Source - pixi/primitives/Graphics.js, line 960