paperJS (paper.js) walkthrough by Brett Paufler - 8-28-13
Ellipses, Lines, & Arcs
paper.Path.Ellipse(), paper.Path.Line(), paper.Path.Arc()

(It is my intent to work my way through the paper.js library, if page doesn't cover the aspect of paper.js that you are interested in, please see complete index of my paper.js tutorials completed thus far)

Ellipse

There's supposed to be a way to pass a rectangle object to the Ellipse constructor, but I couldn't figure it out (as fast as I would like, anyhow).  The easiest fix was to treat the Ellipse() constructor as a Rectangle() constructor (by passing it two points) and everything seems to work fine.

Rather than modify the existing theEllipse object (say to increase it's size or move it), at this point, I'd simply redraw it.  Not an optimal solution, but  then, perhaps there is no optimal solution.

So the form is;
var newEllipse = new paper.Path.Ellipse(firstPoint, secondPoint)


//Ellipse var P1 = new paper.Point(50,50); var P2 = new paper.Point(200,100); var thisEllipse = new paper.Path.Ellipse(P1, P2); thisEllipse.fillColor = 'blue'; thisEllipse.strokeColor = 'red'; thisEllipse.strokeWidth = 5;
Draw Canvas #1


LINE

A line might seem like a simple object and a relatively straightforward place to start (as in, why did I start these tutorials with a circle rather than a line).  But the simple fact is: this is the first line in paper.js that I've ever constructed.

Seems pretty simple and straightforward to me.
paper.Path.Line(fromFirstPoint, toSecondPoint);

Hadn't really thought of it when I set up this example, but the hassArray property might be fun to play with as well:
myFirstLine.dashArray = [10,5];


// Line var P1 = new paper.Point(50,50); var P2 = new paper.Point(200,100); var myFirstLine = new paper.Path.Line(P1,P2); myFirstLine.strokeColor = 'purple'; myFirstLine.strokeWidth = 5;
Draw Canvas #2


ARC

The Arc constructor is pretty much the exact same as the Line Constructor only an additional point in inserted between the first and last points, this being the point the arc is to pass through.
paper.Path.Arc(startPoint, passThroughThisPoint, endPoint);

Nothing really complex here.  Don't ask me why I've never drawn any of these before.
Also, the dashArray would work here as well:
myFirstArc.dashArray = [3,3];

// ARC var P1 = new paper.Point(50,50); var P2 = new paper.Point(250,50); var pMiddle = new paper.Point (150, 150); var myFirstArc = new paper.Path.Arc(P1, pMiddle, P2); myFirstArc.strokeColor = 'green'; myFirstArc.strokeWidth = 10;
Draw Canvas #3

As stated previously, I find it easier (both in writing the initial code and in trouble shooting said code later) if I work the constructors in the smallest possible incremental step (i.e. construct Points separate from Lines and Lines separate from Paths).

Speaking of which, linking Arcs and Lines into new custom Path objects it the next item on my agenda, waiting for you in the next tutorial.




previous (Star, Polygon, Rectangle)         paper.js tutorial index       next (pathObject.add(), pathObject.join())

Back to BrettCode Home

Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone, Kevin Stillwater, and of course, me, your host, Brett Paufler)

paper.js official site = http://www.paperJS.org


© Copyright 2013 Brett Paufler