VexFlow实践-CSDN博客

本文链接：https://blog.csdn.net/qq_38044096/article/details/109568256

等级不够无法自定义标签 VexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlowVexFlow

心血来潮学了点新东西，用了点时间学会初步使用，但是后续需要的专业知识不太懂，这里留个纪念

vexflow, 一个可以灵活编辑五线谱的好东西（除了index.js是我自己新建的，其余js都可以找到）

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="ISO-8859-1">
	<title>wu</title>
</head>
<script type="text/javascript" src="js/vexflow-min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/qunit.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/vexflow-debug.js"></script>
<body>
	<div id="boo">
		
	</div>
</body>

</html>

index.js


function demo(){
	var div1 = document.getElementById("boo");
	var VF = Vex.Flow;
	var renderer = new VF.Renderer(div1, VF.Renderer.Backends.SVG);

	renderer.resize(500, 500);

	var context = renderer.getContext();

	var stave = new VF.Stave(10, 40, 400);
	stave.addClef("treble").addTimeSignature("4/4");
	stave.setContext(context).draw();
	var notes = [
		new VF.StaveNote({clef: "treble", keys: ["c/4"], duration: "q"}),
		new VF.StaveNote({clef: "treble", keys: ["d/4"], duration: "q"}),
		new VF.StaveNote({clef: "treble", keys: ["b/4"], duration: "qr"}),
		new VF.StaveNote({clef: "treble", keys: ["c/4", "e/4", "g/4"], duration: "q"})
	];
	var notes2 = [
		new VF.StaveNote({clef: "treble", keys: ["c/4"], duration: "w" })
	];
	var voices = [
		new VF.Voice({num_beats: 4,  beat_value: 4}).addTickables(notes),
		new VF.Voice({num_beats: 4,  beat_value: 4}).addTickables(notes2)]

	var formatter = new VF.Formatter().joinVoices(voices).format(voices, 400);

	// Render voices
	voices.forEach(function(v) { v.draw(context, stave); })
}
window.onload = demo;

效果

2020-11-09