Moscrif API Docs for: 2012q3
Show:

Path Class

Library: core

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.

Methods

this

() Path

Object constructor creates new Path object.

Returns:

Path: New instance of Path class.

arcTo

(
  • left
  • top
  • right
  • bottom
  • startAngle
  • [sweepAngle]
  • [forceMoveTo]
)
chainable

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 Float

    The bounding oval defining the shape and size of the arc.

  • top Float

    The bounding oval defining the shape and size of the arc.

  • right Float

    The bounding oval defining the shape and size of the arc.

  • bottom Float

    The bounding oval defining the shape and size of the arc.

  • startAngle Float

    Starting angle (in degrees) where the arc begins.

  • [sweepAngle] Float optional

    Sweep angle (in degrees) measured clockwise. This is treated mod 360.

  • [forceMoveTo] Boolean optional

    If 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
)
chainable

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 Float

    The x-coordinate of the 1st control point on a cubic curve.

  • y1 Float

    The y-coordinate of the 1st control point on a cubic curve.

  • x2 Float

    The x-coordinate of the 2nd control point on a cubic curve.

  • y2 Float

    The y-coordinate of the 2nd control point on a cubic curve.

  • x3 Float

    The x-coordinate of the end point on a cubic curve.

  • y3 Float

    The y-coordinate of the end point on a cubic curve.

fromSVG

(
  • svg
)
Path

Loads vector graphics from SVG string.

Parameters:

  • svg String

    SVG string - XML-based format for describing two-dimensional vector graphics.

Returns:

Path: .

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
)
Multivalue

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:

  • x Float

    The x-coordinate of the start of a new contour

  • y Float

    The y-coordinate of the start of a new contour

Returns:

Multivalue: The bounds of the path's points (left, top right and bottom).

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
)
chainable

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:

  • x Float

    The x-coordinate of the end of a line.

  • y Float

    The y-coordinate of the end of a line.

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
)
chainable

Set the beginning of the next contour to the point (x,y).

Parameters:

  • x Float

    The x-coordinate of the start of a new contour

  • y Float

    The y-coordinate of the start of a new contour

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
)
Path chainable

Offset the path by (dx, dy).

Parameters:

  • dx Float

    The amount in the X direction to offset the entire path.

  • dy Float

    The amount in the y direction to offset the entire path.

Returns:

Path: .

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
)
chainable

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:

  • x1 Float

    The x-coordinate of the control point on a quadratic curve.

  • y1 Float

    The y-coordinate of the control point on a quadratic curve.

  • x2 Float

    The x-coordinate of the end point on a quadratic curve.

  • y2 Float

    The y-coordinate of the end point on a quadratic curve.

  • relative Boolean

    Relative.

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
)
Path chainable

Transform the points in this path by matrix.

Parameters:

  • matrix Matrix

    The matrix to apply to the path.

Returns:

Path: .

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.