VexFlow 複数小節にわたる長い休符 - 版の履歴

Yo-net: /* 複数小節休符 */

2024-03-26T14:08:42Z

複数小節休符

← 古い版		2024年3月26日 (火) 23:08時点における版
985行目:		985行目:
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	(function(){		(function(){
	~~newText9_1~~.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');		newText9.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');

	// SVG要素に追加する		// SVG要素に追加する
993行目:		993行目:


	差し込んだタグを更新します。newText9_1という一つのタグを追従しているから更新されるように見えるのです。エレメントの移動は同じ場所なので、位置も変わらずにtransformエレメントがtranslate(…) scale(…)という値を伴って追加されます。そういうものなんですね。		差し込んだタグを更新します。newText9という一つのタグを追従しているから更新されるように見えるのです。エレメントの移動は同じ場所なので、位置も変わらずにtransformエレメントがtranslate(…) scale(…)という値を伴って追加されます。そういうものなんですね。


			同じ要領で、何小節休むのかと言う意味の19も追加しています。大きな太字の数字は拍子(Time Signature)表示に使う数字のフォントを利用しています。しっくりくる奴ですよね。コードポイントのE080～E089までが下一桁の数字と表示される数字とが連動する形になっています。



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

Yo-net: /* 複数小節休符 */

2024-03-26T14:03:37Z

複数小節休符

← 古い版		2024年3月26日 (火) 23:03時点における版
928行目:		928行目:


	*var newText9 = document.createElementNS('~~http~~://www.w3.org/2000/svg', 'text');		*var newText9 = document.createElementNS('ht<span>tp:</span>//www.w3.org/2000/svg', 'text');

Yo-net: /* 複数小節休符 */

2024-03-26T14:02:07Z

複数小節休符

← 古い版		2024年3月26日 (火) 23:02時点における版
923行目:		923行目:

	VexFlowの技術とは関係のない記事になってしまいましたが、またひとつ奥の手の使い方を示せましたね。		VexFlowの技術とは関係のない記事になってしまいましたが、またひとつ奥の手の使い方を示せましたね。


			newText9というSVGエレメントのテキストタグを生成するようなオブジェクトを作り、


			*var newText9 = document.createElementNS('http://www.w3.org/2000/svg', 'text');


			一度生成してから、そのサイズとかを取得したいので、


			*newText9.setAttribute('id', 'rest9');


			と、Textタグにidエレメントとその値rest9を定義します。


			最初の作成位置は座標 x = 0, y = 0 にします。拡大縮小処理を後でやると、原点(0 , 0)を中心に拡大するので、ちょっと離れたところに置いただけでも、2倍にするだけでも画面の真ん中に置いたものは画面の外側に移動してしまいますので、原点に配置した状態で拡大します。


			*newText9.setAttribute('x', 0); newText9.setAttribute('y', 0);


			そして、font-familyのフォント名とfont-sizeのフォントサイズを指定します。フォントサイズ40くらいがぴったりはまりますね。拡大縮小はあまり使わない方がいいので、あとで、縦横比を調整する程度で考えておきましょう。


			*newText9.setAttribute('font-family', fontFamily9); newText9.setAttribute('font-size', fontSize9);


			フォントの塗りは黒を念のため指定。


			*newText9.setAttribute('fill', 'black');


			テキストの内容を以下のメンバ変数に設定します。


			*newText9.textContent


			複数小節の記号はSMuFLフォントでE4EFが始まり、E4F0が途中、E4F1が終了を形成するので文字列のようにつなげると、幅が調節できます。始まりと終了だけを両サイドにおけばうまく描けるようになっています。便利ですね。


			*svgElement.appendChild(newText9_1);


			で予め取得していたsvgタグの中にnewText9_1が保持しているタグは挿入されます。


			*var svgContainer = document.getElementById('yonet202403Mid_Output01');
			*var svgElement = svgContainer.querySelector('svg');


			で、予め取得されていますね。でもこのままでは、挿入されたタグは原点にテキストを描画するので、何も表示されない可能性もあります。


			以下のような即時実行関数によって


			<syntaxhighlight lang="javascript">
			(function(){
			newText9_1.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');

			// SVG要素に追加する
			svgElement.appendChild(newText9_1);
			}();
			</syntaxhighlight>


			差し込んだタグを更新します。newText9_1という一つのタグを追従しているから更新されるように見えるのです。エレメントの移動は同じ場所なので、位置も変わらずにtransformエレメントがtranslate(…) scale(…)という値を伴って追加されます。そういうものなんですね。



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

Yo-net: /* 複数小節休符 */

2024-03-26T12:42:28Z

複数小節休符

← 古い版		2024年3月26日 (火) 21:42時点における版
483行目:		483行目:


	<syntaxhighlight lang="javascript" line start="1" highlight="98-~~100~~,~~113~~,~~126~~-~~128~~,~~130~~,~~132~~-~~141~~">		<syntaxhighlight lang="javascript" line start="1" highlight="363-365,368-375,378,380-382,385,386,388,389,391,394,395,399-401,404-411,414,416-418,421,422,424,425,427,430,431">
	<div id="yonet202403Mid_Output01"></div>		<div id="yonet202403Mid_Output01"></div>
	<script>		<script>

Yo-net: /* 概要 */

2024-03-26T11:54:51Z

概要

← 古い版		2024年3月26日 (火) 20:54時点における版
13行目:		13行目:

	9小節目の位置を取得する処理を追加します。SVGにテキストを挿入してるだけだから無駄に選択できる機能がいらないですね。コピーしたところで同じフォントでなければ文字化けするだけです。意味ない。かといってテキストをパスに変換して塗りつぶすというひと手間はものすごく難易度があがります。そこは追及し出したら泥沼にはまりますので、そっとしておきましょう。綺麗にみれたらそれでいいやん。でしょ。		9小節目の位置を取得する処理を追加します。SVGにテキストを挿入してるだけだから無駄に選択できる機能がいらないですね。コピーしたところで同じフォントでなければ文字化けするだけです。意味ない。かといってテキストをパスに変換して塗りつぶすというひと手間はものすごく難易度があがります。そこは追及し出したら泥沼にはまりますので、そっとしておきましょう。綺麗にみれたらそれでいいやん。でしょ。


			VexFlowはスコア譜作るのを専用で想定しているから、複数小節休符には対応してないのかな？不思議。次の項目の小節リピートも対応してないんす。いやっす。

Yo-net: /* 概要 */

2024-03-26T11:51:54Z

概要

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


	~~9小節目の位置を取得する処理を追加します。~~		9小節目の位置を取得する処理を追加します。SVGにテキストを挿入してるだけだから無駄に選択できる機能がいらないですね。コピーしたところで同じフォントでなければ文字化けするだけです。意味ない。かといってテキストをパスに変換して塗りつぶすというひと手間はものすごく難易度があがります。そこは追及し出したら泥沼にはまりますので、そっとしておきましょう。綺麗にみれたらそれでいいやん。でしょ。

Yo-net: /* 複数小節休符 */

2024-03-26T11:46:42Z

複数小節休符

差分を表示

Yo-net: /* 複数小節休符 */

2024-03-26T11:11:46Z

複数小節休符

← 古い版		2024年3月26日 (火) 20:11時点における版
463行目:		463行目:
	var verticalScale = 1;//crescendo4Height / textHeight; // ここは実際に表示される大きさをみてから固定で設定するべき。なぜならグリフ毎に縦横比が違うので、一筋なわではいかないから。		var verticalScale = 1;//crescendo4Height / textHeight; // ここは実際に表示される大きさをみてから固定で設定するべき。なぜならグリフ毎に縦横比が違うので、一筋なわではいかないから。

	var StavePos_x = Stave9Pos.x + ~~220~~;		var StavePos_x = Stave9Pos.x + 205;
	var StavePos_y = Stave9Pos.y + 50;		var StavePos_y = Stave9Pos.y + 40;

	newText9_1.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');		newText9_1.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');

Yo-net: /* 複数小節休符 */

2024-03-26T11:09:54Z

複数小節休符

← 古い版		2024年3月26日 (火) 20:09時点における版
440行目:		440行目:
	var fontSize9_1 = 40; // フォントサイズ		var fontSize9_1 = 40; // フォントサイズ
	var fontFamily9_1 = "Bravura, Arial"; // Bravuraフォントファミリー		var fontFamily9_1 = "Bravura, Arial"; // Bravuraフォントファミリー
	var textContent9_1 = "\~~uE4F0~~";//複数小節休符 // 符頭E0A4		var textContent9_1 = "\uE081\uE089";//複数小節休符 // 符頭E0A4

	// テキスト要素の作成		// テキスト要素の作成

Yo-net: /* 複数小節休符 */

2024-03-26T11:05:11Z

複数小節休符

← 古い版		2024年3月26日 (火) 20:05時点における版
428行目:		428行目:

	var StavePos_x = Stave9Pos.x + 120;		var StavePos_x = Stave9Pos.x + 120;
	var StavePos_y = Stave9Pos.y + 50;		var StavePos_y = Stave9Pos.y + 60;

	newText9.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');		newText9.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');
464行目:		464行目:

	var StavePos_x = Stave9Pos.x + 220;		var StavePos_x = Stave9Pos.x + 220;
	var StavePos_y = Stave9Pos.y + 60;		var StavePos_y = Stave9Pos.y + 50;

	newText9_1.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');		newText9_1.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');