「VexFlow タブ譜 コードフォーム」の版間の差分
26行目: | 26行目: | ||
const Vocal = new Position(); | const Vocal = new Position(); | ||
const Guitar1Inst = new Position(); | const Guitar1Inst = new Position(); | ||
const Guitar1tab_1st = new Position(); | |||
const Guitar1tab_2st = new Position(); | |||
const Guitar1tab_3st = new Position(); | |||
const Guitar1tab_4st = new Position(); | |||
const Guitar2Inst = new Position(); | const Guitar2Inst = new Position(); | ||
const Guitar2Tab1 = new Position(); | const Guitar2Tab1 = new Position(); | ||
const Guitar2tab_1st = new Position(); | |||
const Guitar2tab_2st = new Position(); | |||
const Guitar2tab_3st = new Position(); | |||
const Guitar2tab_4st = new Position(); | |||
const BaseInst = new Position(); | const BaseInst = new Position(); | ||
const BaseTab1 = new Position(); | const BaseTab1 = new Position(); | ||
540行目: | 553行目: | ||
Guitar1Inst.x = VocalSt1.x - 30; | Guitar1Inst.x = VocalSt1.x - 30; | ||
Guitar1Inst.y = Guitar1St1.y + ((Guitar1_Tab1.y - Guitar1St1.y) / 2) + 90; | Guitar1Inst.y = Guitar1St1.y + ((Guitar1_Tab1.y - Guitar1St1.y) / 2) + 90; | ||
const Guitar1_Tab1_1 = new Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx); | const Guitar1_Tab1_1 = new Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx); | ||
546行目: | 558行目: | ||
Guitar1_Tab1_1.setEndBarType(VF.Barline.type.NONE); | Guitar1_Tab1_1.setEndBarType(VF.Barline.type.NONE); | ||
Guitar1_Tab1_1.draw(); | Guitar1_Tab1_1.draw(); | ||
Guitar1tab_1st.x = Guitar1_Tab1_1.x | |||
Guitar1tab_1st.y = Guitar1_Tab1_1.y | |||
const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx); | const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx); | ||
Guitar1_Tab2.draw(); | Guitar1_Tab2.draw(); | ||
Guitar1tab_2st.x = Guitar1_Tab2.x | |||
Guitar1tab_2st.y = Guitar1_Tab2.y | |||
const Guitar1_Tab3 = new Stave(Guitar1_Tab2.width + Guitar1_Tab2.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx); | const Guitar1_Tab3 = new Stave(Guitar1_Tab2.width + Guitar1_Tab2.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx); | ||
Guitar1_Tab3.draw(); | Guitar1_Tab3.draw(); | ||
Guitar1tab_3st.x = Guitar1_Tab3.x | |||
Guitar1tab_3st.y = Guitar1_Tab3.y | |||
const Guitar1_Tab4 = new Stave(Guitar1_Tab3.width + Guitar1_Tab3.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx); | const Guitar1_Tab4 = new Stave(Guitar1_Tab3.width + Guitar1_Tab3.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx); | ||
Guitar1_Tab4.draw(); | Guitar1_Tab4.draw(); | ||
Guitar1tab_4st.x = Guitar1_Tab4.x | |||
Guitar1tab_4st.y = Guitar1_Tab4.y | |||
829行目: | 853行目: | ||
//u254F左利き用4線フレット | //u254F左利き用4線フレット | ||
var Guitar1_tab_St1_notes1_option = { | |||
textContent: ["\u254F", "2", "1", "0"], // 必須文字列 | |||
strID: "Guitar1_tab_St1_notes1", // 必須 | |||
Stave_x_Offset: 0, | |||
Stave_y_Offset: 0, | |||
fontSize: 40, | |||
fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial" | |||
shift_x: [ | |||
{x:Guitar1tab_1st.x + 10, y:Guitar1tab_1st.y + 50}, | |||
{x:Guitar1tab_1st.x + 20, y:Guitar1tab_1st.y + 60}, | |||
{x:Guitar1tab_1st.x + 30, y:Guitar1tab_1st.y + 60}, | |||
{x:Guitar1tab_1st.x + 40, y:Guitar1tab_1st.y + 60}, | |||
], // xのオフセット値配列 | |||
IsOffset_x_Abs: true | |||
}; | |||
insertTextToSVG(Guitar1_tab_St1_notes1_option); | |||
var EGuitar2Text_options = { | var EGuitar2Text_options = { |
2024年4月11日 (木) 22:13時点における版
VexFlow 使い方に戻る。
概要
コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2個種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタで表現します。
タブ譜 コードフォーム
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
</script>
VexFlow 使い方に戻る。