vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
825 lines (593 loc) • 28.8 kB
HTML
<html>
<head>
<title>renderer.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>renderer.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>
<h2 id="description">Description</h2>
<p>Support for different rendering contexts: Canvas, Raphael</p>
<div class='highlight'><pre>
<span class="hljs-keyword">import</span> { CanvasContext } <span class="hljs-keyword">from</span> <span class="hljs-string">'./canvascontext'</span>;
<span class="hljs-keyword">import</span> { RaphaelContext } <span class="hljs-keyword">from</span> <span class="hljs-string">'./raphaelcontext'</span>;
<span class="hljs-keyword">import</span> { SVGContext } <span class="hljs-keyword">from</span> <span class="hljs-string">'./svgcontext'</span>;
<span class="hljs-keyword">import</span> { Vex } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vex'</span>;
<span class="hljs-keyword">let</span> lastContext = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Renderer</span> </span>{
<span class="hljs-keyword">static</span> get Backends() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">CANVAS</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">RAPHAEL</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">SVG</span>: <span class="hljs-number">3</span>,
<span class="hljs-attr">VML</span>: <span class="hljs-number">4</span>,
};
}</pre></div>
<p>End of line types</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get LineEndType() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">NONE</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// No leg</span>
UP: <span class="hljs-number">2</span>, <span class="hljs-comment">// Upward leg</span>
DOWN: <span class="hljs-number">3</span>, <span class="hljs-comment">// Downward leg</span>
};
}</pre></div>
<p>Set this to true if you’re using VexFlow inside a runtime
that does not allow modifiying canvas objects. There is a small
performance degradation due to the extra indirection.</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get USE_CANVAS_PROXY() {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
<span class="hljs-keyword">static</span> get lastContext() {
<span class="hljs-keyword">return</span> lastContext;
}
<span class="hljs-keyword">static</span> set lastContext(ctx) {
lastContext = ctx;
}
<span class="hljs-keyword">static</span> buildContext(elementId, backend, width, height, background) {
<span class="hljs-keyword">const</span> renderer = <span class="hljs-keyword">new</span> Renderer(elementId, backend);
<span class="hljs-keyword">if</span> (width && height) {
renderer.resize(width, height);
}
<span class="hljs-keyword">if</span> (!background) background = <span class="hljs-string">'#FFF'</span>;
<span class="hljs-keyword">const</span> ctx = renderer.getContext();
ctx.setBackgroundFillStyle(background);
Renderer.lastContext = ctx;
<span class="hljs-keyword">return</span> ctx;
}
<span class="hljs-keyword">static</span> getCanvasContext(elementId, width, height, background) {
<span class="hljs-keyword">return</span> Renderer.buildContext(elementId, Renderer.Backends.CANVAS, width, height, background);
}
<span class="hljs-keyword">static</span> getRaphaelContext(elementId, width, height, background) {
<span class="hljs-keyword">return</span> Renderer.buildContext(elementId, Renderer.Backends.RAPHAEL, width, height, background);
}
<span class="hljs-keyword">static</span> getSVGContext(elementId, width, height, background) {
<span class="hljs-keyword">return</span> Renderer.buildContext(elementId, Renderer.Backends.SVG, width, height, background);
}
<span class="hljs-keyword">static</span> bolsterCanvasContext(ctx) {
<span class="hljs-keyword">if</span> (Renderer.USE_CANVAS_PROXY) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> CanvasContext(ctx);
}
<span class="hljs-keyword">const</span> methodNames = [
<span class="hljs-string">'clear'</span>, <span class="hljs-string">'setFont'</span>, <span class="hljs-string">'setRawFont'</span>, <span class="hljs-string">'setFillStyle'</span>, <span class="hljs-string">'setBackgroundFillStyle'</span>,
<span class="hljs-string">'setStrokeStyle'</span>, <span class="hljs-string">'setShadowColor'</span>, <span class="hljs-string">'setShadowBlur'</span>, <span class="hljs-string">'setLineWidth'</span>,
<span class="hljs-string">'setLineCap'</span>, <span class="hljs-string">'setLineDash'</span>, <span class="hljs-string">'openGroup'</span>, <span class="hljs-string">'closeGroup'</span>, <span class="hljs-string">'getGroup'</span>,
];
ctx.vexFlowCanvasContext = ctx;
methodNames.forEach(<span class="hljs-function"><span class="hljs-params">methodName</span> =></span> {
ctx[methodName] = ctx[methodName] || CanvasContext.prototype[methodName];
});
<span class="hljs-keyword">return</span> ctx;
}</pre></div>
<p>Draw a dashed line (horizontal, vertical or diagonal
dashPattern = [3,3] draws a 3 pixel dash followed by a three pixel space.
setting the second number to 0 draws a solid line.</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> drawDashedLine(context, fromX, fromY, toX, toY, dashPattern) {
context.beginPath();
<span class="hljs-keyword">const</span> dx = toX - fromX;
<span class="hljs-keyword">const</span> dy = toY - fromY;
<span class="hljs-keyword">const</span> angle = <span class="hljs-built_in">Math</span>.atan2(dy, dx);
<span class="hljs-keyword">let</span> x = fromX;
<span class="hljs-keyword">let</span> y = fromY;
context.moveTo(fromX, fromY);
<span class="hljs-keyword">let</span> idx = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> draw = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">while</span> (!((dx < <span class="hljs-number">0</span> ? x <= toX : x >= toX) && (dy < <span class="hljs-number">0</span> ? y <= toY : y >= toY))) {
<span class="hljs-keyword">const</span> dashLength = dashPattern[idx++ % dashPattern.length];
<span class="hljs-keyword">const</span> nx = x + (<span class="hljs-built_in">Math</span>.cos(angle) * dashLength);
x = dx < <span class="hljs-number">0</span> ? <span class="hljs-built_in">Math</span>.max(toX, nx) : <span class="hljs-built_in">Math</span>.min(toX, nx);
<span class="hljs-keyword">const</span> ny = y + (<span class="hljs-built_in">Math</span>.sin(angle) * dashLength);
y = dy < <span class="hljs-number">0</span> ? <span class="hljs-built_in">Math</span>.max(toY, ny) : <span class="hljs-built_in">Math</span>.min(toY, ny);
<span class="hljs-keyword">if</span> (draw) {
context.lineTo(x, y);
} <span class="hljs-keyword">else</span> {
context.moveTo(x, y);
}
draw = !draw;
}
context.closePath();
context.stroke();
}
<span class="hljs-keyword">constructor</span>(elementId, backend) {
<span class="hljs-keyword">this</span>.elementId = elementId;
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.elementId) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArgument'</span>, <span class="hljs-string">'Invalid id for renderer.'</span>);
}
<span class="hljs-keyword">this</span>.element = <span class="hljs-built_in">document</span>.getElementById(elementId);
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.element) <span class="hljs-keyword">this</span>.element = elementId;</pre></div>
<p>Verify backend and create context</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.ctx = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.paper = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.backend = backend;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.backend === Renderer.Backends.CANVAS) {</pre></div>
<p>Create context.</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.element.getContext) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadElement'</span>, <span class="hljs-string">`Can't get canvas context from element: <span class="hljs-subst">${elementId}</span>`</span>);
}
<span class="hljs-keyword">this</span>.ctx = Renderer.bolsterCanvasContext(<span class="hljs-keyword">this</span>.element.getContext(<span class="hljs-string">'2d'</span>));
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.backend === Renderer.Backends.RAPHAEL) {
<span class="hljs-keyword">this</span>.ctx = <span class="hljs-keyword">new</span> RaphaelContext(<span class="hljs-keyword">this</span>.element);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.backend === Renderer.Backends.SVG) {
<span class="hljs-keyword">this</span>.ctx = <span class="hljs-keyword">new</span> SVGContext(<span class="hljs-keyword">this</span>.element);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'InvalidBackend'</span>, <span class="hljs-string">`No support for backend: <span class="hljs-subst">${<span class="hljs-keyword">this</span>.backend}</span>`</span>);
}
}
resize(width, height) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.backend === Renderer.Backends.CANVAS) {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.element.getContext) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(
<span class="hljs-string">'BadElement'</span>, <span class="hljs-string">`Can't get canvas context from element: <span class="hljs-subst">${<span class="hljs-keyword">this</span>.elementId}</span>`</span>
);
}
[width, height] = CanvasContext.SanitizeCanvasDims(width, height);
<span class="hljs-keyword">const</span> devicePixelRatio = <span class="hljs-built_in">window</span>.devicePixelRatio || <span class="hljs-number">1</span>;
<span class="hljs-keyword">this</span>.element.width = width * devicePixelRatio;
<span class="hljs-keyword">this</span>.element.height = height * devicePixelRatio;
<span class="hljs-keyword">this</span>.element.style.width = width + <span class="hljs-string">'px'</span>;
<span class="hljs-keyword">this</span>.element.style.height = height + <span class="hljs-string">'px'</span>;
<span class="hljs-keyword">this</span>.ctx = Renderer.bolsterCanvasContext(<span class="hljs-keyword">this</span>.element.getContext(<span class="hljs-string">'2d'</span>));
<span class="hljs-keyword">this</span>.ctx.scale(devicePixelRatio, devicePixelRatio);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.ctx.resize(width, height);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
getContext() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.ctx; }
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>