vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
755 lines (542 loc) • 25.8 kB
HTML
<html>
<head>
<title>boundingboxcomputation.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>boundingboxcomputation.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>
<h2 id="description">Description</h2>
<p>Object which computes metrics for a bounding box by continuously
taking canvas path commands</p>
<p>Warning: This file is merely a crutch to get bounding box information without
explicit metadata. This is likely to get deprecated following SMuFL support.</p>
<p>taken from: <a href="https://github.com/gabelerner/canvg/blob/860e418aca67b9a41e858a223d74d375793ec364/ca">https://github.com/gabelerner/canvg/blob/860e418aca67b9a41e858a223d74d375793ec364/ca</a>
nvg.js#L449</p>
<div class='highlight'><pre>
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BoundingBoxComputation</span> </span>{
<span class="hljs-keyword">constructor</span>(x1, y1, x2, y2) { <span class="hljs-comment">// pass in initial points if you want</span>
<span class="hljs-keyword">this</span>.x1 = <span class="hljs-built_in">Number</span>.NaN;
<span class="hljs-keyword">this</span>.y1 = <span class="hljs-built_in">Number</span>.NaN;
<span class="hljs-keyword">this</span>.x2 = <span class="hljs-built_in">Number</span>.NaN;
<span class="hljs-keyword">this</span>.y2 = <span class="hljs-built_in">Number</span>.NaN;
<span class="hljs-keyword">this</span>.addPoint(x1, y1);
<span class="hljs-keyword">this</span>.addPoint(x2, y2);
}
width() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.x2 - <span class="hljs-keyword">this</span>.x1;
}
height() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.y2 - <span class="hljs-keyword">this</span>.y1;
}
noOp() {</pre></div>
<p>do nothing</p>
<div class='highlight'><pre> }
addPoint(x, y) {
<span class="hljs-keyword">if</span> (x != <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">isNaN</span>(<span class="hljs-keyword">this</span>.x1) || <span class="hljs-built_in">isNaN</span>(<span class="hljs-keyword">this</span>.x2)) {
<span class="hljs-keyword">this</span>.x1 = x;
<span class="hljs-keyword">this</span>.x2 = x;
}
<span class="hljs-keyword">if</span> (x < <span class="hljs-keyword">this</span>.x1) <span class="hljs-keyword">this</span>.x1 = x;
<span class="hljs-keyword">if</span> (x > <span class="hljs-keyword">this</span>.x2) <span class="hljs-keyword">this</span>.x2 = x;
}
<span class="hljs-keyword">if</span> (y != <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">isNaN</span>(<span class="hljs-keyword">this</span>.y1) || <span class="hljs-built_in">isNaN</span>(<span class="hljs-keyword">this</span>.y2)) {
<span class="hljs-keyword">this</span>.y1 = y;
<span class="hljs-keyword">this</span>.y2 = y;
}
<span class="hljs-keyword">if</span> (y < <span class="hljs-keyword">this</span>.y1) <span class="hljs-keyword">this</span>.y1 = y;
<span class="hljs-keyword">if</span> (y > <span class="hljs-keyword">this</span>.y2) <span class="hljs-keyword">this</span>.y2 = y;
}
}
addX(x) {
<span class="hljs-keyword">this</span>.addPoint(x, <span class="hljs-literal">null</span>);
}
addY(y) {
<span class="hljs-keyword">this</span>.addPoint(<span class="hljs-literal">null</span>, y);
}
addQuadraticCurve(p0x, p0y, p1x, p1y, p2x, p2y) {
<span class="hljs-keyword">const</span> cp1x = p0x + <span class="hljs-number">2</span> / <span class="hljs-number">3</span> * (p1x - p0x); <span class="hljs-comment">// CP1 = QP0 + 2/3 *(QP1-QP0)</span>
<span class="hljs-keyword">const</span> cp1y = p0y + <span class="hljs-number">2</span> / <span class="hljs-number">3</span> * (p1y - p0y); <span class="hljs-comment">// CP1 = QP0 + 2/3 *(QP1-QP0)</span>
<span class="hljs-keyword">const</span> cp2x = cp1x + <span class="hljs-number">1</span> / <span class="hljs-number">3</span> * (p2x - p0x); <span class="hljs-comment">// CP2 = CP1 + 1/3 *(QP2-QP0)</span>
<span class="hljs-keyword">const</span> cp2y = cp1y + <span class="hljs-number">1</span> / <span class="hljs-number">3</span> * (p2y - p0y); <span class="hljs-comment">// CP2 = CP1 + 1/3 *(QP2-QP0)</span>
<span class="hljs-keyword">this</span>.addBezierCurve(p0x, p0y, cp1x, cp1y, cp2x, cp2y, p2x, p2y);
}
addBezierCurve(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {</pre></div>
<p>from <a href="http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html">http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html</a></p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> p0 = [p0x, p0y];
<span class="hljs-keyword">const</span> p1 = [p1x, p1y];
<span class="hljs-keyword">const</span> p2 = [p2x, p2y];
<span class="hljs-keyword">const</span> p3 = [p3x, p3y];
<span class="hljs-keyword">let</span> i;
<span class="hljs-keyword">this</span>.addPoint(p0[<span class="hljs-number">0</span>], p0[<span class="hljs-number">1</span>]);
<span class="hljs-keyword">this</span>.addPoint(p3[<span class="hljs-number">0</span>], p3[<span class="hljs-number">1</span>]);
<span class="hljs-keyword">const</span> f = <span class="hljs-function">(<span class="hljs-params">t, i</span>) =></span> <span class="hljs-built_in">Math</span>.pow(<span class="hljs-number">1</span> - t, <span class="hljs-number">3</span>) * p0[i] +
<span class="hljs-number">3</span> * <span class="hljs-built_in">Math</span>.pow(<span class="hljs-number">1</span> - t, <span class="hljs-number">2</span>) * t * p1[i] +
<span class="hljs-number">3</span> * (<span class="hljs-number">1</span> - t) * <span class="hljs-built_in">Math</span>.pow(t, <span class="hljs-number">2</span>) * p2[i] +
<span class="hljs-built_in">Math</span>.pow(t, <span class="hljs-number">3</span>) * p3[i];
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i <= <span class="hljs-number">1</span>; i++) {
<span class="hljs-keyword">const</span> b = <span class="hljs-number">6</span> * p0[i] - <span class="hljs-number">12</span> * p1[i] + <span class="hljs-number">6</span> * p2[i];
<span class="hljs-keyword">const</span> a = <span class="hljs-number">-3</span> * p0[i] + <span class="hljs-number">9</span> * p1[i] - <span class="hljs-number">9</span> * p2[i] + <span class="hljs-number">3</span> * p3[i];
<span class="hljs-keyword">const</span> c = <span class="hljs-number">3</span> * p1[i] - <span class="hljs-number">3</span> * p0[i];
<span class="hljs-keyword">if</span> (a === <span class="hljs-number">0</span>) {
<span class="hljs-keyword">if</span> (b === <span class="hljs-number">0</span>) <span class="hljs-keyword">continue</span>;
<span class="hljs-keyword">const</span> t = -c / b;
<span class="hljs-keyword">if</span> (<span class="hljs-number">0</span> < t && t < <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (i === <span class="hljs-number">0</span>) <span class="hljs-keyword">this</span>.addX(f(t, i));
<span class="hljs-keyword">if</span> (i === <span class="hljs-number">1</span>) <span class="hljs-keyword">this</span>.addY(f(t, i));
}
<span class="hljs-keyword">continue</span>;
}
<span class="hljs-keyword">const</span> b2ac = <span class="hljs-built_in">Math</span>.pow(b, <span class="hljs-number">2</span>) - <span class="hljs-number">4</span> * c * a;
<span class="hljs-keyword">if</span> (b2ac < <span class="hljs-number">0</span>) <span class="hljs-keyword">continue</span>;
<span class="hljs-keyword">const</span> t1 = (-b + <span class="hljs-built_in">Math</span>.sqrt(b2ac)) / (<span class="hljs-number">2</span> * a);
<span class="hljs-keyword">if</span> (<span class="hljs-number">0</span> < t1 && t1 < <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (i === <span class="hljs-number">0</span>) <span class="hljs-keyword">this</span>.addX(f(t1, i));
<span class="hljs-keyword">if</span> (i === <span class="hljs-number">1</span>) <span class="hljs-keyword">this</span>.addY(f(t1, i));
}
<span class="hljs-keyword">const</span> t2 = (-b - <span class="hljs-built_in">Math</span>.sqrt(b2ac)) / (<span class="hljs-number">2</span> * a);
<span class="hljs-keyword">if</span> (<span class="hljs-number">0</span> < t2 && t2 < <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (i === <span class="hljs-number">0</span>) <span class="hljs-keyword">this</span>.addX(f(t2, i));
<span class="hljs-keyword">if</span> (i === <span class="hljs-number">1</span>) <span class="hljs-keyword">this</span>.addY(f(t2, i));
}
}
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>