这是indexloc提供的服务，不要输入任何密码
Skip to content

Switch to using alphabetic baseline #30

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

Merged
merged 1 commit into from
Feb 18, 2021
Merged

Switch to using alphabetic baseline #30

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
7 changes: 3 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,11 @@ var oneSDF = tinySDFGenerator.draw('泽');
var sdfWithMetrics = tinySDFGenerator.drawWithMetrics('A');
// sdfWithMetrics.data is the same as in `draw`, except the size may be clipped to fit the glyph
// sdfWithMetrics.metrics contains:
// top: Top alignment: glyph ascent - 'top' = baseline
// left: Currently hardwired to 0
// top: Maximum ascent of glyph from alphabetic baseline
// left: Currently hardwired to 0 (actual glyph differences are encoded in the rasterization)
// width: Width of rasterized portion of glyph
// height
// advance: Layout advance
// sdfWidth: Width of the returned bitmap, usually but not always width + 2 * buffer
// sdfHeight
// fontAscent: Maximum ascent of font from baseline
// sdfHeight
```
34 changes: 22 additions & 12 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ function TinySDF(fontSize, buffer, radius, cutoff, fontFamily, fontWeight) {

this.ctx = this.canvas.getContext('2d');
this.ctx.font = this.fontWeight + ' ' + this.fontSize + 'px ' + this.fontFamily;
this.ctx.textBaseline = 'middle';

this.ctx.textBaseline = 'alphabetic';
this.ctx.textAlign = 'left'; // Necessary so that RTL text doesn't have different alignment
this.ctx.fillStyle = 'black';

Expand All @@ -37,8 +38,13 @@ function TinySDF(fontSize, buffer, radius, cutoff, fontFamily, fontWeight) {
this.z = new Float64Array(gridSize + 1);
this.v = new Uint16Array(gridSize);

// hack around https://bugzilla.mozilla.org/show_bug.cgi?id=737852
this.middle = Math.round((size / 2) * (navigator.userAgent.indexOf('Gecko/') >= 0 ? 1.2 : 1));
this.useMetrics = this.ctx.measureText('A').actualBoundingBoxLeft !== undefined;
if (!this.useMetrics) {
// If we don't have access to metrics, use previous middle-baseline heuristics
this.ctx.textBaseline = 'middle';
// hack around https://bugzilla.mozilla.org/show_bug.cgi?id=737852
this.middle = Math.round((size / 2) * (navigator.userAgent.indexOf('Gecko/') >= 0 ? 1.2 : 1));
}
}

function prepareGrids(imgData, width, height, glyphWidth, glyphHeight, gridOuter, gridInner) {
Expand Down Expand Up @@ -84,14 +90,15 @@ TinySDF.prototype._draw = function (char, getMetrics) {
var doubleBuffer = 2 * this.buffer;
var width, glyphWidth, height, glyphHeight, top;

var imgTop, imgLeft;
var imgTop, imgLeft, baselinePosition;
// If the browser supports bounding box metrics, we can generate a smaller
// SDF. This is a significant performance win.
if (getMetrics && textMetrics.actualBoundingBoxLeft !== undefined) {
if (getMetrics && this.useMetrics) {
// The integer/pixel part of the top alignment is encoded in metrics.top
// The remainder is implicitly encoded in the rasterization
top = Math.floor(textMetrics.actualBoundingBoxAscent) - this.middle;
imgTop = Math.max(0, this.middle - Math.ceil(textMetrics.actualBoundingBoxAscent));
top = Math.floor(textMetrics.actualBoundingBoxAscent);
baselinePosition = this.buffer + Math.ceil(textMetrics.actualBoundingBoxAscent);
imgTop = this.buffer;
imgLeft = this.buffer;

// If the glyph overflows the canvas size, it will be clipped at the
Expand All @@ -105,15 +112,19 @@ TinySDF.prototype._draw = function (char, getMetrics) {
height = glyphHeight + doubleBuffer;
} else {
width = glyphWidth = this.size;
height = glyphHeight = this.size
top = 0;
height = glyphHeight = this.size;
// 19 points is an approximation of the "cap height" ascent from alphabetic
// baseline (even though actual drawing is from middle baseline, we can
// use the approximation because every glyph fills the em box)
top = 19 * this.fontSize / 24;
imgTop = imgLeft = 0;
baselinePosition = this.middle;
}

var imgData;
if (glyphWidth && glyphHeight) {
this.ctx.clearRect(imgLeft, imgTop, glyphWidth, glyphHeight);
this.ctx.fillText(char, this.buffer, this.middle);
this.ctx.fillText(char, this.buffer, baselinePosition);
imgData = this.ctx.getImageData(imgLeft, imgTop, glyphWidth, glyphHeight);
}

Expand All @@ -135,8 +146,7 @@ TinySDF.prototype._draw = function (char, getMetrics) {
sdfHeight: height,
top: top,
left: 0,
advance: advance,
fontAscent: textMetrics.fontBoundingBoxAscent
advance: advance
}
};
};
Expand Down