Path Class
The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and cubic curves. This class manages operations with vector graphics.
Item Index
Methods
Methods
arcTo
left
top
right
bottom
startAngle
[sweepAngle]
[forceMoveTo]
Append the specified arc to the path as a new contour. If the start of the path is different from the path's current last point, then an automatic lineTo() is added to connect the current contour to the start of the arc. However, if the path is empty, then we call moveTo() with the first point of the arc. The sweep angle is treated mod 360.
Parameters:
-
left
FloatThe bounding oval defining the shape and size of the arc.
-
top
FloatThe bounding oval defining the shape and size of the arc.
-
right
FloatThe bounding oval defining the shape and size of the arc.
-
bottom
FloatThe bounding oval defining the shape and size of the arc.
-
startAngle
FloatStarting angle (in degrees) where the arc begins.
-
[sweepAngle]
Float optionalSweep angle (in degrees) measured clockwise. This is treated mod 360.
-
[forceMoveTo]
Boolean optionalIf true, always begin a new contour with the arc.
Example:
// create new instance of Path class
this._path = new Path();
// draw arc. Arc is bounded by rect (100, 100, 200, 200), starts at 90°and ends at 270°
this._path.arcTo(100, 100, 200, 200, 90, 270, true);
....onDraw = function(sender, canvas)
{
canvas.clear(0xffffffff);
// draw path
var paint = new Paint();
paint.style = #stroke;
canvas.drawPath(this._path, paint);
}
close
()
Close the current contour. If the current point is not equal to the first point of the contour, a line segment is automatically added.
Example:
// create new instance of Path class
this._path = new Path();
// draw arc. Arc is bounded by rect (100, 100, 200, 200), starts at 90°and ends at 270°
this._path.arcTo(100, 100, 200, 200, 90, 230, true);
this._path.close();
....onDraw = function(sender, canvas)
{
canvas.clear(0xffffffff);
// draw path
var paint = new Paint();
paint.strokeWidth = 10;
paint.strokeCap = #round;
paint.style = #stroke;
canvas.drawPath(this._path, paint);
}
cubicTo
x1
y1
x2
y2
x3
y3
Add a cubic bezier from the last point, approaching control points (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been made for this contour, the first point is automatically set to (0,0).
Parameters:
-
x1
FloatThe x-coordinate of the 1st control point on a cubic curve.
-
y1
FloatThe y-coordinate of the 1st control point on a cubic curve.
-
x2
FloatThe x-coordinate of the 2nd control point on a cubic curve.
-
y2
FloatThe y-coordinate of the 2nd control point on a cubic curve.
-
x3
FloatThe x-coordinate of the end point on a cubic curve.
-
y3
FloatThe y-coordinate of the end point on a cubic curve.
fromSVG
svg
Loads vector graphics from SVG string.
Parameters:
-
svg
StringSVG string - XML-based format for describing two-dimensional vector graphics.
Returns:
Example:
//create instance of Path class and load information from SVG
var path = Path.fromSVG("M 538 60.03125 C 534.691 ... 538 62.03125 z");
//draw
canvas.drawPath(path, new Paint());
getBounds
x
y
Returns the bounds of the path's points. If the path contains 0 or 1 points, the bounds is set to (0,0,0,0), and isEmpty() will return true. Note: this bounds may be larger than the actual shape, since curves do not extend as far as their control points.
Parameters:
Returns:
Example:
// create new instance of Path class
this._path = new Path();
this._path.arcTo(100, 100, 200, 200, 0, 180, true);
var (l, t, r, b) = this._path.getBounds();
// l: 100.000000, t: 150.000000, r: 200.000000, b: 200.000000
console<<"l: "<<l<<", t: "<<t<<", r: "<<r<<", b: "<<b<<"\n";
lineTo
x
y
Add a line from the last point to the specified point (x,y). If no moveTo() call has been made for this contour, the first point is automatically set to (0,0).
Parameters:
Example:
// create new instance of Path class
this._path = new Path();
// create house :)
this._path.moveTo(100, 100);
this._path.lineTo(100, 200);
this._path.lineTo(200, 200);
this._path.lineTo(200, 100);
this._path.lineTo(100, 100);
this._path.lineTo(150, 70);
this._path.lineTo(200, 100);
....onDraw = function(sender, canvas)
{
canvas.clear(0xffffffff);
// draw path
var paint = new Paint();
paint.style = #stroke;
canvas.drawPath(this._path, paint);
}
moveTo
x
y
Set the beginning of the next contour to the point (x,y).
Parameters:
Example:
// create new instance of Path class
this._path = new Path();
// create cross
this._path.moveTo(100, 100);
this._path.lineTo(200, 100);
this._path.moveTo(150, 50);
this._path.lineTo(150, 150);
....onDraw = function(sender, canvas)
{
canvas.clear(0xffffffff);
// draw path
var paint = new Paint();
paint.style = #stroke;
canvas.drawPath(this._path, paint);
}
offset
dx
dy
Offset the path by (dx, dy).
Parameters:
Returns:
Example:
// create new instance of Path class
this._path = new Path();
// create house :) in left top border
this._path.moveTo(0, 30);
this._path.lineTo(0, 130);
this._path.lineTo(100, 130);
this._path.lineTo(100, 30);
this._path.lineTo(000, 30);
this._path.lineTo(50, 0);
this._path.lineTo(100, 30);
// move them to the center of screen
var (l, t, r, b) = this._path.getBounds();
this._path.offset((System.width - (r - l)) / 2, (System.height - (b - t)) / 2);
....onDraw = function(sender, canvas)
{
canvas.clear(0xffffffff);
// draw path
var paint = new Paint();
paint.style = #stroke;
canvas.drawPath(this._path, paint);
}
quadTo
x1
y1
x2
y2
relative
Add a quadratic bezier from the last point, approaching control point (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for this contour, the first point is automatically set to (0,0).
Parameters:
reset
()
Clear any lines and curves from the path, making it empty. This frees up internal storage associated with those segments. This does NOT change the fill-type setting nor Convex.
transform
matrix
Transform the points in this path by matrix.
Parameters:
-
matrix
MatrixThe matrix to apply to the path.
Returns:
Example:
// get vectors coordinates
var (l, t, r, b) = this._path.getBounds();
// create transform matrix
var matrix = new Matrix();
// set scale
var scale = 0.5*System.width / Math.abs(r - l);
matrix.setScale(scale, scale);
// apply scale to vector (resize it)
this._path.transform(matrix);
Properties
bounds
Multivalue
The bounds of the path's points. If the path contains 0 or 1 points, the bounds is set to (0,0,0,0), and isEmpty() will return true. Note: this bounds may be larger than the actual shape, since curves do not extend as far as their control points.
fillType
Symbol
Fill type: * #winding - Specifies that "inside" is computed by a non-zero sum of signed edge crossings. * #event-odd - Specifies that "inside" is computed by an odd number of edge crossings. * #inverse-winding - Same as Winding, but draws outside of the path, rather than inside. * #inverse-even-odd - Same as EvenOdd, but draws outside of the path, rather than inside.