paperJS (paper.js) walkthrough by Brett Paufler - 8-29-13
Creating a PointText()

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

PointText();  (basics)

I use PointText() to place instructions onto the canvas, sure.
But more than that, it is one of the idea debugging commands available in paper.js.

Creating a PointText() is easy enough.

This line of code creates the PointText Object (with the pointTextLocation definint where the text copy begins):
var myText = new paper.PointText(pointTextLocation);

This assigns it a color (no color, no can see it, so it's sort of important):
myText.fillColor = 'purple';

While the content value controls the actual text:
myText.content = 'Test Content for PointText Object';







PointText();  (more advanced)

To start, we have the same basic PointText constructor as before, but have added a few property modifications (which have been commented out in the textbox below for ease of implementation).

I never use myPointText.position.x, I just revise the initial pointTextLocation paper.Point object; but like any other object in paper.js, the position can be controlled manually by changing these position attributes (remember, y counts down from top of screen or canvas field).

Likewise, the .justification attribute can be selected as 'left', 'right', or 'center'.  I believe 'right' is the default.  Once again, I've never seen the need to modify this.

Per below, however, the first remarked out attribute is of critical importance.
If activated,
myText.content = pointTextLocation;
prints to screen, the current state of the pointTextLocation Point object.
Fantastically informative for debugging and trouble shooting.








Using paper.js PointText() to Troubleshoot

So, I hinted that PointText() could be used to troubleshoot previously.  This is a full blown example showing how one can 'stack' input values.  True, this is simplistic, but perhaps the best of examples are.

The last five lines of code:
myText.content = 'Default Text';
myText.content = ThisCircle;
myText.content = ThisCircle.strokeWidth;
myText.content = ThisCircle.strokeColor;
myText.content = ThisCircle.fillColor;
'stack' values into myText.content.  What I mean by this is that if the last line doesn't compute, the content value of myText will be the previously assigned value.  Or as in the case below, the value will be Null or undefined.  We haven't set ThisCircle.fillColor so it is undefined.  No need to wonder why the circle isn't blue, we haven't assigned a color to that value (or the assigning code isn't running).

I don't feel like I am explaining the beauty of the this clearly enough, so let's just say, when troubleshooting, I constantly update values to myText.content letting me know the where, the when, and the what of what the program is doing and more importantly the state of different variables when the program breaks.

I will be using PointText()'s when appropriate from here on out as a feedback mechanism, so as to better illistrate what's happening to various code objects as they are manipulated.

In the sample below, it should be easy enough to comment out or delete the last few lines of code one by one to see how this modifies the PointText.content value.  Note how I have assigned the first PointText.content value:
myText.content = 'Default Text';
This let's me know the PointText Object is working.  There is nothing worse than trying to troubleshoot one object (say the circle in this example), when the real problem resides elsewhere (say in a non-working PointText() implementation).






The next step is to hardwire a few feedback PointText() objects into the code example space, so it will be easier for us to deconstruct the internal workings of paper.js in future examples.




previous -- path.add(), path.join()          paper.js tutorial index       next (integrating PointText into Website)

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