VexFlow 小節の上下の接続 - 版の履歴

Yo-net: /* 接続線 */

2024-03-12T08:07:23Z

接続線

← 古い版		2024年3月12日 (火) 17:07時点における版
149行目:		149行目:

	var connector = new VF.StaveConnector(stave1, stave5);		var connector = new VF.StaveConnector(stave1, stave5);
	connector.setType(VF.StaveConnector.type.~~BOLD_DOUBLE_LEFT~~);		connector.setType(VF.StaveConnector.type.SINGLE);
	connector.setContext(ctx);		connector.setContext(ctx);
	connector.draw();		connector.draw();
319行目:		319行目:
	ctx.strokeStyle = defaultStyle.strokeStyle;		ctx.strokeStyle = defaultStyle.strokeStyle;

	const stave1 = new Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx);		const stave1 = new Stave(30, 50, nHeadMargin + nStaveWidth).setContext(ctx);
	stave1.setClef("treble").setContext(ctx);		stave1.setClef("treble").setContext(ctx);
	stave1.setTimeSignature('4/4').setContext(ctx);		stave1.setTimeSignature('4/4').setContext(ctx);

Yo-net: /* 接続線 */

2024-03-12T08:06:11Z

接続線

← 古い版		2024年3月12日 (火) 17:06時点における版
531行目:		531行目:
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>StaveConnector.type.BOLD_DOUBLE_LEFT</td>		<td>StaveConnector.type.BOLD_DOUBLE_LEFT</td>
	<td>小節の左に太い二重線</td>		<td>小節の左に太い二重線(小節線も上下で繋げて左に太線1本)</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>StaveConnector.type.BOLD_DOUBLE_RIGHT</td>		<td>StaveConnector.type.BOLD_DOUBLE_RIGHT</td>
	<td>小節の右に太い二重線</td>		<td>小節の右に太い二重線(小節線も上下で繋げて右に太線1本)</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
547行目:		547行目:
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>StaveConnector.type.NONE</td>		<td>StaveConnector.type.NONE</td>
	<td>~~小節の右上にダカーポ時のフィーネマーク~~</td>		<td>接続線なし</td>
	</tr>		</tr>
	</table>		</table>

Yo-net: /* 接続線 */

2024-03-12T08:04:08Z

接続線

← 古い版		2024年3月12日 (火) 17:04時点における版
149行目:		149行目:

	var connector = new VF.StaveConnector(stave1, stave5);		var connector = new VF.StaveConnector(stave1, stave5);
	connector.setType(VF.StaveConnector.type.~~DOUBLE~~);		connector.setType(VF.StaveConnector.type.BOLD_DOUBLE_LEFT);
	connector.setContext(ctx);		connector.setContext(ctx);
	connector.draw();		connector.draw();
523行目:		523行目:
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>StaveConnector.type.DOUBLE</td>		<td>StaveConnector.type.DOUBLE</td>
	<td>小節の左に二重線</td>		<td>小節の左に二重線(小節線と離れて左に太線1本)</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>StaveConnector.type.THIN_DOUBLE</td>		<td>StaveConnector.type.THIN_DOUBLE</td>
	<td>小節の左に細い二重線</td>		<td>小節の左に細い二重線(小節線と離れて左に細線1本)</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
534行目:		534行目:
	</tr>		</tr>
	<tr>		<tr>
	<td>StaveConnector.type.~~BOLD_DOUBLE_LEFT~~</td>		<td>StaveConnector.type.BOLD_DOUBLE_RIGHT</td>
	<td>小節の右に太い二重線</td>		<td>小節の右に太い二重線</td>
	</tr>		</tr>

Yo-net: /* 接続線 */

2024-03-12T08:01:10Z

接続線

← 古い版		2024年3月12日 (火) 17:01時点における版
149行目:		149行目:

	var connector = new VF.StaveConnector(stave1, stave5);		var connector = new VF.StaveConnector(stave1, stave5);
	connector.setType(VF.StaveConnector.type.~~SINGLE~~);		connector.setType(VF.StaveConnector.type.DOUBLE);
	connector.setContext(ctx);		connector.setContext(ctx);
	connector.draw();		connector.draw();

Yo-net: /* 接続線 */

2024-03-12T07:59:59Z

接続線

← 古い版		2024年3月12日 (火) 16:59時点における版
81行目:		81行目:
	ctx.strokeStyle = defaultStyle.strokeStyle;		ctx.strokeStyle = defaultStyle.strokeStyle;

	const stave1 = new Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx);		const stave1 = new Stave(30, 50, nHeadMargin + nStaveWidth).setContext(ctx);
	stave1.setClef("treble").setContext(ctx);		stave1.setClef("treble").setContext(ctx);
	stave1.setTimeSignature('4/4').setContext(ctx);		stave1.setTimeSignature('4/4').setContext(ctx);

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

2024-03-12T07:58:50Z

← 古い版		2024年3月12日 (火) 16:58時点における版
502行目:		502行目:

	setTypeの引数にはさまざまな線の種類に関する設定ができます。		setTypeの引数にはさまざまな線の種類に関する設定ができます。


			<table style="border: 0; border-collapse: collapse;">
			<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
			<td>コード</td>
			<td>表示内容</td>
			</tr>
			<tr>
			<td>StaveConnector.type.SINGLE</td>
			<td>小節の左に細線</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>StaveConnector.type.SINGLE_LEFT</td>
			<td>小節の左に細線※SINGLEと全く同じ</td>
			</tr>
			<tr>
			<td>StaveConnector.type.SINGLE_RIGHT</td>
			<td>小節の右に細線</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>StaveConnector.type.DOUBLE</td>
			<td>小節の左に二重線</td>
			</tr>
			<tr>
			<td>StaveConnector.type.THIN_DOUBLE</td>
			<td>小節の左に細い二重線</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>StaveConnector.type.BOLD_DOUBLE_LEFT</td>
			<td>小節の左に太い二重線</td>
			</tr>
			<tr>
			<td>StaveConnector.type.BOLD_DOUBLE_LEFT</td>
			<td>小節の右に太い二重線</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>StaveConnector.type.BRACE</td>
			<td>小節の左に { のようなカッコ線</td>
			</tr>
			<tr>
			<td>StaveConnector.type.BRACKET</td>
			<td>小節の左に [ のようなカッコ線。例示のもの</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>StaveConnector.type.NONE</td>
			<td>小節の右上にダカーポ時のフィーネマーク</td>
			</tr>
			</table>


			記事内で例を示したものは、シングルとブラケットとの合わせ技によって描画できます。


			setContextはFactoryが2種類以上あるときはコンテキスト(ctxのようなオブジェクト)が2種類以上保持されていて、どのコンテキストに描画するかを決定するだけのものです。コンテキストが1個しかないときは退屈な指定ですが必ず指定しなければなりません。


			drawは引数が不要ですが、プログラム内で指示された時点で描画処理が動作します。したがって描画処理をする前までに各種設定が終わっている必要があります。




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

Yo-net: /* 接続線 */

2024-03-12T07:39:40Z

接続線

@@ 264行目: / 264行目: @@
    StaveTie,
    BarLine,
    Renderer
 } = Vex.Flow;
@@ 269行目: / 270行目: @@
 let nscale = 0.68
 let nwidth = 1040;
-let nheight = 420;
+let nheight = 620;
 let nHeadMargin = 70;
@@ 384行目: / 385行目: @@
 stave5.draw();
 const notes5 = [
@@ 442行目: / 448行目: @@
 const stave8 = new Stave(stave7.width + stave7.x, stave5.y, nStaveWidth).setContext(ctx);
 stave8.setMeasure(8);
 stave8.draw();
 })();
@@ 453行目: / 489行目: @@
-staveオブジェクトのメンバ関数に.setMeasureという関数があり
+StaveConnectorというクラスを生成するときにコンストラクタの引数として、線を引く、2つの小節つまりはStaveオブジェクトを設定します。
-という感じで指定するだけです。ト音記号とかの外側に表示される部分が謎。そんなことする？全国の吹奏楽部諸君もそう思わない？内側に書くでしょ。普通ね。そして、またフォントがダサい。ビビる。まぁ使わせてもらっときながら文句ばっかりでるもんですね。ひどいよね。Vexflowの中の人はもうちょっと基本的な機能の部分にこだわりを見せてほしいな。
+setTypeの引数にはさまざまな線の種類に関する設定ができます。
 [[VexFlow 使い方]]に戻る。

Yo-net: /* セクション記号 */

2024-03-12T06:55:19Z

セクション記号

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


	== '''~~セクション記号~~''' ==		== '''接続線''' ==
	<div id="yonet202403Mid_Output01"></div>		<div id="yonet202403Mid_Output01"></div>
	<yjavascript></script>		<yjavascript></script>

Yo-net: /* セクション記号 */

2024-03-12T06:53:42Z

セクション記号

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

	let nHeadMargin = 70;		let nHeadMargin = 70;

Yo-net: /* セクション記号 */

2024-03-12T06:53:12Z

セクション記号

@@ 210行目: / 210行目: @@
 const stave8 = new Stave(stave7.width + stave7.x, stave5.y, nStaveWidth).setContext(ctx);
 stave8.setMeasure(8);
 stave8.draw();
 })();