pixi-tween

Class: TweenPath

.tween~ TweenPath

Class that allows drawing a path using PIXI.Graphics, which can then be followed and used as a tween

new TweenPath()

TweenPath.js, line 13

Members

dirtyboolean

Used to detect if the graphics object has changed.
If this is set to true then the graphics object will be recalculated.

readonlylengthnumber

The number of points along the path

polygonPIXI.Polygon

PIXI object to use as the path

Methods

arc(cx, cy, radius, startAngle, endAngle, anticlockwise){PIXI.tween.TweenPath}

TweenPath.js, line 223

The arc method creates an arc/curve (used to create circles, or parts of circles).

Name Type Default 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 false optional

Specifies whether the drawing should be
counter-clockwise or clockwise. False is default, and indicates clockwise, while true
indicates counter-clockwise.
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

arcTo(x1, y1, x2, y2, radius){PIXI.tween.TweenPath}

TweenPath.js, line 242

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

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

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
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY){PIXI.tween.TweenPath}

TweenPath.js, line 260

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
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

clear(){PIXI.tween.TweenPath}

TweenPath.js, line 53

Clear the path

Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

distanceBetween(num1, num2){number}

TweenPath.js, line 70

Finds the distance between two points

Name Type Description
num1 number

First point
num2 number

Second point
Returns:
Type Description
number
  • Distance in pixels

drawCircle(x, y, radius){PIXI.tween.TweenPath}

TweenPath.js, line 275

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

The radius of the circle
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

drawEllipse(x, y, width, height){PIXI.tween.TweenPath}

TweenPath.js, line 291

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
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

drawPolygon(path){PIXI.tween.TweenPath}

TweenPath.js, line 337

Draws a polygon using the given path.

Name Type Description
path Array.<number> | Array.<PIXI.Point> | PIXI.Polygon

The path data used to construct the polygon.
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

drawRect(x, y, width, height){PIXI.tween.TweenPath}

TweenPath.js, line 307

Draws a rectangle shape.

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:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

drawRoundedRect(x, y, width, height, radius){PIXI.tween.TweenPath}

TweenPath.js, line 324

Draw a rectangle shape with rounded/beveled corners.

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
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

drawShape(shape){PIXI.tween.TweenPath}

TweenPath.js, line 350

Draws the given shape to this TweenPath object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.

Name Type Description
shape PIXI.Circle | PIXI.Ellipse | PIXI.Polygon | PIXI.Rectangle | PIXI.RoundedRectangle

Shape to draw
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

drawStar(x, y, points, radius, innerRadius, rotation){PIXI.tween.TweenPath}

TweenPath.js, line 368

Draw a star shape with an arbitrary number of points.

Name Type Default Description
x number

Center X position of the star
y number

Center Y position of the star
points number

The number of points of the star, must be > 1
radius number

The outer radius of the star
innerRadius number optional

The inner radius between points, default half radius
rotation number 0 optional

The rotation of the star in radians, where 0 is vertical
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

getPoint(num){PIXI.Point}

TweenPath.js, line 86

Finds the nth point along the path

Name Type Description
num number

Point
Returns:
Type Description
PIXI.Point
  • Point co-ordinates

getPointAt(num){PIXI.Point}

TweenPath.js, line 101

Finds the nth point along the path

Name Type Description
num number

Point
Returns:
Type Description
PIXI.Point
  • Point co-ordinates

getPointAtDistance(distance){PIXI.Point}

TweenPath.js, line 129

Finds the nearest point for the distance to be travelled

Name Type Description
distance number

how far to travel
Returns:
Type Description
PIXI.Point
  • Point co-ordinates

lineTo(x, y){PIXI.tween.TweenPath}

TweenPath.js, line 383

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
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

moveTo(x, y){PIXI.tween.TweenPath}

TweenPath.js, line 397

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
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

parsePoints(){PIXI.tween.TweenPath}

TweenPath.js, line 168

Parse the list of points from the path

Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

quadraticCurveTo(cpX, cpY, toX, toY){PIXI.tween.TweenPath}

TweenPath.js, line 414

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
Returns:
Type Description
PIXI.tween.TweenPath
  • This instance of TweenPath

totalDistance(){number}

TweenPath.js, line 193

Calculates the total distance along the entire path

Returns:
Type Description
number
  • Distance in pixels