Skip to content
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.

Sign up for GitHub

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

Fix glyph clipping at the bottom #33

Merged
merged 1 commit into from
Feb 23, 2021
Merged

Fix glyph clipping at the bottom #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default class TinySDF {

// If the glyph overflows the canvas size, it will be clipped at the bottom/right
const glyphWidth = Math.min(this.size - this.buffer, Math.ceil(actualBoundingBoxRight - actualBoundingBoxLeft));
const glyphHeight = Math.min(this.size - this.buffer, Math.ceil(actualBoundingBoxAscent + actualBoundingBoxDescent));
const glyphHeight = Math.min(this.size - this.buffer, Math.ceil(actualBoundingBoxAscent) + Math.ceil(actualBoundingBoxDescent));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mentioned that the same logic for glyphWidth "doesn't affect rendering": I think that's just because the fonts we're using typically have an actualBoundingBoxLeft that's slightly negative? So even if the resulting glyphWidth is one pixel too small, the glyph doesn't look clipped from the right because it's actually eating slightly into the buffer on the left.

Right now we're counting on that as a common property of fonts, since we hardwire the x drawing position to this.buffer, and hardwire the left metric to 0. If we're worried, it would be straightforward to hook it up to the actual metrics the way we do for height.


const width = glyphWidth + 2 * this.buffer;
const height = glyphHeight + 2 * this.buffer;
Expand All @@ -80,14 +80,12 @@ export default class TinySDF {
gridOuter.fill(INF, 0, len);
gridInner.fill(0, 0, len);

const offset = (width - glyphWidth) >> 1;
mourner marked this conversation as resolved.
Show resolved Hide resolved

for (let y = 0; y < glyphHeight; y++) {
for (let x = 0; x < glyphWidth; x++) {
const a = imgData.data[4 * (y * glyphWidth + x) + 3] / 255; // alpha value
if (a === 0) continue; // empty pixels

const j = (y + offset) * width + x + offset;
const j = (y + buffer) * width + x + buffer;

if (a === 1) { // fully drawn pixels
gridOuter[j] = 0;
Expand Down
4 changes: 2 additions & 2 deletions test/fixtures/1-out.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"width": 54,
"height": 50,
"height": 51,
"glyphWidth": 48,
"glyphHeight": 44,
"glyphHeight": 45,
"glyphTop": 39,
"glyphLeft": 0,
"glyphAdvance": 48
Expand Down
Binary file modified test/fixtures/1-sdf.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.