File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import { cache } from '../decorators';
import Path from './Path';
import unicode from 'unicode-properties';
import StandardNames from './StandardNames';
/**
* Glyph objects represent a glyph in the font. They have various properties for accessing metrics and
* the actual vector path the glyph represents, and methods for rendering the glyph to a graphics context.
*
* You do not create glyph objects directly. They are created by various methods on the font object.
* There are several subclasses of the base Glyph class internally that may be returned depending
* on the font format, but they all inherit from this class.
*/
export default class Glyph {
constructor(id, codePoints, font) {
/**
* The glyph id in the font
* @type {number}
*/
this.id = id;
/**
* An array of unicode code points that are represented by this glyph.
* There can be multiple code points in the case of ligatures and other glyphs
* that represent multiple visual characters.
* @type {number[]}
*/
this.codePoints = codePoints;
this._font = font;
// TODO: get this info from GDEF if available
this.isMark = this.codePoints.length > 0 && this.codePoints.every(unicode.isMark);
this.isLigature = this.codePoints.length > 1;
}
_getPath() {
return new Path();
}
_getCBox() {
return this.path.cbox;
}
_getBBox() {
return this.path.bbox;
}
_getTableMetrics(table) {
if (this.id < table.metrics.length) {
return table.metrics.get(this.id);
}
let metric = table.metrics.get(table.metrics.length - 1);
let res = {
advance: metric ? metric.advance : 0,
bearing: table.bearings.get(this.id - table.metrics.length) || 0
};
return res;
}
_getMetrics(cbox) {
if (this._metrics) { return this._metrics; }
let {advance:advanceWidth, bearing:leftBearing} = this._getTableMetrics(this._font.hmtx);
// For vertical metrics, use vmtx if available, or fall back to global data from OS/2 or hhea
if (this._font.vmtx) {
var {advance:advanceHeight, bearing:topBearing} = this._getTableMetrics(this._font.vmtx);
} else {
let os2;
if (typeof cbox === 'undefined' || cbox === null) { ({ cbox } = this); }
if ((os2 = this._font['OS/2']) && os2.version > 0) {
var advanceHeight = Math.abs(os2.typoAscender - os2.typoDescender);
var topBearing = os2.typoAscender - cbox.maxY;
} else {
let { hhea } = this._font;
var advanceHeight = Math.abs(hhea.ascent - hhea.descent);
var topBearing = hhea.ascent - cbox.maxY;
}
}
if (this._font._variationProcessor && this._font.HVAR) {
advanceWidth += this._font._variationProcessor.getAdvanceAdjustment(this.id, this._font.HVAR);
}
return this._metrics = { advanceWidth, advanceHeight, leftBearing, topBearing };
}
/**
* The glyph’s control box.
* This is often the same as the bounding box, but is faster to compute.
* Because of the way bezier curves are defined, some of the control points
* can be outside of the bounding box. Where `bbox` takes this into account,
* `cbox` does not. Thus, cbox is less accurate, but faster to compute.
* See [here](http://www.freetype.org/freetype2/docs/glyphs/glyphs-6.html#section-2)
* for a more detailed description.
*
* @type {BBox}
*/
@cache
get cbox() {
return this._getCBox();
}
/**
* The glyph’s bounding box, i.e. the rectangle that encloses the
* glyph outline as tightly as possible.
* @type {BBox}
*/
@cache
get bbox() {
return this._getBBox();
}
/**
* A vector Path object representing the glyph outline.
* @type {Path}
*/
@cache
get path() {
// Cache the path so we only decode it once
// Decoding is actually performed by subclasses
return this._getPath();
}
/**
* Returns a path scaled to the given font size.
* @param {number} size
* @return {Path}
*/
getScaledPath(size) {
let scale = 1 / this._font.unitsPerEm * size;
return this.path.scale(scale);
}
/**
* The glyph's advance width.
* @type {number}
*/
@cache
get advanceWidth() {
return this._getMetrics().advanceWidth;
}
/**
* The glyph's advance height.
* @type {number}
*/
@cache
get advanceHeight() {
return this._getMetrics().advanceHeight;
}
get ligatureCaretPositions() {}
_getName() {
let { post } = this._font;
if (!post) {
return null;
}
switch (post.version) {
case 1:
return StandardNames[this.id];
case 2:
let id = post.glyphNameIndex[this.id];
if (id < StandardNames.length) {
return StandardNames[id];
}
return post.names[id - StandardNames.length];
case 2.5:
return StandardNames[this.id + post.offsets[this.id]];
case 4:
return String.fromCharCode(post.map[this.id]);
}
}
/**
* The glyph's name
* @type {string}
*/
@cache
get name() {
return this._getName();
}
/**
* Renders the glyph to the given graphics context, at the specified font size.
* @param {CanvasRenderingContext2d} ctx
* @param {number} size
*/
render(ctx, size) {
ctx.save();
let scale = 1 / this._font.head.unitsPerEm * size;
ctx.scale(scale, scale);
let fn = this.path.toFunction();
fn(ctx);
ctx.fill();
ctx.restore();
}
}