Home Ask Login Register

Developers Planet

Your answer is one click away!

Scott H February 2016

Paper.js PointText Get Baseline Coordinates instead of Bottom Left Corner

Examine this Paper.js sketch. Click on "TEXT" to see the bounding box. Note that I set the leading property to be the same as the font size. By default it is 1.2 times the font size, according to the documentation.

Why is there the margin space at the bottom of the PointText? How can it be removed so that the bounding box wraps the text tightly? Alternatively, how could one determine the y value of the true baseline of the text, rather than what we're currently given?


The "margin" at the bottom is for letters that have descenders, like q and p. So the real question here is how can I get the y-coordinate of the baseline for the PointText? I need the baseline specifically because this is how another library we're using inserts text, and the insertion needs to be identical.


jth41 February 2016

Depending on your constraints, perhaps your problem could be solved by arranging things by the top left and always setting the leading to be 95.5% of the FontSize. For most text, this should get you pretty darn close

bmacnaughton February 2016

The spacing is correct. Change "TEXT" to "Tejas" and you'll see that the descenders, in the character "j" have equal spacing below them as do the top of the capitalized characters.

I don't believe there is a way to get the text bounds of a PointText item.

As such, I think arthur.sw's suggestion is the best answer. I do the same unless the text is very simple, single line, and not editable. I end up creating a textbox or textarea over the canvas and positioning it appropriately. It's probably the best solution long-term; I'm not sure why paper should duplicate everything the browser already handles.

With this you'll want to position the text relative to the view or canvas being displayed. You'll probably want use globalToLocal and localToGlobal

Here's a sketch that helps me visualize the relationship between an item's coordinate space and the global coordinate space.

Post Status

Asked in February 2016
Viewed 3,876 times
Voted 13
Answered 2 times


Leave an answer

Quote of the day: live life