LesserPanda

Class: Graphics

Graphics

The Graphics class contains methods used to draw primitive shapes such as lines, circles and
rectangles to the display, and to color and fill them.

new Graphics()

Source:

Extends

Members

alpha :Number

The opacity of the node.

Type:
Inherited From:
Source:

blendMode :number

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

Type:
  • number
Default Value:
  • BLEND_MODES.NORMAL;
Source:
See:
  • BLEND_MODES

boundsPadding :number

The bounds' padding used for bounds calculation.

Type:
  • number
Source:

cacheAsBitmap :boolean

Set this to true if you want this display object to be cached as a bitmap.
This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects.
To remove simply set this property to 'false'

Type:
  • boolean
Inherited From:
Source:

<readonly> children :Array.<Node>

The list of children added to this node.

Type:
Inherited From:
Source:

fillAlpha :number

The alpha value used when filling the Graphics object.

Type:
  • number
Default Value:
  • 1
Source:

filterArea :Rectangle

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

Type:
Inherited From:
Source:

filters :Array.<AbstractFilter>

Sets the filters for this Node.

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

height :Number

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

Type:
Inherited From:
Source:

isMask :boolean

Whether this shape is being used as a mask.

Type:
  • boolean
Source:

lineColor :string

The color of any lines drawn.

Type:
  • string
Default Value:
  • 0
Source:

lineWidth :number

The width (thickness) of any lines drawn.

Type:
  • number
Default Value:
  • 0
Source:

mask :Graphics|Sprite

Sets a mask for this Node. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
A regular mask must be a Graphics or a Sprite object. This allows for much faster masking in canvas as it utilises shape clipping.
To remove a mask, set this property to null.

Type:
Inherited From:
Source:
To Do:
  • For the moment, CanvasRenderer doesn't support Sprite as mask.

<readonly> parent :Node

The node that contains this one.

Type:
Inherited From:
Source:

pivot :Vector

The pivot point of the node that it rotates around

Type:
Inherited From:
Source:

position :Vector

The coordinate of the node relative to the local coordinates of the parent.

Type:
Inherited From:
Source:

renderable :Boolean

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

Type:
  • Boolean
Inherited From:
Source:

rotation :Number

The rotation of the node in radians.

Type:
Inherited From:
Source:

scale :Vector

The scale factor of the node.

Type:
Inherited From:
Source:

skew :Vector

The skew factor for the node in radians.

Type:
Inherited From:
Source:

system :SystemGfx

Sets the gfx system this node will be rendered with

Type:
Inherited From:
Source:

tint :number

The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.

Type:
  • number
Default Value:
  • 0xFFFFFF
Source:

visible :Boolean

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

Type:
  • Boolean
Inherited From:
Source:

width :Number

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

Type:
Inherited From:
Source:

<readonly> worldAlpha :Number

The multiplied alpha of the node

Type:
Inherited From:
Source:

<readonly> worldTransform :Matrix

Current transform of the node based on world (parent) factors

Type:
Inherited From:
Source:

<readonly> worldVisible :Boolean

Indicates if this node is globally visible.

Type:
  • Boolean
Inherited From:
Source:

x :Number

The position of this Node on the x axis relative to the local coordinates of the parent.

Type:
Inherited From:
Source:

y :Number

The position of this Node on the y axis relative to the local coordinates of the parent.

Type:
Inherited From:
Source:

Methods

addListener()

Inherited From:
Source:

arc(cx, cy, radius, startAngle, endAngle, anticlockwise)

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.
Source:
Returns:

Self for chaining

Type
Graphics

arcTo(x1, y1, x2, y2, radius)

The arcTo() method creates an arc/curve between two tangents on the canvas.

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

Parameters:
Name Type Description
x1 number

The x-coordinate of the beginning of the arc
y1 number

The y-coordinate of the beginning 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
Source:
Returns:

Self for chaining

Type
Graphics

beginFill(color, alpha)

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
Source:
Returns:

Self for chaining

Type
Graphics

bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY)

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
Source:
Returns:

Self for chaining

Type
Graphics

clear()

Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.

Source:
Returns:

Self for chaining

Type
Graphics

clone()

Creates a new Graphics object with the same values as this one.
Note that the only the properties of the object are cloned, not its transform (position,scale,etc)

Source:
Returns:

A new graphics instance

Type
Graphics

containsPoint(point)

Tests if a point is inside this graphics object

Parameters:
Name Type Description
point Point

the point to test
Source:
Returns:

the result of the test

Type
boolean

destroy()

Destroys the Graphics object.

Source:

drawCircle(x, y, radius)

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
radius number

The radius of the circle
Source:
Returns:

Self for chaining

Type
Graphics

drawEllipse(x, y, width, height)

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
Source:
Returns:

Self for chaining

Type
Graphics

drawPolygon(path)

Draws a polygon using the given path.

Parameters:
Name Type Description
path Array.<number> | Array.<Point>

The path data used to construct the polygon.
Source:
Returns:

Self for chaining

Type
Graphics

drawRect(x, y, width, height)

Draw a rectangle

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
Source:
Returns:

Self for chaining

Type
Graphics

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
Source:
Returns:

Self for chaining

Type
Graphics

drawShape(shape)

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.
Source:
Returns:

The generated GraphicsData object.

Type
GraphicsData

emit(event, a1, a2, a3, a4, a5)

Emit an event to all registered event listeners.

Parameters:
Name Type Description
event string

The name of the event.
a1 *

First param
a2 *

Second param
a3 *

Third param
a4 *

Forth param
a5 *

Fifth param
Inherited From:
Source:
Returns:

Indication if we've emitted an event.

Type
boolean

endFill()

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

Source:
Returns:

Self for chaining

Type
Graphics

generateTexture(resolution, scaleMode)

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 Description
resolution number

The resolution of the texture being generated
scaleMode number

Should be one of the scaleMode consts
Source:
Returns:

a texture of the graphics object

Type
Texture

getBounds( [matrix])

Retrieves the bounds of the graphic shape as a rectangle object

Parameters:
Name Type Argument Description
matrix Matrix <optional>

The world transform matrix to use, defaults to this
object's worldTransform.
Source:
Returns:

the rectangular bounding area

Type
Rectangle

lineStyle(lineWidth, color, alpha)

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
Source:
Returns:

Self for chaining

Type
Graphics

lineTo(x, y)

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
Source:
Returns:

Self for chaining

Type
Graphics

listeners(event, exists)

Return a list of assigned event listeners.

Parameters:
Name Type Description
event string

The events that should be listed.
exists boolean

We only need to know if there are listeners.
Inherited From:
Source:
Returns:

Listener list

Type
array | boolean

moveTo(x, y)

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
Source:
Returns:

Self for chaining

Type
Graphics

off()

Inherited From:
Source:

on(event, fn, context)

Register a new EventListener for the given event.

Parameters:
Name Type Description
event string

Name of the event.
fn functon

Callback function.
context Mixed

The context of the function.
Inherited From:
Source:
Returns:

Self for chaining

Type
EventEmitter

once(event, fn, context)

Add an EventListener that's only called once.

Parameters:
Name Type Description
event string

Name of the event.
fn function

Callback function.
context Mixed

The context of the function.
Inherited From:
Source:
Returns:

Self for chaining

Type
EventEmitter

quadraticCurveTo(cpX, cpY, toX, toY)

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
Source:
Returns:

Self for chaining

Type
Graphics

removeAllListeners(event)

Remove all listeners or only the listeners for the specified event.

Parameters:
Name Type Description
event string

The event want to remove all listeners for.
Inherited From:
Source:
Returns:

Self for chaining

Type
EventEmitter

removeListener(event, fn, context, once)

Remove event listeners.

Parameters:
Name Type Description
event string

The event we want to remove.
fn function

The listener that we need to find.
context Mixed

Only remove listeners matching this context.
once boolean

Only remove once listeners.
Inherited From:
Source:
Returns:

Self for chaining

Type
EventEmitter

setTransform( [x] [, y] [, scaleX] [, scaleY] [, rotation] [, skewX] [, skewY] [, pivotX] [, pivotY])

Convenience function to set the postion, scale, skew and pivot at once.

Parameters:
Name Type Argument Default Description
x Number <optional>
 0

The X position
y Number <optional>
 0

The Y position
scaleX Number <optional>
 1

The X scale value
scaleY Number <optional>
 1

The Y scale value
rotation Number <optional>
 0

The rotation
skewX Number <optional>
 0

The X skew value
skewY Number <optional>
 0

The Y skew value
pivotX Number <optional>
 0

The X pivot value
pivotY Number <optional>
 0

The Y pivot value
Inherited From:
Source:
Returns:

This for chaining.

Type
Node

toGlobal(position)

Calculates the global position of this node

Parameters:
Name Type Description
position Vector

The world origin to calculate from
Inherited From:
Source:
Returns:

A point representing the position of this node

Type
Vector

toLocal(position [, from] [, point])

Calculates the local position of this node relative to another point

Parameters:
Name Type Argument Description
position Vector

The world origin to calculate from
from Node <optional>

The Node to calculate the global position from
point Vector <optional>

A Point in which to store the value, optional (otherwise will create a new Point)
Inherited From:
Source:
Returns:

A point representing the position of this node

Type
Vector

updateLocalBounds()

Update the bounds of the object

Source: