vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
965 lines (726 loc) • 36.5 kB
HTML
<html>
<head>
<title>glyph.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div class="container">
<div class="page">
<div class="header">
<h1>glyph.js</h1>
<div class="toc">
<h3>Table of Contents</h3>
<ol>
<li>
<a class="source" href="accidental.html">
accidental.js
</a>
</li>
<li>
<a class="source" href="annotation.html">
annotation.js
</a>
</li>
<li>
<a class="source" href="articulation.html">
articulation.js
</a>
</li>
<li>
<a class="source" href="barnote.html">
barnote.js
</a>
</li>
<li>
<a class="source" href="beam.html">
beam.js
</a>
</li>
<li>
<a class="source" href="bend.html">
bend.js
</a>
</li>
<li>
<a class="source" href="boundingbox.html">
boundingbox.js
</a>
</li>
<li>
<a class="source" href="boundingboxcomputation.html">
boundingboxcomputation.js
</a>
</li>
<li>
<a class="source" href="canvascontext.html">
canvascontext.js
</a>
</li>
<li>
<a class="source" href="clef.html">
clef.js
</a>
</li>
<li>
<a class="source" href="clefnote.html">
clefnote.js
</a>
</li>
<li>
<a class="source" href="crescendo.html">
crescendo.js
</a>
</li>
<li>
<a class="source" href="curve.html">
curve.js
</a>
</li>
<li>
<a class="source" href="dot.html">
dot.js
</a>
</li>
<li>
<a class="source" href="easyscore.html">
easyscore.js
</a>
</li>
<li>
<a class="source" href="element.html">
element.js
</a>
</li>
<li>
<a class="source" href="factory.html">
factory.js
</a>
</li>
<li>
<a class="source" href="formatter.html">
formatter.js
</a>
</li>
<li>
<a class="source" href="fraction.html">
fraction.js
</a>
</li>
<li>
<a class="source" href="frethandfinger.html">
frethandfinger.js
</a>
</li>
<li>
<a class="source" href="ghostnote.html">
ghostnote.js
</a>
</li>
<li>
<a class="source" href="glyph.html">
glyph.js
</a>
</li>
<li>
<a class="source" href="glyphnote.html">
glyphnote.js
</a>
</li>
<li>
<a class="source" href="gracenote.html">
gracenote.js
</a>
</li>
<li>
<a class="source" href="gracenotegroup.html">
gracenotegroup.js
</a>
</li>
<li>
<a class="source" href="gracetabnote.html">
gracetabnote.js
</a>
</li>
<li>
<a class="source" href="index.html">
index.js
</a>
</li>
<li>
<a class="source" href="keymanager.html">
keymanager.js
</a>
</li>
<li>
<a class="source" href="keysignature.html">
keysignature.js
</a>
</li>
<li>
<a class="source" href="keysignote.html">
keysignote.js
</a>
</li>
<li>
<a class="source" href="modifier.html">
modifier.js
</a>
</li>
<li>
<a class="source" href="modifiercontext.html">
modifiercontext.js
</a>
</li>
<li>
<a class="source" href="multimeasurerest.html">
multimeasurerest.js
</a>
</li>
<li>
<a class="source" href="music.html">
music.js
</a>
</li>
<li>
<a class="source" href="note.html">
note.js
</a>
</li>
<li>
<a class="source" href="notehead.html">
notehead.js
</a>
</li>
<li>
<a class="source" href="notesubgroup.html">
notesubgroup.js
</a>
</li>
<li>
<a class="source" href="ornament.html">
ornament.js
</a>
</li>
<li>
<a class="source" href="parser.html">
parser.js
</a>
</li>
<li>
<a class="source" href="pedalmarking.html">
pedalmarking.js
</a>
</li>
<li>
<a class="source" href="raphaelcontext.html">
raphaelcontext.js
</a>
</li>
<li>
<a class="source" href="registry.html">
registry.js
</a>
</li>
<li>
<a class="source" href="renderer.html">
renderer.js
</a>
</li>
<li>
<a class="source" href="repeatnote.html">
repeatnote.js
</a>
</li>
<li>
<a class="source" href="smufl.html">
smufl.js
</a>
</li>
<li>
<a class="source" href="stave.html">
stave.js
</a>
</li>
<li>
<a class="source" href="stavebarline.html">
stavebarline.js
</a>
</li>
<li>
<a class="source" href="staveconnector.html">
staveconnector.js
</a>
</li>
<li>
<a class="source" href="stavehairpin.html">
stavehairpin.js
</a>
</li>
<li>
<a class="source" href="staveline.html">
staveline.js
</a>
</li>
<li>
<a class="source" href="stavemodifier.html">
stavemodifier.js
</a>
</li>
<li>
<a class="source" href="stavenote.html">
stavenote.js
</a>
</li>
<li>
<a class="source" href="staverepetition.html">
staverepetition.js
</a>
</li>
<li>
<a class="source" href="stavesection.html">
stavesection.js
</a>
</li>
<li>
<a class="source" href="stavetempo.html">
stavetempo.js
</a>
</li>
<li>
<a class="source" href="stavetext.html">
stavetext.js
</a>
</li>
<li>
<a class="source" href="stavetie.html">
stavetie.js
</a>
</li>
<li>
<a class="source" href="stavevolta.html">
stavevolta.js
</a>
</li>
<li>
<a class="source" href="stem.html">
stem.js
</a>
</li>
<li>
<a class="source" href="stemmablenote.html">
stemmablenote.js
</a>
</li>
<li>
<a class="source" href="stringnumber.html">
stringnumber.js
</a>
</li>
<li>
<a class="source" href="strokes.html">
strokes.js
</a>
</li>
<li>
<a class="source" href="svgcontext.html">
svgcontext.js
</a>
</li>
<li>
<a class="source" href="system.html">
system.js
</a>
</li>
<li>
<a class="source" href="tables.html">
tables.js
</a>
</li>
<li>
<a class="source" href="tabnote.html">
tabnote.js
</a>
</li>
<li>
<a class="source" href="tabslide.html">
tabslide.js
</a>
</li>
<li>
<a class="source" href="tabstave.html">
tabstave.js
</a>
</li>
<li>
<a class="source" href="tabtie.html">
tabtie.js
</a>
</li>
<li>
<a class="source" href="textbracket.html">
textbracket.js
</a>
</li>
<li>
<a class="source" href="textdynamics.html">
textdynamics.js
</a>
</li>
<li>
<a class="source" href="textnote.html">
textnote.js
</a>
</li>
<li>
<a class="source" href="tickable.html">
tickable.js
</a>
</li>
<li>
<a class="source" href="tickcontext.html">
tickcontext.js
</a>
</li>
<li>
<a class="source" href="timesignature.html">
timesignature.js
</a>
</li>
<li>
<a class="source" href="timesignote.html">
timesignote.js
</a>
</li>
<li>
<a class="source" href="tremolo.html">
tremolo.js
</a>
</li>
<li>
<a class="source" href="tuning.html">
tuning.js
</a>
</li>
<li>
<a class="source" href="tuplet.html">
tuplet.js
</a>
</li>
<li>
<a class="source" href="vex.html">
vex.js
</a>
</li>
<li>
<a class="source" href="vibrato.html">
vibrato.js
</a>
</li>
<li>
<a class="source" href="vibratobracket.html">
vibratobracket.js
</a>
</li>
<li>
<a class="source" href="voice.html">
voice.js
</a>
</li>
<li>
<a class="source" href="voicegroup.html">
voicegroup.js
</a>
</li>
</ol>
</div>
</div>
<p><a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010.</p>
<div class='highlight'><pre>
<span class="hljs-keyword">import</span> { Vex } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vex'</span>;
<span class="hljs-keyword">import</span> { Flow } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tables'</span>;
<span class="hljs-keyword">import</span> { Element } <span class="hljs-keyword">from</span> <span class="hljs-string">'./element'</span>;
<span class="hljs-keyword">import</span> { BoundingBoxComputation } <span class="hljs-keyword">from</span> <span class="hljs-string">'./boundingboxcomputation'</span>;
<span class="hljs-keyword">import</span> { BoundingBox } <span class="hljs-keyword">from</span> <span class="hljs-string">'./boundingbox'</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">processOutline</span>(<span class="hljs-params">outline, originX, originY, scaleX, scaleY, outlineFns</span>) </span>{
<span class="hljs-keyword">let</span> command;
<span class="hljs-keyword">let</span> x;
<span class="hljs-keyword">let</span> y;
<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">nextX</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> originX + outline[i++] * scaleX; }
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">nextY</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> originY + outline[i++] * scaleY; }
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">doOutline</span>(<span class="hljs-params">command, ...args</span>) </span>{
outlineFns[command](...args);
}
<span class="hljs-keyword">while</span> (i < outline.length) {
command = outline[i++];
<span class="hljs-keyword">switch</span> (command) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'m'</span>:
<span class="hljs-keyword">case</span> <span class="hljs-string">'l'</span>:
doOutline(command, nextX(), nextY());
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'q'</span>:
x = nextX();
y = nextY();
doOutline(command, nextX(), nextY(), x, y);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'b'</span>:
x = nextX();
y = nextY();
doOutline(command, nextX(), nextY(), nextX(), nextY(), x, y);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'z'</span>:
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">break</span>;
}
}
}
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Glyph</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{
<span class="hljs-comment">/*
Static methods used to implement loading and rendering glyphs.
Below categoryPath can be any metric path under 'glyphs', so stem.up would respolve
to glyphs.stem.up.shifX, glyphs.stem.up.shiftY, etc.
*/</span>
<span class="hljs-keyword">static</span> lookupFontMetric({ font, category, code, key, defaultValue }) {
<span class="hljs-keyword">let</span> value = font.lookupMetric(<span class="hljs-string">`glyphs.<span class="hljs-subst">${category}</span>.<span class="hljs-subst">${code}</span>.<span class="hljs-subst">${key}</span>`</span>, <span class="hljs-literal">null</span>);
<span class="hljs-keyword">if</span> (value === <span class="hljs-literal">null</span>) {
value = font.lookupMetric(<span class="hljs-string">`glyphs.<span class="hljs-subst">${category}</span>.<span class="hljs-subst">${key}</span>`</span>, defaultValue);
}
<span class="hljs-keyword">return</span> value;
}
<span class="hljs-keyword">static</span> lookupGlyph(fontStack, code) {
<span class="hljs-keyword">if</span> (!fontStack) {
<span class="hljs-keyword">throw</span> Vex.RERR(<span class="hljs-string">'BAD_FONTSTACK'</span>, <span class="hljs-string">'Font stack is misconfigured'</span>);
}
<span class="hljs-keyword">let</span> glyph;
<span class="hljs-keyword">let</span> font;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < fontStack.length; i++) {
font = fontStack[i];
glyph = font.getGlyphs()[code];
<span class="hljs-keyword">if</span> (glyph) <span class="hljs-keyword">break</span>;
}
<span class="hljs-keyword">if</span> (!glyph) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadGlyph'</span>, <span class="hljs-string">`Glyph <span class="hljs-subst">${code}</span> does not exist in font.`</span>);
}
<span class="hljs-keyword">return</span> { glyph, font };
}
<span class="hljs-keyword">static</span> loadMetrics(fontStack, code, category = <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">const</span> { glyph, font } = Glyph.lookupGlyph(fontStack, code);
<span class="hljs-keyword">const</span> x_shift = category ? Glyph.lookupFontMetric({
font, category, code,
<span class="hljs-attr">key</span>: <span class="hljs-string">'shiftX'</span>, <span class="hljs-attr">defaultValue</span>: <span class="hljs-number">0</span>
}) : <span class="hljs-number">0</span>;
<span class="hljs-keyword">const</span> y_shift = category ? Glyph.lookupFontMetric({
font, category, code,
<span class="hljs-attr">key</span>: <span class="hljs-string">'shiftY'</span>, <span class="hljs-attr">defaultValue</span>: <span class="hljs-number">0</span>
}) : <span class="hljs-number">0</span>;
<span class="hljs-keyword">const</span> scale = category ? Glyph.lookupFontMetric({
font, category, code,
<span class="hljs-attr">key</span>: <span class="hljs-string">'scale'</span>, <span class="hljs-attr">defaultValue</span>: <span class="hljs-number">1</span>
}) : <span class="hljs-number">1</span>;
<span class="hljs-keyword">const</span> x_min = glyph.x_min;
<span class="hljs-keyword">const</span> x_max = glyph.x_max;
<span class="hljs-keyword">const</span> ha = glyph.ha;
<span class="hljs-keyword">let</span> outline;
<span class="hljs-keyword">const</span> CACHE = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">if</span> (glyph.o) {
<span class="hljs-keyword">if</span> (CACHE) {
<span class="hljs-keyword">if</span> (glyph.cached_outline) {
outline = glyph.cached_outline;
} <span class="hljs-keyword">else</span> {
outline = glyph.o.split(<span class="hljs-string">' '</span>);
glyph.cached_outline = outline;
}
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (glyph.cached_outline) <span class="hljs-keyword">delete</span> glyph.cached_outline;
outline = glyph.o.split(<span class="hljs-string">' '</span>);
}
<span class="hljs-keyword">return</span> {
x_min,
x_max,
x_shift,
y_shift,
scale,
ha,
outline,
font,
};
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadGlyph'</span>, <span class="hljs-string">`Glyph <span class="hljs-subst">${code}</span> has no outline defined.`</span>);
}
}
<span class="hljs-comment">/**
* A quick and dirty static glyph renderer. Renders glyphs from the default
* font defined in Vex.Flow.Font.
*
* @param {!Object} ctx The canvas context.
* @param {number} x_pos X coordinate.
* @param {number} y_pos Y coordinate.
* @param {number} point The point size to use.
* @param {string} val The glyph code in font.getGlyphs()
*/</span>
<span class="hljs-keyword">static</span> renderGlyph(ctx, x_pos, y_pos, point, val, options) {
<span class="hljs-keyword">const</span> params = {
<span class="hljs-attr">fontStack</span>: Flow.DEFAULT_FONT_STACK,
<span class="hljs-attr">category</span>: <span class="hljs-literal">null</span>,
...options
};
<span class="hljs-keyword">const</span> metrics = Glyph.loadMetrics(params.fontStack, val, params.category);
point = params.category ? Glyph.lookupFontMetric({
<span class="hljs-attr">font</span>: metrics.font,
<span class="hljs-attr">category</span>: params.category,
<span class="hljs-attr">code</span>: val,
<span class="hljs-attr">key</span>: <span class="hljs-string">'point'</span>,
<span class="hljs-attr">defaultValue</span>: point
}) : point;
<span class="hljs-keyword">const</span> scale = point * <span class="hljs-number">72.0</span> / (metrics.font.getResolution() * <span class="hljs-number">100.0</span>);
Glyph.renderOutline(ctx, metrics.outline, scale * metrics.scale, x_pos + metrics.x_shift, y_pos + metrics.y_shift, options);
<span class="hljs-keyword">return</span> metrics;
}
<span class="hljs-keyword">static</span> renderOutline(ctx, outline, scale, x_pos, y_pos, options) {
ctx.beginPath();
ctx.moveTo(x_pos, y_pos);
processOutline(outline, x_pos, y_pos, scale, -scale, {
<span class="hljs-attr">m</span>: ctx.moveTo.bind(ctx),
<span class="hljs-attr">l</span>: ctx.lineTo.bind(ctx),
<span class="hljs-attr">q</span>: ctx.quadraticCurveTo.bind(ctx),
<span class="hljs-attr">b</span>: ctx.bezierCurveTo.bind(ctx),</pre></div>
<p>z: ctx.fill.bind(ctx), // ignored</p>
<div class='highlight'><pre> }, options);
ctx.fill();
}
<span class="hljs-keyword">static</span> getOutlineBoundingBox(outline, scale, x_pos, y_pos) {
<span class="hljs-keyword">const</span> bboxComp = <span class="hljs-keyword">new</span> BoundingBoxComputation();
processOutline(outline, x_pos, y_pos, scale, -scale, {
<span class="hljs-attr">m</span>: bboxComp.addPoint.bind(bboxComp),
<span class="hljs-attr">l</span>: bboxComp.addPoint.bind(bboxComp),
<span class="hljs-attr">q</span>: bboxComp.addQuadraticCurve.bind(bboxComp),
<span class="hljs-attr">b</span>: bboxComp.addBezierCurve.bind(bboxComp),
<span class="hljs-attr">z</span>: bboxComp.noOp.bind(bboxComp),
});
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> BoundingBox(
bboxComp.x1,
bboxComp.y1,
bboxComp.width(),
bboxComp.height()
);
}
<span class="hljs-comment">/**
* @constructor
*/</span>
<span class="hljs-keyword">constructor</span>(code, point, options) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Glyph'</span>);
<span class="hljs-keyword">this</span>.code = code;
<span class="hljs-keyword">this</span>.point = point;
<span class="hljs-keyword">this</span>.options = {
<span class="hljs-attr">fontStack</span>: <span class="hljs-keyword">this</span>.getFontStack(),
<span class="hljs-attr">category</span>: <span class="hljs-literal">null</span>,
};
<span class="hljs-keyword">this</span>.metrics = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.x_shift = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.y_shift = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.originShift = {
<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y</span>: <span class="hljs-number">0</span>,
};
<span class="hljs-keyword">if</span> (options) {
<span class="hljs-keyword">this</span>.setOptions(options);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.reset();
}
}
getCode() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.code;
}
setOptions(options) {
<span class="hljs-keyword">this</span>.options = { ...this.options, ...options };
<span class="hljs-keyword">this</span>.reset();
}
setPoint(point) { <span class="hljs-keyword">this</span>.point = point; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setStave(stave) { <span class="hljs-keyword">this</span>.stave = stave; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setXShift(x_shift) { <span class="hljs-keyword">this</span>.x_shift = x_shift; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setYShift(y_shift) { <span class="hljs-keyword">this</span>.y_shift = y_shift; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
reset() {
<span class="hljs-keyword">this</span>.metrics = Glyph.loadMetrics(<span class="hljs-keyword">this</span>.options.fontStack, <span class="hljs-keyword">this</span>.code, <span class="hljs-keyword">this</span>.options.category);</pre></div>
<p>Override point from metrics file</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.point = <span class="hljs-keyword">this</span>.options.category ? Glyph.lookupFontMetric({
<span class="hljs-attr">category</span>: <span class="hljs-keyword">this</span>.options.category,
<span class="hljs-attr">font</span>: <span class="hljs-keyword">this</span>.metrics.font,
<span class="hljs-attr">code</span>: <span class="hljs-keyword">this</span>.code,
<span class="hljs-attr">key</span>: <span class="hljs-string">'point'</span>,
<span class="hljs-attr">defaultValue</span>: <span class="hljs-keyword">this</span>.point,
}) : <span class="hljs-keyword">this</span>.point;
<span class="hljs-keyword">this</span>.scale = <span class="hljs-keyword">this</span>.point * <span class="hljs-number">72</span> / (<span class="hljs-keyword">this</span>.metrics.font.getResolution() * <span class="hljs-number">100</span>);
<span class="hljs-keyword">this</span>.bbox = Glyph.getOutlineBoundingBox(
<span class="hljs-keyword">this</span>.metrics.outline,
<span class="hljs-keyword">this</span>.scale * <span class="hljs-keyword">this</span>.metrics.scale,
<span class="hljs-keyword">this</span>.metrics.x_shift,
<span class="hljs-keyword">this</span>.metrics.y_shift,
);
}
getMetrics() {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.metrics) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'BadGlyph'</span>, <span class="hljs-string">`Glyph <span class="hljs-subst">${<span class="hljs-keyword">this</span>.code}</span> is not initialized.`</span>);
}
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">x_min</span>: <span class="hljs-keyword">this</span>.metrics.x_min * <span class="hljs-keyword">this</span>.scale * <span class="hljs-keyword">this</span>.metrics.scale,
<span class="hljs-attr">x_max</span>: <span class="hljs-keyword">this</span>.metrics.x_max * <span class="hljs-keyword">this</span>.scale * <span class="hljs-keyword">this</span>.metrics.scale,
<span class="hljs-attr">width</span>: <span class="hljs-keyword">this</span>.bbox.getW(),
<span class="hljs-attr">height</span>: <span class="hljs-keyword">this</span>.bbox.getH(),
};
}
setOriginX(x) {
<span class="hljs-keyword">const</span> { bbox } = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">const</span> originX = <span class="hljs-built_in">Math</span>.abs(bbox.getX() / bbox.getW());
<span class="hljs-keyword">const</span> xShift = (x - originX) * bbox.getW();
<span class="hljs-keyword">this</span>.originShift.x = -xShift;
}
setOriginY(y) {
<span class="hljs-keyword">const</span> { bbox } = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">const</span> originY = <span class="hljs-built_in">Math</span>.abs(bbox.getY() / bbox.getH());
<span class="hljs-keyword">const</span> yShift = (y - originY) * bbox.getH();
<span class="hljs-keyword">this</span>.originShift.y = -yShift;
}
setOrigin(x, y) {
<span class="hljs-keyword">this</span>.setOriginX(x);
<span class="hljs-keyword">this</span>.setOriginY(y);
}
render(ctx, x, y) {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.metrics) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'BadGlyph'</span>, <span class="hljs-string">`Glyph <span class="hljs-subst">${<span class="hljs-keyword">this</span>.code}</span> is not initialized.`</span>);
}
<span class="hljs-keyword">const</span> outline = <span class="hljs-keyword">this</span>.metrics.outline;
<span class="hljs-keyword">const</span> scale = <span class="hljs-keyword">this</span>.scale * <span class="hljs-keyword">this</span>.metrics.scale;
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">this</span>.applyStyle(ctx);
Glyph.renderOutline(ctx, outline, scale,
x + <span class="hljs-keyword">this</span>.originShift.x + <span class="hljs-keyword">this</span>.metrics.x_shift,
y + <span class="hljs-keyword">this</span>.originShift.y + <span class="hljs-keyword">this</span>.metrics.y_shift);
<span class="hljs-keyword">this</span>.restoreStyle(ctx);
}
renderToStave(x) {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.metrics) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'BadGlyph'</span>, <span class="hljs-string">`Glyph <span class="hljs-subst">${<span class="hljs-keyword">this</span>.code}</span> is not initialized.`</span>);
}
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.stave) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'GlyphError'</span>, <span class="hljs-string">'No valid stave'</span>);
}
<span class="hljs-keyword">const</span> outline = <span class="hljs-keyword">this</span>.metrics.outline;
<span class="hljs-keyword">const</span> scale = <span class="hljs-keyword">this</span>.scale * <span class="hljs-keyword">this</span>.metrics.scale;
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">this</span>.applyStyle();
Glyph.renderOutline(<span class="hljs-keyword">this</span>.context, outline, scale,
x + <span class="hljs-keyword">this</span>.x_shift + <span class="hljs-keyword">this</span>.metrics.x_shift, <span class="hljs-keyword">this</span>.stave.getYForGlyphs() + <span class="hljs-keyword">this</span>.y_shift + <span class="hljs-keyword">this</span>.metrics.y_shift);
<span class="hljs-keyword">this</span>.restoreStyle();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>