VexFlow 楽曲タイトルの挿入 - 版の履歴

Yo-net: /* 楽曲タイトルの記述 */

2024-03-13T05:28:02Z

楽曲タイトルの記述

← 古い版		2024年3月13日 (水) 14:28時点における版
265行目:		265行目:
	newText.setAttribute('font-size', '50');		newText.setAttribute('font-size', '50');
	newText.setAttribute('fill', 'black');		newText.setAttribute('fill', 'black');
	newText.textContent = 'TestTitle-subTitle- music:yo-net';		newText.textContent = 'TestTitle - subTitle - lyrics: yo-net, music: yo-net';

	// SVG要素に新しいテキスト要素を追加		// SVG要素に新しいテキスト要素を追加

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

2024-03-12T15:36:10Z

← 古い版		2024年3月13日 (水) 00:36時点における版
536行目:		536行目:


	なかなか強引なことをしましたが、VexFlowが描画するsvgタグの中に描画が終わった後のJavaScript処理としてsvg関連のエレメントが挿入されるようなスクリプトにしました。おりゃ～！！って感じですね。いや、えいっ！かな。		なかなか強引なことをしましたが、VexFlowが描画するsvgタグの中に描画が終わった後のJavaScript処理としてsvg関連のエレメントが挿入されるようなスクリプトにしました。おりゃ～！！って感じですね。いや、えいっ！かな。位置調整とかフォント指定とかは、最後の方のスクリプトをいじればできるよ。けど本格的に調整したい場合はSVGのタグを生成するスクリプト全体を網羅的に学習し始める必要がありそうです。全体的なことは管理人にもわかりません。むずいわ。VexFlow。



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

Yo-net: /* 楽曲タイトルの記述 */

2024-03-12T15:32:40Z

楽曲タイトルの記述

差分を表示

Yo-net: /* 楽曲タイトルの記述 */

2024-03-12T15:23:55Z

楽曲タイトルの記述

← 古い版		2024年3月13日 (水) 00:23時点における版
284行目:		284行目:
	newText.setAttribute('x', '100');		newText.setAttribute('x', '100');
	newText.setAttribute('y', '100');		newText.setAttribute('y', '100');
	newText.setAttribute('font-family', 'MS Gothic');		newText.setAttribute('font-family', 'Hiragino Kaku Gothic Pro, メイリオ, MS Gothic, sans-serif');
	newText.setAttribute('font-size', '50');		newText.setAttribute('font-size', '50');
	newText.setAttribute('fill', 'black');		newText.setAttribute('fill', 'black');

Yo-net: /* 楽曲タイトルの記述 */

2024-03-12T15:20:00Z

楽曲タイトルの記述

← 古い版		2024年3月13日 (水) 00:20時点における版
98行目:		98行目:

	const stave0 = new Stave(130, 150, 0).setContext(ctx);		const stave0 = new Stave(130, 150, 0).setContext(ctx);
	stave0.setText("~~Title-SubTitle~~", VF.Modifier.Position.ABOVE, {shift_x: 100, shift_y: -100});		stave0.setText("", VF.Modifier.Position.ABOVE, {shift_x: 100, shift_y: -100});
	stave0.draw();		stave0.draw();

285行目:		285行目:
	newText.setAttribute('y', '100');		newText.setAttribute('y', '100');
	newText.setAttribute('font-family', 'MS Gothic');		newText.setAttribute('font-family', 'MS Gothic');
	newText.setAttribute('font-size', '25');		newText.setAttribute('font-size', '50');
	newText.setAttribute('fill', 'black');		newText.setAttribute('fill', 'black');
	newText.textContent = '~~こんにちは！世界~~';		newText.textContent = 'TestTitle-subTitle- music:yo-net';

	// SVG要素に新しいテキスト要素を追加		// SVG要素に新しいテキスト要素を追加

Yo-net: /* 楽曲タイトルの記述 */

2024-03-12T15:15:08Z

楽曲タイトルの記述

← 古い版		2024年3月13日 (水) 00:15時点における版
275行目:		275行目:
	svgElement2.style.backgroundColor = '#F5F5F5';		svgElement2.style.backgroundColor = '#F5F5F5';

			var svgContainer = document.getElementById('yonet202403Mid_Output01');
	var ~~spanContainer~~ = document.getElementById('yonet202403Mid_Output01');

	// span要素内の最初のsvg要素を取得		// span要素内の最初のsvg要素を取得
	var svgElement = ~~spanContainer~~.querySelector('svg~~');~~		var svgElement = svgContainer.querySelector('svg');

	~~// SVG要素の幅と高さを取得~~
	~~var svgWidth = svgElement.clientWidth;~~
	~~var svgHeight = svgElement.clientHeight;~~

	~~// 新しいCanvasを作成~~
	~~var canvas = document.createElement('canvas');~~
	~~canvas.width = svgWidth;~~
	~~canvas.height = svgHeight;~~

	~~// Canvasを絶対位置で配置（SVGエリアの位置とサイズを考慮）~~
	~~canvas.style.position = 'absolute';~~
	~~canvas.style.left = 0 + 'px';~~
	~~canvas.style.top = svgElement.getBoundingClientRect().top + 'px';~~
	~~//canvas.style.left = svgElement.getBoundingClientRect().left + 'px';~~
	~~//canvas.style.top = svgElement.getBoundingClientRect().height + 'px';~~

	~~// SVG要素の直後にCanvasを追加~~
	~~spanContainer.insertBefore(canvas, svgElement.nextElementSibling);~~

	~~// Canvasコンテキストを取得~~
	~~var context = canvas.getContext('2d~~');

	// ~~フォントの設定~~		// 新しいテキスト要素を作成
	var ~~newFont~~ = ~~{ family~~: ~~"Arial~~, ~~sans-serif"~~, ~~size: 10~~, ~~weight: "normal" }~~;		var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	~~context~~.font ~~= newFont~~.~~weight + " " + newFont~~.~~size + "px " + newFont~~.~~family~~;		newText.setAttribute('x', '100');
			newText.setAttribute('y', '100');
			newText.setAttribute('font-family', 'MS Gothic');
			newText.setAttribute('font-size', '25');
			newText.setAttribute('fill', 'black');
			newText.textContent = 'こんにちは！世界';

	// ~~新しいフォントでテキストを描画~~		// SVG要素に新しいテキスト要素を追加
	~~context~~.~~fillText~~(~~"Your Text Here", 100, 30~~);		svgElement.appendChild(newText);
	</yjavascript>		</yjavascript>

Yo-net: /* 楽曲タイトルの記述 */

2024-03-12T15:00:25Z

楽曲タイトルの記述

← 古い版		2024年3月13日 (水) 00:00時点における版
28行目:		28行目:
	} = Vex.Flow;		} = Vex.Flow;

	let nscale = //0.64;		let nscale = 0.64;
	let nwidth = 1040;		let nwidth = 1040;
	let nheight = 720;		let nheight = 720;

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

2024-03-12T14:59:35Z

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

	let nscale = 1;//0.64;		let nscale = //0.64;
	let nwidth = 1040;		let nwidth = 1040;
	let nheight = 720;		let nheight = 720;

Yo-net: /* 楽曲タイトルの記述 */

2024-03-12T14:53:23Z

楽曲タイトルの記述

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

	let nscale = 0.64		let nscale = 1;//0.64;
	let nwidth = 1040;		let nwidth = 1040;
	let nheight = 720;		let nheight = 720;

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

2024-03-12T14:42:25Z

← 古い版		2024年3月12日 (火) 23:42時点における版
293行目:		293行目:
	canvas.style.position = 'absolute';		canvas.style.position = 'absolute';
	canvas.style.left = 0 + 'px';		canvas.style.left = 0 + 'px';
	canvas.style.top = 0 + 'px';		canvas.style.top = svgElement.getBoundingClientRect().top + 'px';
	//canvas.style.left = svgElement.getBoundingClientRect().left + 'px';		//canvas.style.left = svgElement.getBoundingClientRect().left + 'px';
	//canvas.style.top = svgElement.getBoundingClientRect().height + 'px';		//canvas.style.top = svgElement.getBoundingClientRect().height + 'px';