VexFlow 打楽器譜 - 版の履歴

2024年4月4日 (木) 09:54にYo-netによる

2024-04-04T09:54:21Z

← 古い版		2024年4月4日 (木) 18:54時点における版
1,980行目:		1,980行目:
	allUniqueIdsは886行目から900行目の処理によって、符頭が非表示になります。		allUniqueIdsは886行目から900行目の処理によって、符頭が非表示になります。


			一線譜を描く場合はStaveクラスのオブジェクトを作成して、描画するまでの間に、Visbleをfalseにするという設定が必要で、以下のようにします。


			*(Staveクラスのオブジェクト).setConfigForLine(0～4, {visible: false} );


			setConfigForLine関数で設定を変えることができます。


			'''第一引数：'''五線譜の上から0、1、…、4と対応しています。数値を設定します。


			'''第二引数：'''visibleキーにfalseという値を持ったオブジェクトを指定します。


			なんども呼び出すのが面倒なのでfor文とif文を使って以下のように使うのが便利みたいです。


			<syntaxhighlight lang="javascript">
			for (let i = 0; i < 5; i++) {
			if (i != 2){
			stave17.setConfigForLine(i, {visible: false} );
			}
			}
			</syntaxhighlight>


			という感じです。今回のコードではもうちょっと違ったjavascriptの書き方をしています。覚えやすい方法で使うといいでしょう。



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

2024年4月2日 (火) 15:20にYo-netによる

2024-04-02T15:20:42Z

← 古い版		2024年4月3日 (水) 00:20時点における版
1,859行目:		1,859行目:


	第一引数：おそらく配列化されているであろう一小節分のStaveNoteのオブジェクト名を受け取ります。どの配列のStaveNoteの要素にアクセスするかは次の第二引数で指定するからです。つまりStaveNoteが配列化されていない場合は、この関数は使えません。		'''第一引数：'''おそらく配列化されているであろう一小節分のStaveNoteのオブジェクト名を受け取ります。どの配列のStaveNoteの要素にアクセスするかは次の第二引数で指定するからです。つまりStaveNoteが配列化されていない場合は、この関数は使えません。


	第二引数：アクセスして座標取得したいStaveNoteの要素を指定します。座標を何回か使いたい場合もありますので、同じ要素番号を指定することも可能です。要素ごとのx座標は同じ値を持つので、同じ座標値が配列の中で並びますが、やりたいことでもあるので問題ありません。また第三引数によっては同じStaveNoteの要素でも、.y座標値が変わります。		'''第二引数：'''アクセスして座標取得したいStaveNoteの要素を指定します。座標を何回か使いたい場合もありますので、同じ要素番号を指定することも可能です。要素ごとのx座標は同じ値を持つので、同じ座標値が配列の中で並びますが、やりたいことでもあるので問題ありません。また第三引数によっては同じStaveNoteの要素でも、.y座標値が変わります。


	第三引数：第二引数で指定したStaveNoteの五線譜の一番上を1とした座標値を取得できます。五線譜の間隔は10px相当となっています。五線譜の一番下なら5ですし、さらにその範囲の外なら0や負の値、5より大きい値を使うこともできます。このような値を配列にしたものを設定します。		'''第三引数：'''第二引数で指定したStaveNoteの五線譜の一番上を1とした座標値を取得できます。五線譜の間隔は10px相当となっています。五線譜の一番下なら5ですし、さらにその範囲の外なら0や負の値、5より大きい値を使うこともできます。このような値を配列にしたものを設定します。


1,903行目:		1,903行目:


	~~第一引数：この関数専用のオブジェクトを指定します。以下のようなキーを設定します。~~		'''第一引数：'''この関数専用のオブジェクトを指定します。以下のようなキーを設定します。


	textContent：文字列を配列あるいは文字列で定義します。配列になっている場合はshift_xの対応する要素に対しての文字列になります。楽譜記号である可能性があるので普通の文字列では表せないコードポイントである可能性がありますので、その場合は\u(16進数1桁～8桁)で表します。4桁以内であることが多いと思います。例えば"\uE501\uE502"、["\uE501", "\uE502"]、["＜Ｓｈａｋｅｒ＞"]のような値が有効です。必須です。shift_xに対して要素が足りない場合は最後の要素値が使われます。		'''textContent：'''文字列を配列あるいは文字列で定義します。配列になっている場合はshift_xの対応する要素に対しての文字列になります。楽譜記号である可能性があるので普通の文字列では表せないコードポイントである可能性がありますので、その場合は\u(16進数1桁～8桁)で表します。4桁以内であることが多いと思います。例えば"\uE501\uE502"、["\uE501", "\uE502"]、["＜Ｓｈａｋｅｒ＞"]のような値が有効です。必須です。shift_xに対して要素が足りない場合は最後の要素値が使われます。


	strID：適当な唯一のIDをつけます。あとで探して、改造する必要がある場合に有用なIDとなりますので、名づけをしておくと便利な場合もあれば、あとあと使う予定もない場合には名前を付けるのが嫌になってくる場合もありますが、名前を付けます。shift_xの要素番号に対応したサフィックス(_要素番号)がIDには付与されます。		'''strID：'''適当な唯一のIDをつけます。あとで探して、改造する必要がある場合に有用なIDとなりますので、名づけをしておくと便利な場合もあれば、あとあと使う予定もない場合には名前を付けるのが嫌になってくる場合もありますが、名前を付けます。shift_xの要素番号に対応したサフィックス(_要素番号)がIDには付与されます。


	Stave_x ~~0：isOffset_x_absキーがtrueのときは使われない値になります。省略可能です。~~ isOffset_x_absキーがfalseなのに省略すると規定値は0なので、描画領域内に文字が貼り付けられないと思います。		'''Stave_x 0：'''isOffset_x_absキーがtrueのときは使われない値になります。省略可能です。 isOffset_x_absキーがfalseなのに省略すると規定値は0なので、描画領域内に文字が貼り付けられないと思います。
	~~Stave_y 0：x値と同様です。y座標として機能します。~~

			'''Stave_y 0：'''x値と同様です。y座標として機能します。

	isOffset_x_abs：shift_xで使う値が絶対値座標なのかどうかを指定します。規定値はfalseで、前のテキストの相対値になります。この関数は横にテキストを並べたいときに使うつもりで作った関数だから規定値はfalseです。

			'''isOffset_x_abs：'''shift_xで使う値が絶対値座標なのかどうかを指定します。規定値はfalseで、前のテキストの相対値になります。この関数は横にテキストを並べたいときに使うつもりで作った関数だから規定値はfalseです。

	Stave_x_Offset：Stave_Xやshift_xで指定した座標からのOffsetのx座標を指定できます。配列にするとshift_xの要素に対応した値が採用されます。規定値は0です。shift_xに対して要素が足りない場合は最後の要素値が使われます。
	~~Stave_y_Offset：x値と同様です。y座標として機能します。~~

			'''Stave_x_Offset：'''Stave_Xやshift_xで指定した座標からのOffsetのx座標を指定できます。配列にするとshift_xの要素に対応した値が採用されます。規定値は0です。shift_xに対して要素が足りない場合は最後の要素値が使われます。

	~~StaveWidth：目指す横幅を設定します。うまく機能しない場合もあります。省略可能です。~~		'''Stave_y_Offset：'''x値と同様です。y座標として機能します。
	~~StaveHeight：目指す縦幅を設定します。うまく機能しない場合もあります。。省略可能です。~~


	~~StaveVerticalScale：StaveHeightが機能しない場合に設定すると縦の倍率が調整できます。。省略可能です。~~		'''StaveWidth：'''目指す横幅を設定します。うまく機能しない場合もあります。省略可能です。

			'''StaveHeight：'''目指す縦幅を設定します。うまく機能しない場合もあります。。省略可能です。

	~~fontSize：フォントの大きさを指定します。40がちょうどいいみたいなので、40が規定値になっています。~~

			'''StaveVerticalScale：'''StaveHeightが機能しない場合に設定すると縦の倍率が調整できます。。省略可能です。

	~~fontFamily：フォントファミリ名を設定します。規定値は"Bravura, Arial"です。BravuraがなければArialです。Windowsのフォントかな？~~

			'''fontSize：'''フォントの大きさを指定します。40がちょうどいいみたいなので、40が規定値になっています。

	~~shift_x：よこにずらしていく座標値を配列で指定します。これを指定しない場合は~~[0]で機能します。この値を使いこなすのがこの関数の醍醐味ですが、単純に一文字表示するのにも便利は便利なので配列要素が1個でもいいですね。isOffset_x_absがtrueのときは絶対値として機能しますので、y座標値も含んだ[{x: 0, y: 0}, {x: 0, y: 0}, …]のような形式である必要があります。addShift関数からの戻り値がこのような形式になっています。
			'''fontFamily：'''フォントファミリ名を設定します。規定値は"Bravura, Arial"です。BravuraがなければArialです。Windowsのフォントかな？


			'''shift_x：'''よこにずらしていく座標値を配列で指定します。これを指定しない場合は[0]で機能します。この値を使いこなすのがこの関数の醍醐味ですが、単純に一文字表示するのにも便利は便利なので配列要素が1個でもいいですね。isOffset_x_absがtrueのときは絶対値として機能しますので、y座標値も含んだ[{x: 0, y: 0}, {x: 0, y: 0}, …]のような形式である必要があります。addShift関数からの戻り値がこのような形式になっています。


1,948行目:		1,951行目:


	~~第一引数：第二引数を指定する場合はStaveNoteオブジェクトを指定するか、第二引数を省略する場合はStaveNoteオブジェクトの配列要素を指定します。~~		'''第一引数：'''第二引数を指定する場合はStaveNoteオブジェクトを指定するか、第二引数を省略する場合はStaveNoteオブジェクトの配列要素を指定します。


	~~第二引数：StaveNoteオブジェクトを指定した場合は、ここで、取得したい要素の配列を設定します。~~		'''第二引数：'''StaveNoteオブジェクトを指定した場合は、ここで、取得したい要素の配列を設定します。


1,960行目:		1,963行目:


	~~第一引数：getUniqueNoteheadIdsを設定します。戻り値はグローバル変数allUniqueIdsで格納します。~~		'''第一引数：'''getUniqueNoteheadIdsを設定します。戻り値はグローバル変数allUniqueIdsで格納します。

2024年4月2日 (火) 15:16にYo-netによる

2024-04-02T15:16:56Z

← 古い版		2024年4月3日 (水) 00:16時点における版
1,975行目:		1,975行目:


	~~allUniqueIdsは886行目からの処理によって、符頭が非表示になります。~~		allUniqueIdsは886行目から900行目の処理によって、符頭が非表示になります。

2024年4月2日 (火) 15:14にYo-netによる

2024-04-02T15:14:57Z

← 古い版		2024年4月3日 (水) 00:14時点における版
1,937行目:		1,937行目:

	shift_x：よこにずらしていく座標値を配列で指定します。これを指定しない場合は[0]で機能します。この値を使いこなすのがこの関数の醍醐味ですが、単純に一文字表示するのにも便利は便利なので配列要素が1個でもいいですね。isOffset_x_absがtrueのときは絶対値として機能しますので、y座標値も含んだ[{x: 0, y: 0}, {x: 0, y: 0}, …]のような形式である必要があります。addShift関数からの戻り値がこのような形式になっています。		shift_x：よこにずらしていく座標値を配列で指定します。これを指定しない場合は[0]で機能します。この値を使いこなすのがこの関数の醍醐味ですが、単純に一文字表示するのにも便利は便利なので配列要素が1個でもいいですね。isOffset_x_absがtrueのときは絶対値として機能しますので、y座標値も含んだ[{x: 0, y: 0}, {x: 0, y: 0}, …]のような形式である必要があります。addShift関数からの戻り値がこのような形式になっています。


			それもこれも、符頭を消す処理が無ければできないことなので、符頭を消すNoteHeadの番号を集める処理が必要です。グローバル変数のallUniqueIdsが必要です。


			getUniqueNoteheadIds関数を以下のようにするとIDを取得できます。


			*getUniqueNoteheadIds(StaveNote, Array of StaveNoteElementNumber)


			第一引数：第二引数を指定する場合はStaveNoteオブジェクトを指定するか、第二引数を省略する場合はStaveNoteオブジェクトの配列要素を指定します。


			第二引数：StaveNoteオブジェクトを指定した場合は、ここで、取得したい要素の配列を設定します。


			戻り値を使って次の符頭の配列を構築する関数を実行するとallUniqueIdsが完成します。


			*updateAllUniqueIds(return of getUniqueNoteheadIds_Value)


			第一引数：getUniqueNoteheadIdsを設定します。戻り値はグローバル変数allUniqueIdsで格納します。


			戻り値には消したい符頭のアイテムが揃った状態が構築されます。


			以下のように使います。allUniqueIdsは名前も変えられない固定のグローバル変数です。UniqueIdsは一時的に使う橋渡しをするだけの変数なので、どんな名前でもいいです。


			<syntaxhighlight lang="javascript">
			UniqueIds = getUniqueNoteheadIds(notes13_2, [0, 1, 3, 5, 6, 8]);
			allUniqueIds = updateAllUniqueIds(UniqueIds);
			</syntaxhighlight>


			allUniqueIdsは886行目からの処理によって、符頭が非表示になります。




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

2024年4月2日 (火) 13:42にYo-netによる

2024-04-02T13:42:00Z

← 古い版		2024年4月2日 (火) 22:42時点における版
1,851行目:		1,851行目:


	やってること自体は前の記事の複数小節休符と同じですので、説明はあまりしません。最後のところで、奥の手の手法を関数化したところが違うくらいです。		自作の関数の使い方を説明します。


			*addShift(StaveNote, Array of StaveNoteElementNumber, Array of StaveNote.getStave().getYForLine(Number))

			この関数は3つの引数を受け取り、自作のPositionクラス(.xと.yだけのメンバを持つ座標)の配列を返却します。


			第一引数：おそらく配列化されているであろう一小節分のStaveNoteのオブジェクト名を受け取ります。どの配列のStaveNoteの要素にアクセスするかは次の第二引数で指定するからです。つまりStaveNoteが配列化されていない場合は、この関数は使えません。


			第二引数：アクセスして座標取得したいStaveNoteの要素を指定します。座標を何回か使いたい場合もありますので、同じ要素番号を指定することも可能です。要素ごとのx座標は同じ値を持つので、同じ座標値が配列の中で並びますが、やりたいことでもあるので問題ありません。また第三引数によっては同じStaveNoteの要素でも、.y座標値が変わります。


			第三引数：第二引数で指定したStaveNoteの五線譜の一番上を1とした座標値を取得できます。五線譜の間隔は10px相当となっています。五線譜の一番下なら5ですし、さらにその範囲の外なら0や負の値、5より大きい値を使うこともできます。このような値を配列にしたものを設定します。


			このようにして取得した返却値はさらに自作の関数insertTextToSVGの引数のキーshift_xの値として設定して、isOffset_x_absキーのブール値をtrueにすることで、取得した座標に指定したテキストを一気に配置することができます。


			例えば、以下のようにすると

			<syntaxhighlight lang="javascript">
			shift13 = addShift(
			notes13_2,
			[0, 1, 2, 3, 5, 5, 6, 6, 7, 7, 8, 8],
			[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
			);
			</syntaxhighlight>


			notes13_2というStaveNoteオブジェクトの配列0～8まで、5～8は2回ずつ使うようにして、第3引数は全て1なので、五線譜の一番上の座標を取得できます。


			次に


			*insertTextToSVG(option)


			この関数は、optionという引数で指定したオブジェクトの内容に従って、SVG内にテキストを配置する仕組みになっています。svgElementというグローバル変数でsvgタグエレメントを保持しておく必要があります。


			<syntaxhighlight lang="javascript">
			var svgContainer = document.getElementById('yonet202403Mid_Output01');
			var svgElement = svgContainer.querySelector('svg');
			</syntaxhighlight>


			という感じでsvgElementというグローバル変数を定義します。上記であれば<div id="yonet202403Mid_Output01"></div>のようにしていたところにVexFlowのFactory内で定義した要素yonet202403Mid_Output01に対してsvgタグが作られるので、上記divタグの中にあるsvgタグをsvgElementが保持してい状態になります。


			第一引数：この関数専用のオブジェクトを指定します。以下のようなキーを設定します。


			textContent：文字列を配列あるいは文字列で定義します。配列になっている場合はshift_xの対応する要素に対しての文字列になります。楽譜記号である可能性があるので普通の文字列では表せないコードポイントである可能性がありますので、その場合は\u(16進数1桁～8桁)で表します。4桁以内であることが多いと思います。例えば"\uE501\uE502"、["\uE501", "\uE502"]、["＜Ｓｈａｋｅｒ＞"]のような値が有効です。必須です。shift_xに対して要素が足りない場合は最後の要素値が使われます。


			strID：適当な唯一のIDをつけます。あとで探して、改造する必要がある場合に有用なIDとなりますので、名づけをしておくと便利な場合もあれば、あとあと使う予定もない場合には名前を付けるのが嫌になってくる場合もありますが、名前を付けます。shift_xの要素番号に対応したサフィックス(_要素番号)がIDには付与されます。


			Stave_x 0：isOffset_x_absキーがtrueのときは使われない値になります。省略可能です。 isOffset_x_absキーがfalseなのに省略すると規定値は0なので、描画領域内に文字が貼り付けられないと思います。
			Stave_y 0：x値と同様です。y座標として機能します。


			isOffset_x_abs：shift_xで使う値が絶対値座標なのかどうかを指定します。規定値はfalseで、前のテキストの相対値になります。この関数は横にテキストを並べたいときに使うつもりで作った関数だから規定値はfalseです。


			Stave_x_Offset：Stave_Xやshift_xで指定した座標からのOffsetのx座標を指定できます。配列にするとshift_xの要素に対応した値が採用されます。規定値は0です。shift_xに対して要素が足りない場合は最後の要素値が使われます。
			Stave_y_Offset：x値と同様です。y座標として機能します。


			StaveWidth：目指す横幅を設定します。うまく機能しない場合もあります。省略可能です。
			StaveHeight：目指す縦幅を設定します。うまく機能しない場合もあります。。省略可能です。


			StaveVerticalScale：StaveHeightが機能しない場合に設定すると縦の倍率が調整できます。。省略可能です。


			fontSize：フォントの大きさを指定します。40がちょうどいいみたいなので、40が規定値になっています。


			fontFamily：フォントファミリ名を設定します。規定値は"Bravura, Arial"です。BravuraがなければArialです。Windowsのフォントかな？


			shift_x：よこにずらしていく座標値を配列で指定します。これを指定しない場合は[0]で機能します。この値を使いこなすのがこの関数の醍醐味ですが、単純に一文字表示するのにも便利は便利なので配列要素が1個でもいいですね。isOffset_x_absがtrueのときは絶対値として機能しますので、y座標値も含んだ[{x: 0, y: 0}, {x: 0, y: 0}, …]のような形式である必要があります。addShift関数からの戻り値がこのような形式になっています。



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

Yo-net: /* 概要 */

2024-04-01T15:58:12Z

概要

← 古い版		2024年4月2日 (火) 00:58時点における版
21行目:		21行目:


	216行目までが、描画の記述を簡素化するための自作あるいはVexFlow公式が提案している関数になってしまいましたが、手軽に自作フォントを使うことができるようになっています。処理のイメージとしては、符旗を描画する処理はVexFlowにやってもらって、消したい符頭を持つNoteにあるStaveHead要素を消す処理を入れ込んでいます。完全に消すとあとあと困るかもしれないので透明にしておきました。印刷するときに困らなければいいのですが…。心配です。それで、消したところの座標にあらたな符頭をつけるみたいな処理を行っています。今回思いついたこの方法は次あたりの記事になるタブ譜の記述でも自分が考えたフォントを使う場合にも便利な方法かなと感じています。まぁなかなか強引なことをやってはいますね。AddShift関数は小節のノート群を指定するとその座標を取得するという処理を担っています。これをinsertTextToSVGの引数のオブジェクトに設定してやると一気に書き換えたい収集したポジションにたいして描画ができるという作戦です。これくらいの苦労ならばVexFlowの記述量とそん色ないほどの作業量だなと感じるレベルで、メンドクサイ処理が可能となります。		216行目までが、描画の記述を簡素化するための自作あるいはVexFlow公式が提案している関数になってしまいましたが、手軽に自作フォントを使うことができるようになっています。処理のイメージとしては、符旗を描画する処理はVexFlowにやってもらって、消したい符頭を持つNoteにあるNoteHead要素を消す処理を入れ込んでいます。完全に消すとあとあと困るかもしれないので透明にしておきました。印刷するときに困らなければいいのですが…。心配です。それで、消したところの座標にあらたな符頭をつけるみたいな処理を行っています。今回思いついたこの方法は次あたりの記事になるタブ譜の記述でも自分が考えたフォントを使う場合にも便利な方法かなと感じています。まぁなかなか強引なことをやってはいますね。addShift関数は小節のノート群を指定するとその座標を取得するという処理を担っています。これをinsertTextToSVGの引数のオブジェクトに設定してやると一気に書き換えたい収集したポジションにたいして描画ができるという作戦です。これくらいの苦労ならばVexFlowの記述量とそん色ないほどの作業量だなと感じるレベルで、メンドクサイ処理が可能となります。

2024年4月1日 (月) 15:52にYo-netによる

2024-04-01T15:52:33Z

← 古い版		2024年4月2日 (火) 00:52時点における版
21行目:		21行目:


	216行目までが、描画の記述を簡素化するための自作あるいはVexFlow公式が提案している関数になってしまいましたが、手軽に自作フォントを使うことができるようになっています。処理のイメージとしては、符旗を描画する処理はVexFlowにやってもらって、消したい符頭を持つNoteにあるStaveHead要素を消す処理を入れ込んでいます。消したところの座標にあらたな符頭をつけるみたいな処理を行っています。今回思いついたこの方法は次あたりの記事になるタブ譜の記述でも自分が考えたフォントを使う場合にも便利な方法かなと感じています。まぁなかなか強引なことをやってはいますね。AddShift関数は小節のノート群を指定するとその座標を取得するという処理を担っています。これをinsertTextToSVGの引数のオブジェクトに設定してやると一気に書き換えたい収集したポジションにたいして描画ができるという作戦です。これくらいの苦労ならばVexFlowの記述量とそん色ないほどの作業量だなと感じるレベルで、メンドクサイ処理が可能となります。		216行目までが、描画の記述を簡素化するための自作あるいはVexFlow公式が提案している関数になってしまいましたが、手軽に自作フォントを使うことができるようになっています。処理のイメージとしては、符旗を描画する処理はVexFlowにやってもらって、消したい符頭を持つNoteにあるStaveHead要素を消す処理を入れ込んでいます。完全に消すとあとあと困るかもしれないので透明にしておきました。印刷するときに困らなければいいのですが…。心配です。それで、消したところの座標にあらたな符頭をつけるみたいな処理を行っています。今回思いついたこの方法は次あたりの記事になるタブ譜の記述でも自分が考えたフォントを使う場合にも便利な方法かなと感じています。まぁなかなか強引なことをやってはいますね。AddShift関数は小節のノート群を指定するとその座標を取得するという処理を担っています。これをinsertTextToSVGの引数のオブジェクトに設定してやると一気に書き換えたい収集したポジションにたいして描画ができるという作戦です。これくらいの苦労ならばVexFlowの記述量とそん色ないほどの作業量だなと感じるレベルで、メンドクサイ処理が可能となります。

Yo-net: /* 概要 */

2024-04-01T15:46:02Z

概要

← 古い版		2024年4月2日 (火) 00:46時点における版
22行目:		22行目:

	216行目までが、描画の記述を簡素化するための自作あるいはVexFlow公式が提案している関数になってしまいましたが、手軽に自作フォントを使うことができるようになっています。処理のイメージとしては、符旗を描画する処理はVexFlowにやってもらって、消したい符頭を持つNoteにあるStaveHead要素を消す処理を入れ込んでいます。消したところの座標にあらたな符頭をつけるみたいな処理を行っています。今回思いついたこの方法は次あたりの記事になるタブ譜の記述でも自分が考えたフォントを使う場合にも便利な方法かなと感じています。まぁなかなか強引なことをやってはいますね。AddShift関数は小節のノート群を指定するとその座標を取得するという処理を担っています。これをinsertTextToSVGの引数のオブジェクトに設定してやると一気に書き換えたい収集したポジションにたいして描画ができるという作戦です。これくらいの苦労ならばVexFlowの記述量とそん色ないほどの作業量だなと感じるレベルで、メンドクサイ処理が可能となります。		216行目までが、描画の記述を簡素化するための自作あるいはVexFlow公式が提案している関数になってしまいましたが、手軽に自作フォントを使うことができるようになっています。処理のイメージとしては、符旗を描画する処理はVexFlowにやってもらって、消したい符頭を持つNoteにあるStaveHead要素を消す処理を入れ込んでいます。消したところの座標にあらたな符頭をつけるみたいな処理を行っています。今回思いついたこの方法は次あたりの記事になるタブ譜の記述でも自分が考えたフォントを使う場合にも便利な方法かなと感じています。まぁなかなか強引なことをやってはいますね。AddShift関数は小節のノート群を指定するとその座標を取得するという処理を担っています。これをinsertTextToSVGの引数のオブジェクトに設定してやると一気に書き換えたい収集したポジションにたいして描画ができるという作戦です。これくらいの苦労ならばVexFlowの記述量とそん色ないほどの作業量だなと感じるレベルで、メンドクサイ処理が可能となります。


			関数を使わないで描画しようとするとコード量は一小節あたり400行は必要でしたが、20行くらいにまで減ったと思います。16ビートの曲の楽譜なんかは書きたくないって思ってしまうところをなんとかした感じです。強引な関数なので使い方が難しいっすね。読み解くのに時間がかかりそうなギミックになっています。なるはやで解説記事を作成しないと駄目だなとは思っています。

Yo-net: /* 概要 */

2024-04-01T15:38:41Z

概要

← 古い版		2024年4月2日 (火) 00:38時点における版
19行目:		19行目:

	ドラムセットのハイハットのｘしか想定していなかったので旗の向きが上向きのときしか想定していませんでした。下向きのｘマークのフォントもいるんだな。もうちょっとフォント改造しないとな。ギタータブ譜も網羅してから配布するつもりなんで、先が長いですが、フォントが配布される時を楽しみにまっていて下さい。え？別に楽しみじゃない？そっすよね。結局、ここの管理人の好みでしかないフォントだからな。		ドラムセットのハイハットのｘしか想定していなかったので旗の向きが上向きのときしか想定していませんでした。下向きのｘマークのフォントもいるんだな。もうちょっとフォント改造しないとな。ギタータブ譜も網羅してから配布するつもりなんで、先が長いですが、フォントが配布される時を楽しみにまっていて下さい。え？別に楽しみじゃない？そっすよね。結局、ここの管理人の好みでしかないフォントだからな。


			216行目までが、描画の記述を簡素化するための自作あるいはVexFlow公式が提案している関数になってしまいましたが、手軽に自作フォントを使うことができるようになっています。処理のイメージとしては、符旗を描画する処理はVexFlowにやってもらって、消したい符頭を持つNoteにあるStaveHead要素を消す処理を入れ込んでいます。消したところの座標にあらたな符頭をつけるみたいな処理を行っています。今回思いついたこの方法は次あたりの記事になるタブ譜の記述でも自分が考えたフォントを使う場合にも便利な方法かなと感じています。まぁなかなか強引なことをやってはいますね。AddShift関数は小節のノート群を指定するとその座標を取得するという処理を担っています。これをinsertTextToSVGの引数のオブジェクトに設定してやると一気に書き換えたい収集したポジションにたいして描画ができるという作戦です。これくらいの苦労ならばVexFlowの記述量とそん色ないほどの作業量だなと感じるレベルで、メンドクサイ処理が可能となります。

2024年4月1日 (月) 15:20にYo-netによる

2024-04-01T15:20:56Z

差分を表示