From 409af72ce03dd6da1919ee6c7de72c62aac0644e Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Thu, 24 Mar 2022 13:30:20 -0700 Subject: [PATCH] Update auto-generated docs. --- docs/api/index.html | 55 +++++++++++++++++---------------------------- 1 file changed, 20 insertions(+), 35 deletions(-) diff --git a/docs/api/index.html b/docs/api/index.html index 067a122207..1a92d96ec2 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -2,51 +2,34 @@

VexFlow

 -

VexFlow is an open-source library for rendering music notation. It is written in TypeScript (compiled to ES6), and outputs scores to HTML -Canvas and SVG, right in the browser. It also works in Node.js projects (e.g., a command line script to save a score as a PDF).

- - -

If you find VexFlow useful, please consider sponsoring its development: https://github.com/sponsors/0xfe.

- - -

Version 3 → 4

- -

As of this writing (March 2022), we are nearing the release of a new major version of VexFlow. The guide below refers to VexFlow 4 (the new version). If you need to work with the previous version, follow the version 3.0.9 tutorial.

+

VexFlow is an open-source library for rendering music notation. It is written in TypeScript (compiled to ES6), and outputs scores to HTML Canvas and SVG. It works in browsers and also in Node.js projects (e.g., a command line script to save a score as a PDF).

+

The guide below refers to VexFlow 4. If you need to work with the previous version, follow the version 3.0.9 tutorial.

Quick Start

 -

The quickest way to add VexFlow to an HTML page is via a <script> tag.

+

The quickest way to add VexFlow to a web page is via a <script> tag.

<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
<script>
  // YOUR CODE GOES HERE
</script>
-

The URL above will work once VexFlow 4 is released. For now, insert @beta into the URL:

-
<!-- BETA URL BELOW -->
<script src="https://cdn.jsdelivr.net/npm/vexflow@beta/build/cjs/vexflow.js"></script>
<script>
  // YOUR CODE GOES HERE
</script>
-

If your project uses a bundler, you can install VexFlow from npm:

npm install vexflow
-

The command above currently installs the previous version (3.0.9). At the moment, add @beta to get VexFlow 4:

-
npm install vexflow@beta
-
-

More details on integrating with VexFlow 4.

+

Read our detailed guide on integrating with VexFlow.

EasyScore

 -

EasyScore is VexFlow's high-level API for creating music notation. -See a running example here.

-
const f = new Vex.Flow.Factory({
  renderer: { elementId: 'boo', width: 500, height: 200 },
});

const score = f.EasyScore();
const system = f.System();

system
  .addStave({
    voices: [
      score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
      score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
    ],
  })
  .addClef('treble')
  .addTimeSignature('4/4');

f.draw();
+
EasyScore is VexFlow's high-level API for creating music notation. On a web page containing a <div id="output"></div>, the following code displays a score:

+
const { Factory, EasyScore, System } = Vex.Flow;

const vf = new Factory({
  renderer: { elementId: 'output', width: 500, height: 200 },
});

const score = vf.EasyScore();
const system = vf.System();

system
  .addStave({
    voices: [
      score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
      score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
    ],
  })
  .addClef('treble')
  .addTimeSignature('4/4');

vf.draw();
 

+
See a running example of EasyScore here.

 
Learn more about EasyScore here.

 
 
   
Native API

 
-
If you need more control, you can use the low-level VexFlow API.
-Below, we render a stave using SVG. See a running example here.

-
const VF = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "output".
const div = document.getElementById('output');
const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(500, 500);
const context = renderer.getContext();
context.setFont('Arial', 10);

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave = new VF.Stave(10, 40, 400);

// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('4/4');

// Connect it to the rendering context and draw!
stave.setContext(context).draw();
+
If you need more control, you can use the low-level VexFlow API. Below, we render a stave using SVG. See a running example of the low-level API here.

+
const { Renderer, Stave } = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element with id="output".
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(500, 500);
const context = renderer.getContext();
context.setFont('Arial', 10);

// Create a stave of width 400 at position 10, 40.
const stave = new Stave(10, 40, 400);

// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('4/4');

// Connect it to the rendering context and draw!
stave.setContext(context).draw();
 

 
 
@@ -59,25 +42,27 @@ 
Examples

 
 
 
-
-  
Need Help?

-
-
Ask on the Vexflow Google Group.

-
 
   
More Resources

 
 
 
+
+
If you find VexFlow useful, please consider sponsoring its development: https://github.com/sponsors/0xfe.

+
 
   
MIT License