mahuntington
/
randommusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dynamic stave width

Browse Source
master
Matt Huntington 5 years ago
parent 916038fd50
commit b33114ded1
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File

4
app.css
Unescape View File

@ -0,0 +1,4 @@
body {
padding: 0 10%;
margin:0;
}

12
app.js
Unescape View File

@ -1,11 +1,11 @@
const VF = Vex.Flow; const VF = Vex.Flow;
// Create an SVG renderer and attach it to the DIV element named "boo". // Create an SVG renderer and attach it to the DIV element named "boo".
const div = document.querySelector("body") const musicSection = document.querySelector("#music");
const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG); const renderer = new VF.Renderer(musicSection, VF.Renderer.Backends.SVG);
// Size our SVG: // Size our SVG:
renderer.resize(1200, 1200); renderer.resize(musicSection.offsetWidth+1, 1200);
// And get a drawing context: // And get a drawing context:
const context = renderer.getContext(); const context = renderer.getContext();
@ -36,9 +36,8 @@ const returnNewNote = () => {
} }
const drawNotes = (measureNum) => { const drawNotes = (measureNum) => {
const staveWidth = 550; const staveWidth = musicSection.offsetWidth/3;
// Create a stave at position 10, 40 of width 400 on the canvas. const stave = new VF.Stave(measureNum*staveWidth, 40, staveWidth);
const stave = new VF.Stave(10+(measureNum*staveWidth), 40, staveWidth);
// Add a clef and time signature. // Add a clef and time signature.
if(measureNum === 0){ if(measureNum === 0){
@ -80,3 +79,4 @@ const drawNotes = (measureNum) => {
drawNotes(0); drawNotes(0);
drawNotes(1); drawNotes(1);
drawNotes(2);

6
index.html
Unescape View File

@ -4,8 +4,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<script src="https://unpkg.com/vexflow/releases/vexflow-min.js" charset="utf-8"></script> <script src="https://unpkg.com/vexflow/releases/vexflow-min.js" charset="utf-8"></script>
<link rel="stylesheet" href="app.css">
</head> </head>
<body> <body>
<main>
<section id="music">
</section>
</main>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save