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.
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
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.
Asked in February 2016Viewed 3,876 timesVoted 13Answered 2 times