VexFlow 描画エリアと5線譜と小節 - 版の履歴

Yo-net: /* 小節 */

2023-02-02T15:20:58Z

小節

← 古い版		2023年2月3日 (金) 00:20時点における版
198行目:		198行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>
			12行目を追加しただけです。座標値をちょっと変えてやるだけです。単純に5線譜を二つ並べてるだけです。このページの記事は以上になります。つづけて、もう少し踏み込んだ記事を書く予定です。



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

Yo-net: /* 五線譜 */

2023-02-02T15:18:45Z

五線譜

← 古い版		2023年2月3日 (金) 00:18時点における版
159行目:		159行目:

	という意味です。オブジェクトに同一のオブジェクトが返却される関数になっているので、続けて、ドットを使ってメンバ関数を指定できます。但し順番には意味があります。手前から順番に設定する必要がある場合があります。その意味で .setContext(ctx).draw() という関数が指定されています。前もって作った ctx のデバイスコンテキスト変数を引数にとって描画処理を指示したことになります。		という意味です。オブジェクトに同一のオブジェクトが返却される関数になっているので、続けて、ドットを使ってメンバ関数を指定できます。但し順番には意味があります。手前から順番に設定する必要がある場合があります。その意味で .setContext(ctx).draw() という関数が指定されています。前もって作った ctx のデバイスコンテキスト変数を引数にとって描画処理を指示したことになります。



			== '''小節''' ==
			小節は5線譜を2回描くだけです。


			<div id="yonet202301_Output02"></div>
			<yjavascript></script>
			<script>
			(function(){
			const {
			Factory,
			Stave,
			} = Vex.Flow;

			const f = new Factory({ renderer: { elementId: 'yonet202301_Output02', width: 1000, height: 195 } });
			const ctx = f.getContext();
			const stave1 = new Stave(10, 50, 400).setContext(ctx).draw();
			const stave2 = new Stave(410, 50, 400).setContext(ctx).draw();
			})();
			</yjavascript>

			<syntaxhighlight lang="javascript" line start="1">
			<div id="yonet202301_Output02"></div>
			<script>
			(function(){
			const {
			Factory,
			Stave,
			} = Vex.Flow;

			const f = new Factory({ renderer: { elementId: 'yonet202301_Output02', width: 1000, height: 195 } });
			const ctx = f.getContext();
			const stave1 = new Stave(10, 50, 400).setContext(ctx).draw();
			const stave2 = new Stave(410, 50, 400).setContext(ctx).draw();
			})();
			</script>
			</syntaxhighlight>




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

Yo-net: /* 五線譜 */

2023-02-02T15:11:14Z

五線譜

← 古い版		2023年2月3日 (金) 00:11時点における版
147行目:		147行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>
	Stave オブジェクトを利用しますので、4行目の宣言のところに Stave ~~を追加しました。そして、~~		Stave オブジェクトを利用しますので、4行目の宣言のところに Stave を追加しました。そして、10,11行目を追加しています。最初に作ったFactoryのオブジェクトの格納変数 f のメンバ関数 f.getContext() で描画デバイスコンテキストを取得できます。このコンテキストは先に準備した描画エリアと、これから準備する描画パーツを結び付ける役割を持つ、筆のようなものです。筆を通じて描画の信号が伝わるイメージです。ctx は、デバイスコンテキスト変数と呼んだりすることになります。


			ctxを引数にとるメンバ関数を利用しつつ、Stave オブジェクトを生成しています。その生成時の引数が(10, 50, 400)という謎な数値です。引数の意味ですが、


			*第一引数:横方向の余白px値 10px
			*第二引数:縦方向の余白px値 50px
			*第三引数:5線譜の横幅px値 400px


			という意味です。オブジェクトに同一のオブジェクトが返却される関数になっているので、続けて、ドットを使ってメンバ関数を指定できます。但し順番には意味があります。手前から順番に設定する必要がある場合があります。その意味で .setContext(ctx).draw() という関数が指定されています。前もって作った ctx のデバイスコンテキスト変数を引数にとって描画処理を指示したことになります。



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

Yo-net: /* 五線譜 */

2023-02-02T14:56:43Z

五線譜

← 古い版		2023年2月2日 (木) 23:56時点における版
147行目:		147行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>
	Stave ~~オブジェクトを利用しますので、宣言のところに~~ Stave ~~を追加しました。~~		Stave オブジェクトを利用しますので、4行目の宣言のところに Stave を追加しました。そして、



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

Yo-net: /* 五線譜 */

2023-02-02T14:55:59Z

五線譜

← 古い版		2023年2月2日 (木) 23:55時点における版
132行目:		132行目:
	</yjavascript>		</yjavascript>

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript" line start="1">
	<div id="yonet202301_Output01"></div>		<div id="yonet202301_Output01"></div>
	<script>		<script>
147行目:		147行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>
			Stave オブジェクトを利用しますので、宣言のところに Stave を追加しました。



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

Yo-net: /* 五線譜 */

2023-02-02T14:51:25Z

五線譜

← 古い版		2023年2月2日 (木) 23:51時点における版
116行目:		116行目:
	上記で土台は出来上がっていることになりますので、少しコードを追加すると五線譜が描けます。		上記で土台は出来上がっていることになりますので、少しコードを追加すると五線譜が描けます。


			<div id="yonet202301_Output01"></div>
			<yjavascript></script>
			<script>
			(function(){
			const {
			Factory,
			Stave,
			} = Vex.Flow;

			const f = new Factory({ renderer: { elementId: 'yonet202301_Output01', width: 1000, height: 195 } });
			const ctx = f.getContext();
			const stave1 = new Stave(10, 50, 400).setContext(ctx).draw();
			})();
			</yjavascript>

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
132行目:		147行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>




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

Yo-net: /* HTMLタグの置き換えと描画エリア */

2023-02-02T14:49:11Z

HTMLタグの置き換えと描画エリア

@@ 108行目: / 108行目: @@
 </script>
 </syntaxhighlight>
 [[VexFlow 使い方]]に戻る。

Yo-net: /* HTMLタグの置き換えと描画エリア */

2023-02-02T14:31:30Z

HTMLタグの置き換えと描画エリア

← 古い版		2023年2月2日 (木) 23:31時点における版
96行目:		96行目:

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	<script src="https://~~wiki~~.~~yo-~~net~~.jp~~/vexflow/build/cjs/vexflow.js"></script>//※1pageで一度だけ記述する行		<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>//※1pageで一度だけ記述する行
	<div id="VexFlow"></div>		<div id="VexFlow"></div>
	<script>		<script>

Yo-net: /* HTMLタグの置き換えと描画エリア */

2023-02-02T14:28:41Z

HTMLタグの置き換えと描画エリア

← 古い版		2023年2月2日 (木) 23:28時点における版
96行目:		96行目:

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
			<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script>//※1pageで一度だけ記述する行
	<div id="VexFlow"></div>		<div id="VexFlow"></div>
	<script>		<script>

Yo-net: /* HTMLタグの置き換えと描画エリア */

2023-02-02T14:23:11Z

HTMLタグの置き換えと描画エリア

← 古い版		2023年2月2日 (木) 23:23時点における版
53行目:		53行目:
	<td>置き換えするタグのID名</td>		<td>置き換えするタグのID名</td>
	<td>elementId</td>		<td>elementId</td>
	<td>VexFlow</td>		<td>'VexFlow'</td>
	</tr>		</tr>
	</table>		</table>