-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Basic text clips portions of glyphs at the start or end of lines. #10792
Comments
Note #9663 relates to this issue and was closed as NAB but I do feel you are using measureText improperly in Pixi as prior when I've implemented this approach I've had to consider "actual" bounding box metrics returned from measureText in order to inflate my capturing offscreen appropriately without clipping. |
Please Note: TextMetrics.width:
TextMetrics.actualBoundingBoxRight - TextsMetrics.actualBoundingBoxLeft:
|
this is pretty cool! We missed the existance of these props! I just tested it out but did not see precise results when trying to use using actualBoundingBox Values: using width: Its still an improvment though! To double check, where the bounds 100% accurate for you? We are pretty time poor at the mo - would be happy to accept a PR when you have the time to correct this! Thanks @CoreyDotCom and @clucier-reve !! |
@GoodBoyDigital Sorry I was accidentally logged in with two accounts, lol. So I am not sure why your right edge is not bounded properly but I do understand why your left edge isn't.
Here is a fiddle that seems to have the bounds correct, I've included SVG as well , as this is another option not only for the metrics but for the source of the texture. https://jsfiddle.net/CoreyDotCom/n8rg2cdL/21/ Look for 'BOUNDS COMPUTATION' tag in the code. Also note, the SVG bounds are inaccurate on Safari (of course they are right?) , so ignore that idea for now. I am fully unfamiliar with Pixi internals, so might be best for someone in the know to tackle - seems like a pretty impactful fix though. |
Current Behavior
With certain fonts, Pixi basic text clips portions of the characters. In this example not the leading a and last two characters are clipped. The bottom red text is using MSDF and is not clipped. See image below (click to zoom).
(Ignore the red text vertical positioning issue I've filed that issue separately).
Expected Behavior
Bounds of canvas 2d text should be accurate and resulting texture should not miss content.
Steps to Reproduce
PinyonScript-Regular.ttf.zip
Environment
pixi.js
version: 8.2.3Possible Solution
I noticed when using measureText myself that the "actual" bounding box computed for the font doesn't match the text width and is accurate (at least much more so):
The 1998.5625 width is what pixi is using for the texture size (rounded up) but note the "actual" width is 2017.5625. Also note the padding defined in the font (2, 2, 2, 2) which you'll need to account for in your captured texture so as not to clip the leading 'a'.
Additional Information
No response
The text was updated successfully, but these errors were encountered: