Modify TinySDF to return only alpha channel #3
Conversation
|
@mourner I tacked on an additional 'font-weight' parameter (motivated by Mapbox GL JS use case of using a single font family for Chinese characters but changing weights based on the style). |
index.js
Outdated
| this.radius = radius || 8; | ||
| var size = this.size = this.fontSize + this.buffer * 2; | ||
|
|
||
| this.canvas = document.createElement('canvas'); | ||
| this.canvas.width = this.canvas.height = size; | ||
|
|
||
| this.ctx = this.canvas.getContext('2d'); | ||
| this.ctx.font = fontSize + 'px ' + this.fontFamily; | ||
| /* style | variant | weight | size/line-height | family */ | ||
| this.ctx.font = `normal normal ${this.fontWeight} ${fontSize}px/normal ${this.fontFamily}`; |
There was a problem hiding this comment.
I don't yet use ES6 in this module so let's keep the concatenation. I think the shorthand form can be simplified too.
There was a problem hiding this comment.
I switched to the format 'font-weight font-size font-family'. I read the "Shorthand font property: the 'font' property" section of the CSS spec, and it seems to me to be a little ambiguous about how it distinguishes 'font-weight'/'font-variant'/'font-style'. But I guess it can disambiguate based on the value (except for 'normal' vs 'inherited').
index.js
Outdated
| @@ -37,10 +39,10 @@ TinySDF.prototype.draw = function (char) { | |||
| this.ctx.fillText(char, this.buffer, this.middle); | |||
|
|
|||
| var imgData = this.ctx.getImageData(0, 0, this.size, this.size); | |||
| var data = imgData.data; | |||
| var alphaChannel = new Uint8Array(this.size * this.size); | |||
There was a problem hiding this comment.
Should we use Uint8ClampedArray here instead of Uint8Array?
ChrisLoer
force-pushed
the
cloer_return_alpha_channel
branch
from
f73e27f to
52871d7
Compare
Update demo to convert the alpha channel back to an ImageData.
ChrisLoer
force-pushed
the
cloer_return_alpha_channel
branch
from
52871d7 to
a9d8ad6
Compare
It's convenient for the demo to use an RGBA
ImageDatafor building the texture, but in general I think we'd expect users of TinySDF to work with an alpha-channel-only result since that's the only actual information in the SDF we generate.I updated the demo to transform the alpha channel into an
ImageData, and didn't see any noticeable change in performance.