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