「VexFlow タブ譜 コードフォーム」の版間の差分
| 116行目: | 116行目: | ||
var arrowLength = 10; | var arrowLength = 10; | ||
var angle = Math.atan2(EndPos.y - StartPos.y, EndPos.x - StartPos.x); | var angle = Math.atan2(EndPos.y - StartPos.y, EndPos.x - StartPos.x); | ||
var arrowAngle = 0; | |||
// 矢印のポイントを計算 | // 矢印のポイントを計算 | ||
var arrowX = EndPos.x - arrowLength * Math.cos(angle); | var arrowX = EndPos.x - arrowLength * Math.cos(angle); | ||
var arrowY = EndPos.y - arrowLength * Math.sin(angle); | var arrowY = EndPos.y - arrowLength * Math.sin(angle); | ||
var pathStr = "M " + StartPos.x + " " + StartPos.y + " L " + EndPos.x + " " + EndPos.y + " L " + | var arrowX1 = EndPos.x - arrowLength * Math.cos(angle - arrowAngle); | ||
var arrowY1 = EndPos.y - arrowLength * Math.sin(angle - arrowAngle); | |||
// 矢印のポイント2を計算 | |||
var arrowX2 = EndPos.x - arrowLength * Math.cos(angle + arrowAngle); | |||
var arrowY2 = EndPos.y - arrowLength * Math.sin(angle + arrowAngle); | |||
var pathStr = "M " + StartPos.x + " " + StartPos.y + " L " + EndPos.x + " " + EndPos.y + " M " + EndPos.x + " " + EndPos.y + " L " + arrowX1 + " " + arrowY1 + " M " + EndPos.x + " " + EndPos.y + " L " + arrowX2 + " " + arrowY2; | |||
path.setAttribute('d', pathStr); | path.setAttribute('d', pathStr); | ||
2024年4月12日 (金) 20:55時点における版
VexFlow 使い方に戻る。
概要
コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタあるいは連桁で表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。
タブ譜 コードフォーム
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
</script>
VexFlow 使い方に戻る。