The Graphics class contains methods used to draw primitive shapes such as lines, circles and rectangles to the display, and color and fill them.
The blend mode to be applied to the graphic shape. Apply a value of PIXI.blendModes.NORMAL to reset the blend mode.
The bounds' padding used for bounds calculation.
[read-only] The array of children of this container.
The alpha value used when filling the Graphics object.
The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set
If ignoreChildInput
is false
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.
Whether this shape is being used as a mask.
The color of any lines drawn.
The width (thickness) of any lines drawn.
The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set
Adds a child to the container.
Name | Type | Description |
---|---|---|
child | DisplayObject | The DisplayObject to add to the container |
The child that was added.
Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
Name | Type | Description |
---|---|---|
child | DisplayObject | The child to add |
index | Number | The index to place the child in |
The child that was added.
The arc method creates an arc/curve (used to create circles, or parts of circles).
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. |
Specifies a simple one-color fill that subsequent calls to other Graphics methods
(such as lineTo() or drawCircle()) use when drawing.
Name | Type | Description |
---|---|---|
color | Number | the color of the fill |
alpha | Number | the alpha of the fill |
Calculate the points for a bezier curve and then draws it.
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 |
Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
Determines whether the specified display object is a child of the DisplayObjectContainer instance or the instance itself.
Name | Type | Description |
---|---|---|
child | DisplayObject | - |
Destroys a previous cached sprite.
Draws a circle.
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 |
Draws an ellipse.
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 |
Draws a polygon using the given path.
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. |
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 |
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. |
Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
Name | Type | Description |
---|---|---|
shape | Circle | Rectangle | Ellipse | Line | Polygon | The Shape object to draw. |
The generated GraphicsData object.
Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
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.
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) |
a texture of the graphics object
Retrieves the bounds of the graphic shape as a rectangle object
the rectangular bounding area
Returns the child at the specified index
Name | Type | Description |
---|---|---|
index | Number | The index to get the child from |
The child at the given index, if any.
Returns the index position of a child DisplayObject instance
Name | Type | Description |
---|---|---|
child | DisplayObject | The DisplayObject instance to identify |
The index position of the child display object to identify
Retrieves the non-global local bounds of the graphic shape as a rectangle. The calculation takes all visible children into consideration.
The rectangular bounding area
Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
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 |
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).
Name | Type | Description |
---|---|---|
x | Number | the X coordinate to draw to |
y | Number | the Y coordinate to draw to |
Moves the current drawing position to x, y.
Name | Type | Description |
---|---|---|
x | Number | the X coordinate to move to |
y | Number | the Y coordinate to move to |
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
Name | Type | Description |
---|---|---|
cpX | Number | Control point x |
cpY | Number | Control point y |
toX | Number | Destination point x |
toY | Number | Destination point y |
Removes a child from the container.
Name | Type | Description |
---|---|---|
child | DisplayObject | The DisplayObject to remove |
The child that was removed.
Removes a child from the specified index position.
Name | Type | Description |
---|---|---|
index | Number | The index to get the child from |
The child that was removed.
Removes all children from this container that are within the begin and end indexes.
Name | Type | Description |
---|---|---|
beginIndex | Number | The beginning position. Default value is 0. |
endIndex | Number | The ending position. Default value is size of the container. |
Changes the position of an existing child in the display object container
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 |
Swaps the position of 2 Display Objects within this container.
Name | Type | Description |
---|---|---|
child | DisplayObject | - |
child2 | DisplayObject | - |
Update the bounds of the object
© 2016 Richard Davey, Photon Storm Ltd.
Licensed under the MIT License.
http://phaser.io/docs/2.6.2/PIXI.Graphics.html