vexflow

<!DOCTYPE html> <html> <head> <title>raphaelcontext.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>raphaelcontext.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> <a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010. <h2 id="description">Description</h2> A rendering context for the Raphael backend. <h2 id="warning-deprecated-for-svgcontext">Warning: Deprecated for SVGContext</h2> Except in instances where SVG support for IE < 9.0 is needed, SVGContext is recommended. <div class='highlight'><pre> export class RaphaelContext { constructor(element) { this.element = element; this.paper = Raphael(element); // eslint-disable-line this.path = ''; this.pen = { x: 0, y: 0 }; this.lineWidth = 1.0; this.state = { scale: { x: 1, y: 1 }, font_family: 'Arial', font_size: 8, font_weight: 800, }; this.attributes = { 'stroke-width': 0.3, 'fill': 'black', 'stroke': 'black', 'font': '10pt Arial', }; this.background_attributes = { 'stroke-width': 0, 'fill': 'white', 'stroke': 'white', 'font': '10pt Arial', }; this.shadow_attributes = { width: 0, color: 'black', }; this.state_stack = []; }</pre></div> Containers not implemented <div class='highlight'><pre> openGroup() {} closeGroup() {} add() {} setFont(family, size, weight) { this.state.font_family = family; this.state.font_size = size; this.state.font_weight = weight; this.attributes.font = (this.state.font_weight || '') + ' ' + (this.state.font_size * this.state.scale.x) + 'pt ' + this.state.font_family; return this; } setRawFont(font) { this.attributes.font = font; return this; } setFillStyle(style) { this.attributes.fill = style; return this; } setBackgroundFillStyle(style) { this.background_attributes.fill = style; this.background_attributes.stroke = style; return this; } setStrokeStyle(style) { this.attributes.stroke = style; return this; } setShadowColor(style) { this.shadow_attributes.color = style; return this; } setShadowBlur(blur) { this.shadow_attributes.width = blur; return this; } setLineWidth(width) { this.attributes['stroke-width'] = width; this.lineWidth = width; }</pre></div> Empty because there is no equivalent in SVG <div class='highlight'><pre> setLineDash() { return this; } setLineCap() { return this; } scale(x, y) { this.state.scale = { x, y };</pre></div> The scale() method is deprecated as of Raphael.JS 2.0, and can no longer be used as an option in an Element.attr() call. It is preserved here for users running earlier versions of Raphael.JS, though it has no effect on the SVG output in Raphael 2 and higher. <div class='highlight'><pre> this.attributes.transform = 'S' + x + ',' + y + ',0,0'; this.attributes.scale = x + ',' + y + ',0,0'; this.attributes.font = this.state.font_size * this.state.scale.x + 'pt ' + this.state.font_family; this.background_attributes.transform = 'S' + x + ',' + y + ',0,0'; this.background_attributes.font = this.state.font_size * this.state.scale.x + 'pt ' + this.state.font_family; return this; } clear() { this.paper.clear(); } resize(width, height) { this.element.style.width = width; this.paper.setSize(width, height); return this; }</pre></div> Sets the SVG <code>viewBox</code> property, which results in auto scaling images when its container is resized. Usage: <code>ctx.setViewBox("0 0 600 400")</code> <div class='highlight'><pre> setViewBox(viewBox) { this.paper.canvas.setAttribute('viewBox', viewBox); } rect(x, y, width, height) { if (height < 0) { y += height; height = -height; } this.paper.rect(x, y, width - 0.5, height - 0.5) .attr(this.attributes) .attr('fill', 'none') .attr('stroke-width', this.lineWidth); return this; } fillRect(x, y, width, height) { if (height < 0) { y += height; height = -height; } this.paper.rect(x, y, width - 0.5, height - 0.5).attr(this.attributes); return this; } clearRect(x, y, width, height) { if (height < 0) { y += height; height = -height; } this.paper.rect(x, y, width - 0.5, height - 0.5) .attr(this.background_attributes); return this; } beginPath() { this.path = ''; this.pen.x = 0; this.pen.y = 0; return this; } moveTo(x, y) { this.path += 'M' + x + ',' + y; this.pen.x = x; this.pen.y = y; return this; } lineTo(x, y) { this.path += 'L' + x + ',' + y; this.pen.x = x; this.pen.y = y; return this; } bezierCurveTo(x1, y1, x2, y2, x, y) { this.path += 'C' + x1 + ',' + y1 + ',' + x2 + ',' + y2 + ',' + x + ',' + y; this.pen.x = x; this.pen.y = y; return this; } quadraticCurveTo(x1, y1, x, y) { this.path += 'Q' + x1 + ',' + y1 + ',' + x + ',' + y; this.pen.x = x; this.pen.y = y; return this; }</pre></div> This is an attempt (hack) to simulate the HTML5 canvas arc method. <div class='highlight'><pre> arc(x, y, radius, startAngle, endAngle, antiClockwise) { function normalizeAngle(angle) { while (angle < 0) { angle += Math.PI * 2; } while (angle > Math.PI * 2) { angle -= Math.PI * 2; } return angle; } startAngle = normalizeAngle(startAngle); endAngle = normalizeAngle(endAngle); if (startAngle > endAngle) { const tmp = startAngle; startAngle = endAngle; endAngle = tmp; antiClockwise = !antiClockwise; } const delta = endAngle - startAngle; if (delta > Math.PI) { this.arcHelper(x, y, radius, startAngle, startAngle + delta / 2, antiClockwise); this.arcHelper(x, y, radius, startAngle + delta / 2, endAngle, antiClockwise); } else { this.arcHelper(x, y, radius, startAngle, endAngle, antiClockwise); } return this; } arcHelper(x, y, radius, startAngle, endAngle, antiClockwise) { const x1 = x + radius * Math.cos(startAngle); const y1 = y + radius * Math.sin(startAngle); const x2 = x + radius * Math.cos(endAngle); const y2 = y + radius * Math.sin(endAngle); let largeArcFlag = 0; let sweepFlag = 0; if (antiClockwise) { sweepFlag = 1; if (endAngle - startAngle < Math.PI) { largeArcFlag = 1; } } else if (endAngle - startAngle > Math.PI) { largeArcFlag = 1; } this.path += 'M' + x1 + ',' + y1 + ',A' + radius + ',' + radius + ',0,' + largeArcFlag + ',' + sweepFlag + ',' + x2 + ',' + y2 + 'M' + this.pen.x + ',' + this.pen.y; }</pre></div> Adapted from the source for Raphael’s Element.glow <div class='highlight'><pre> glow() { const out = this.paper.set(); if (this.shadow_attributes.width > 0) { const sa = this.shadow_attributes; const num_paths = sa.width / 2; for (let i = 1; i <= num_paths; i++) { out.push(this.paper.path(this.path).attr({ stroke: sa.color, 'stroke-linejoin': 'round', 'stroke-linecap': 'round', 'stroke-width': +(sa.width / num_paths * i).toFixed(3), opacity: +((sa.opacity || 0.3) / num_paths).toFixed(3),</pre></div> See note in this.scale(): In Raphael the scale() method is deprecated and removed as of Raphael 2.0 and replaced by the transform() method. It is preserved here for users with earlier versions of Raphael, but has no effect on the output SVG in Raphael 2.0+. <div class='highlight'><pre> transform: this.attributes.transform, scale: this.attributes.scale, })); } } return out; } fill() { const elem = this.paper.path(this.path) .attr(this.attributes) .attr('stroke-width', 0); this.glow(elem); return this; } stroke() {</pre></div> The first line of code below is, unfortunately, a bit of a hack: Raphael’s transform() scaling does not scale the stroke-width, so in order to scale a stroke, we have to manually scale the stroke-width. This works well so long as the X & Y states for this.scale() are relatively similar. However, if they are very different, we would expect horizontal and vertical lines to have different stroke-widths. In the future, if we want to support very divergent values for horizontal and vertical scaling, we may want to consider implementing SVG scaling with properties of the SVG viewBox & viewPort and removing it entirely from the Element.attr() calls. This would more closely parallel the approach taken in canvascontext.js as well. <div class='highlight'><pre> const strokeWidth = this.lineWidth * (this.state.scale.x + this.state.scale.y) / 2; const elem = this.paper.path(this.path) .attr(this.attributes) .attr('fill', 'none') .attr('stroke-width', strokeWidth); this.glow(elem); return this; } closePath() { this.path += 'Z'; return this; } measureText(text) { const txt = this.paper.text(0, 0, text) .attr(this.attributes) .attr('fill', 'none') .attr('stroke', 'none'); const bounds = txt.getBBox(); txt.remove(); return { width: bounds.width, height: bounds.height, }; } fillText(text, x, y) { this.paper .text( x + (this.measureText(text).width / 2), y - (this.state.font_size / (2.25 * this.state.scale.y)), text ) .attr(this.attributes); return this; } save() {</pre></div> TODO(mmuthanna): State needs to be deep-copied. <div class='highlight'><pre> this.state_stack.push({ state: { font_family: this.state.font_family, }, attributes: { font: this.attributes.font, fill: this.attributes.fill, stroke: this.attributes.stroke, 'stroke-width': this.attributes['stroke-width'], }, shadow_attributes: { width: this.shadow_attributes.width, color: this.shadow_attributes.color, }, }); return this; } restore() {</pre></div> TODO(0xfe): State needs to be deep-restored. <div class='highlight'><pre> const state = this.state_stack.pop(); this.state.font_family = state.state.font_family; this.attributes.font = state.attributes.font; this.attributes.fill = state.attributes.fill; this.attributes.stroke = state.attributes.stroke; this.attributes['stroke-width'] = state.attributes['stroke-width']; this.shadow_attributes.width = state.shadow_attributes.width; this.shadow_attributes.color = state.shadow_attributes.color; return this; } }</pre></div> <div class="fleur">h</div> </div> </div> </body> </html>