VexFlow テキスト挿入 - 版の履歴

Yo-net: /* テキスト挿入 */

2024-03-13T15:12:19Z

テキスト挿入

← 古い版		2024年3月14日 (木) 00:12時点における版
155行目:		155行目:
	var note2_1_X = note2_1.getAbsoluteX();		var note2_1_X = note2_1.getAbsoluteX();
	//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない		//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない
	var staveFrom1To4_Y = note2_1.getStave().getYForLine(-4);		var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);

	//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));		//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));
663行目:		663行目:

	あとは、自分で作ったWebフォントが準備できれば、思うがままのグラフィックも好きな位置に表示できるってことですね。Svgの操作はさらに難しそうなイメージだけど。時間があればやってみようかな。		あとは、自分で作ったWebフォントが準備できれば、思うがままのグラフィックも好きな位置に表示できるってことですね。Svgの操作はさらに難しそうなイメージだけど。時間があればやってみようかな。


			ヒントとして、音符のX位置も取得できる。getAbsoluteXっていう関数がある。音符のあるところの縦位置については、その五線譜の一番下段を0、一番上が4として、つまり真ん中は2数値をいれれば、その値が取得できる。0.5で半音の部分も座標が返ってくる。ノートオブジェクトの中の.getStave().getYForLine(-4)みたいな関数を使う。


			*var note2_1_X = note2_1.getAbsoluteX();
			*<s>//var note2_1_Y = note2_1.getAbsoluteY();</s> これは存在しない。
			*var staveFrom1To4_Y = note2_1.getStave().getYForLine(-4);



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

Yo-net: /* テキスト挿入 */

2024-03-13T15:04:01Z

テキスト挿入

← 古い版		2024年3月14日 (木) 00:04時点における版
155行目:		155行目:
	var note2_1_X = note2_1.getAbsoluteX();		var note2_1_X = note2_1.getAbsoluteX();
	//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない		//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない
	var staveFrom1To4_Y = note2_1.getStave().getYForLine(-2);		var staveFrom1To4_Y = note2_1.getStave().getYForLine(-4);

	//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));		//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));

Yo-net: /* テキスト挿入 */

2024-03-13T14:44:16Z

テキスト挿入

← 古い版		2024年3月13日 (水) 23:44時点における版
155行目:		155行目:
	var note2_1_X = note2_1.getAbsoluteX();		var note2_1_X = note2_1.getAbsoluteX();
	//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない		//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない
	var staveFrom1To4_Y = note2_1.getStave().getYForLine(0);		var staveFrom1To4_Y = note2_1.getStave().getYForLine(-2);

	//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));		//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));

2024年3月13日 (水) 14:41にYo-netによる

2024-03-13T14:41:23Z

← 古い版		2024年3月13日 (水) 23:41時点における版
155行目:		155行目:
	var note2_1_X = note2_1.getAbsoluteX();		var note2_1_X = note2_1.getAbsoluteX();
	//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない		//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない
	var staveFrom1To4_Y = note2_1.getStave().getYForLine(2);		var staveFrom1To4_Y = note2_1.getStave().getYForLine(0);

	//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));		//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));

Yo-net: /* テキスト挿入 */

2024-03-13T14:27:41Z

テキスト挿入

← 古い版		2024年3月13日 (水) 23:27時点における版
154行目:		154行目:

	var note2_1_X = note2_1.getAbsoluteX();		var note2_1_X = note2_1.getAbsoluteX();
	var note2_1_Y = note2_1.getAbsoluteY();		//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない
	var staveFrom1To4_Y = note2_1.getStave().getYForLine(2);		var staveFrom1To4_Y = note2_1.getStave().getYForLine(2);

Yo-net: /* テキスト挿入 */

2024-03-13T14:22:20Z

テキスト挿入

← 古い版		2024年3月13日 (水) 23:22時点における版
152行目:		152行目:

	stave2Voice.draw(ctx, stave2);		stave2Voice.draw(ctx, stave2);

			var note2_1_X = note2_1.getAbsoluteX();
			var note2_1_Y = note2_1.getAbsoluteY();
			var staveFrom1To4_Y = note2_1.getStave().getYForLine(2);

	//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));		//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));

Yo-net: /* テキスト挿入 */

2024-03-13T14:12:34Z

テキスト挿入

← 古い版		2024年3月13日 (水) 23:12時点における版
146行目:		146行目:
	var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });		var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
	stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4]);		stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4]);
	stave2Voice.setStave(stave2);		//stave2Voice.setStave(stave2);

			var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]);//.format([stave2Voice], nStaveWidth);
			formatter2.formatToStave([stave2Voice], stave2);

			stave2Voice.draw(ctx, stave2);

	~~var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]).format([stave2Voice], nStaveWidth);~~
	~~formatter2.formatToStave([stave2Voice], stave2);//~~
	//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));		//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));

Yo-net: /* テキスト挿入 */

2024-03-13T12:04:24Z

テキスト挿入

← 古い版		2024年3月13日 (水) 21:04時点における版
150行目:		150行目:
	var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]).format([stave2Voice], nStaveWidth);		var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]).format([stave2Voice], nStaveWidth);
	formatter2.formatToStave([stave2Voice], stave2);//		formatter2.formatToStave([stave2Voice], stave2);//
	stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));		//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));

	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);

Yo-net: /* テキスト挿入 */

2024-03-13T11:56:54Z

テキスト挿入

← 古い版		2024年3月13日 (水) 20:56時点における版
146行目:		146行目:
	var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });		var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
	stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4]);		stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4]);
			stave2Voice.setStave(stave2);

	var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]).format([stave2Voice], nStaveWidth);		var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]).format([stave2Voice], nStaveWidth);
	formatter2.formatToStave([stave2Voice], stave2);//		formatter2.formatToStave([stave2Voice], stave2);//

Yo-net: /* テキスト挿入 */

2024-03-13T11:51:39Z

テキスト挿入

← 古い版		2024年3月13日 (水) 20:51時点における版
148行目:		148行目:
	var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]).format([stave2Voice], nStaveWidth);		var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]).format([stave2Voice], nStaveWidth);
	formatter2.formatToStave([stave2Voice], stave2);//		formatter2.formatToStave([stave2Voice], stave2);//
	//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));		stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));

	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);