VexFlow 楽器名記載 - 版の履歴

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

2024-03-12T15:41:49Z

← 古い版		2024年3月13日 (水) 00:41時点における版
5行目:		5行目:
	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。
	== '''概要''' ==		== '''概要''' ==
	~~スコア譜のように小節の最初に楽器名を記載する方法ついて説明します。縦書きができるといいのですが、できなさそうな感じです。~~		スコア譜のように小節の最初に楽器名を記載する方法ついて説明します。縦書きができるといいのですが、できなさそうな感じです。でも、この後の曲名記載の技術を使えばまぁできるんでしょうね。知恵を絞ってVexFlowの中の人の斜め上くらいをいきたいですね。

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

2024-03-12T10:08:09Z

← 古い版		2024年3月12日 (火) 19:08時点における版
6行目:		6行目:
	== '''概要''' ==		== '''概要''' ==
	スコア譜のように小節の最初に楽器名を記載する方法ついて説明します。縦書きができるといいのですが、できなさそうな感じです。		スコア譜のように小節の最初に楽器名を記載する方法ついて説明します。縦書きができるといいのですが、できなさそうな感じです。


	Staveのメンバ関数であるsetTextで機能を提供しています。第一引数に文字列リテラルを指定し、第二引数にVF.Modifier.Position.LEFTのような表示位置引数と第三引数にX, Y方向へのオフセットを付与します。 {shift_x: 0, shift_y: 0} のような感じです。		Staveのメンバ関数であるsetTextで機能を提供しています。第一引数に文字列リテラルを指定し、第二引数にVF.Modifier.Position.LEFTのような表示位置引数と第三引数にX, Y方向へのオフセットを付与します。 {shift_x: 0, shift_y: 0} のような感じです。

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

2024-03-12T09:35:48Z

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


			<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>Modifier.Position.LEFT</td>
			<td>小節の左にテキストを追加</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>Modifier.Position.RIGHT</td>
			<td>小節の右にテキストを追加</td>
			</tr>
			<tr>
			<td>Modifier.Position.ABOVE</td>
			<td>小節の上にテキストを追加</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>Modifier.Position.BELOW</td>
			<td>小節の下にテキストを追加</td>
			</tr>
			</table>


566行目:		588行目:


	~~記事内で例を示したものは、シングルとブラケットとの合わせ技によって描画できます。~~		テキストの追加がこのように小節を中心に好きなだけオフセットを入れて好きなように挿入できるということは、なんでも表示させようと思えば表示できるということでしょう。テキストの倍率とフォントの指定とフォントの作成ができればの話ですが。


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


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

Yo-net: /* 概要 */

2024-03-12T09:26:54Z

概要

← 古い版		2024年3月12日 (火) 18:26時点における版
6行目:		6行目:
	== '''概要''' ==		== '''概要''' ==
	スコア譜のように小節の最初に楽器名を記載する方法ついて説明します。縦書きができるといいのですが、できなさそうな感じです。		スコア譜のように小節の最初に楽器名を記載する方法ついて説明します。縦書きができるといいのですが、できなさそうな感じです。

			Staveのメンバ関数であるsetTextで機能を提供しています。第一引数に文字列リテラルを指定し、第二引数にVF.Modifier.Position.LEFTのような表示位置引数と第三引数にX, Y方向へのオフセットを付与します。 {shift_x: 0, shift_y: 0} のような感じです。


			あるいは、StaveConnectorのメンバ関数であるsetTextで機能を提供しています。第一引数に文字列リテラルを付与するだけです。以下のとおりの表示になります。


			Staveのメンバ関数であるsetTextの第二引数は以下のような値になっています。



	~~StaveConnectorのメンバ関数であるsetTextで提供しています。第一引数に文字列リテラルを付与するだけです。以下のとおりの表示になります。~~

Yo-net: /* 楽器名の記述 */

2024-03-12T09:22:26Z

楽器名の記述

← 古い版		2024年3月12日 (火) 18:22時点における版
268行目:		268行目:
	BarLine,		BarLine,
	StaveConnector,		StaveConnector,
			Modifier,
	Renderer		Renderer
	} = Vex.Flow;		} = Vex.Flow;

	let nscale = 0.68		let nscale = 0.64
	let nwidth = 1040;		let nwidth = 1040;
	let nheight = 620;		let nheight = 620;
322行目:		323行目:
	ctx.strokeStyle = defaultStyle.strokeStyle;		ctx.strokeStyle = defaultStyle.strokeStyle;

	const stave1 = new Stave(30, 50, nHeadMargin + nStaveWidth).setContext(ctx);		const stave1 = new Stave(130, 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);
	stave1.setSection("A", 0);		stave1.setSection("A", 0);
	stave1.setMeasure(1);		stave1.setMeasure(1);
			stave1.setText("Vocal", VF.Modifier.Position.LEFT, {shift_y: 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
467行目:		469行目:
	connector9_2.setType(VF.StaveConnector.type.BRACKET);		connector9_2.setType(VF.StaveConnector.type.BRACKET);
	connector9_2.setContext(ctx);		connector9_2.setContext(ctx);
			connector9_2.setText('E.Guitar');
	connector9_2.draw();		connector9_2.draw();

Yo-net: /* 楽器名の記述 */

2024-03-12T09:21:08Z

楽器名の記述

← 古い版		2024年3月12日 (火) 18:21時点における版
87行目:		87行目:
	stave1.setSection("A", 0);		stave1.setSection("A", 0);
	stave1.setMeasure(1);		stave1.setMeasure(1);
	stave1.setText("Vocal", VF.Modifier.Position.LEFT, {shift_y: ~~-10~~});		stave1.setText("Vocal", VF.Modifier.Position.LEFT, {shift_y: 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

Yo-net: /* 楽器名の記述 */

2024-03-12T09:20:29Z

楽器名の記述

← 古い版		2024年3月12日 (火) 18:20時点における版
27行目:		27行目:
	BarLine,		BarLine,
	StaveConnector,		StaveConnector,
			Modifier,
	Renderer		Renderer
	} = Vex.Flow;		} = Vex.Flow;
86行目:		87行目:
	stave1.setSection("A", 0);		stave1.setSection("A", 0);
	stave1.setMeasure(1);		stave1.setMeasure(1);
	stave1.setText("Vocal");		stave1.setText("Vocal", VF.Modifier.Position.LEFT, {shift_y: -10});
	//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

Yo-net: /* 楽器名の記述 */

2024-03-12T09:14:32Z

楽器名の記述

← 古い版		2024年3月12日 (火) 18:14時点における版
86行目:		86行目:
	stave1.setSection("A", 0);		stave1.setSection("A", 0);
	stave1.setMeasure(1);		stave1.setMeasure(1);
			stave1.setText("Vocal");
	//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

Yo-net: /* 概要 */

2024-03-12T09:13:50Z

概要

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


	~~StaveConnectorというクラスがこの機能を提供しています。以下のとおりの表示になります。~~		StaveConnectorのメンバ関数であるsetTextで提供しています。第一引数に文字列リテラルを付与するだけです。以下のとおりの表示になります。

Yo-net: /* 楽器名の記述 */

2024-03-12T09:11:45Z

楽器名の記述

← 古い版		2024年3月12日 (火) 18:11時点における版
30行目:		30行目:
	} = Vex.Flow;		} = Vex.Flow;

	let nscale = 0.60		let nscale = 0.64
	let nwidth = 1040;		let nwidth = 1040;
	let nheight = 620;		let nheight = 620;