VexFlow セクション記号 - 版の履歴

2024年3月12日 (火) 05:54にYo-netによる

2024-03-12T05:54:16Z

← 古い版		2024年3月12日 (火) 14:54時点における版
1行目:		1行目:
	<yjavascript></script>		<yjavascript></script>
	<script src="https://~~wiki~~.~~yo-~~net~~.jp~~/vexflow/build/cjs/vexflow.js"></script>		<script src="https://cdn.jsdelivr.net/npm/vexflow@4.2.3/build/cjs/vexflow.js"></script>
	<script>		<script>
	</yjavascript>		</yjavascript>

2024年3月12日 (火) 05:51にYo-netによる

2024-03-12T05:51:13Z

← 古い版		2024年3月12日 (火) 14:51時点における版
231行目:		231行目:
	let nscale = 0.68		let nscale = 0.68
	let nwidth = 1040;		let nwidth = 1040;
	let nheight = ~~320~~;		let nheight = 420;

	let nHeadMargin = 70;		let nHeadMargin = 70;
283行目:		283行目:
	stave1.setClef("treble").setContext(ctx);		stave1.setClef("treble").setContext(ctx);
	stave1.setTimeSignature('4/4').setContext(ctx);		stave1.setTimeSignature('4/4').setContext(ctx);
			stave1.setSection("A", 0);
	//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN		//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN
	stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN		stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN
323行目:		324行目:
	const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);		const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);
	stave3.setEndBarType(VF.Barline.type.NONE);		stave3.setEndBarType(VF.Barline.type.NONE);
			stave3.setSection("B", 0);
	stave3.draw();		stave3.draw();

332行目:		334行目:


	const stave5 = new Stave(stave1.x, stave1.y + ~~100~~, nHeadMargin + nStaveWidth).setContext(ctx);		const stave5 = new Stave(stave1.x, stave1.y + 200, nHeadMargin + nStaveWidth).setContext(ctx);
	stave5.addClef("treble").setContext(ctx);		stave5.addClef("treble").setContext(ctx);
	stave5.addTimeSignature('4/4').setContext(ctx);		stave5.addTimeSignature('4/4').setContext(ctx);
			stave5.setSection("C", 0);
	stave5.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能)		stave5.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能)

396行目:		399行目:
	stave8.setEndBarType(VF.Barline.type.END);		stave8.setEndBarType(VF.Barline.type.END);
	stave8.draw();		stave8.draw();

	})();		})();

2024年3月12日 (火) 05:48にYo-netによる

2024-03-12T05:48:55Z

@@ 5行目: / 5行目: @@
 [[VexFlow 使い方]]に戻る。
 == '''概要''' ==
-　小節区切りの設定をする手順を示します。約1年近く絶賛挫折中でしたが、久しぶりに更新しました。2024年3月中旬時点。このサイトのこの記事がかなり世の中的に期待されているようです。続編を書かないといけないなと思った次第です。次の記事も頑張っていこう！
+　セクション記号の表示について、説明します。
-<table style="border: 0; border-collapse: collapse;">
+　staveオブジェクトのメンバ関数.setSectionで、表示したい記号の文字列とオフセットを指定するだけです。以下のとおりの表示になります。

Yo-net: /* 小節開始終了線 */

2024-03-12T05:42:47Z

小節開始終了線

← 古い版		2024年3月12日 (火) 14:42時点における版
45行目:		45行目:


	== '''~~小節開始終了線~~''' ==		== '''セクション記号''' ==
	<div id="yonet202403Mid_Output01"></div>		<div id="yonet202403Mid_Output01"></div>
	<yjavascript></script>		<yjavascript></script>
170行目:		170行目:
	stave5.addClef("treble").setContext(ctx);		stave5.addClef("treble").setContext(ctx);
	stave5.addTimeSignature('4/4').setContext(ctx);		stave5.addTimeSignature('4/4').setContext(ctx);
			stave5.setSection("C", 0);
	stave5.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能)		stave5.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能)

435行目:		436行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>


			staveオブジェクトのメンバ関数に.setSectionという関数があり


			第1引数: 表示させたい文字列リテラルの指定

			第2引数: 縦方向のオフセット下がプラス。上にオフセットがマイナス


			という感じで指定するだけです。フォントがダサい。ビビる。まぁ使わせてもらっときながら文句ばっかりでるもんですね。ひどいよね。Vexflowの中の人はもうちょっと基本的な機能の部分にこだわりを見せてほしいな。



	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。

Yo-net: /* 小節開始終了線 */

2024-03-12T05:36:53Z

小節開始終了線

← 古い版		2024年3月12日 (火) 14:36時点における版
116行目:		116行目:
	stave1.setClef("treble").setContext(ctx);		stave1.setClef("treble").setContext(ctx);
	stave1.setTimeSignature('4/4').setContext(ctx);		stave1.setTimeSignature('4/4').setContext(ctx);
			stave1.setSection("A", 0);
	//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN		//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN
	stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN		stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN
156行目:		157行目:
	const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);		const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);
	stave3.setEndBarType(VF.Barline.type.NONE);		stave3.setEndBarType(VF.Barline.type.NONE);
			stave3.setSection("B", 0);
	stave3.draw();		stave3.draw();