「VexFlow タブ譜 コードフォーム」の版間の差分

提供：yonewiki
(同じ利用者による、間の12版が非表示)
912行目: 912行目:


];
];
UniqueIds = getUniqueNoteheadIds(Guitar1_St4_notes_1, [0]);
UniqueIds = getUniqueNoteheadIds(Guitar2_St1_notes_1, [0]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
allUniqueIds = updateAllUniqueIds(UniqueIds);


936行目: 936行目:
const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);
const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);
Guitar2_St2.draw();
Guitar2_St2.draw();
const Guitar2_St2_notes_1 = [
  new VF.StaveNote({ keys: ["b/4"], duration: "2" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "2" }),
];
const Guitar2_St2_notes_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
];
UniqueIds = getUniqueNoteheadIds(Guitar2_St2_notes_1, [0, 1]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
var Guitar2_St2_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St2_Voice_1.setStrict(true);
Guitar2_St2_Voice_1.addTickables(Guitar2_St2_notes_1);
var Guitar2_St2_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St2_Voice_2.setStrict(true);
Guitar2_St2_Voice_2.addTickables(Guitar2_St2_notes_2);
var formatterGuitar2_St2 = new VF.Formatter().joinVoices([Guitar2_St2_Voice_1, Guitar2_St2_Voice_2]);
formatterGuitar2_St2.format([Guitar2_St2_Voice_1, Guitar2_St2_Voice_2], nStaveWidth - 20 - 10);
Guitar2_St2_Voice_1.draw(ctx, Guitar2_St2);
Guitar2_St2_Voice_2.draw(ctx, Guitar2_St2);
shiftGuitar2_2st= addShift(
  Guitar2_St2_notes_1,
  [0, 1],
  [3, 3]
);


const Guitar2_St2_1 = new Stave(Guitar2_St1.width + Guitar2_St1.x + 45, Guitar2_St1.y, 0).setContext(ctx);
const Guitar2_St2_1 = new Stave(Guitar2_St1.width + Guitar2_St1.x + 45, Guitar2_St1.y, 0).setContext(ctx);
957行目: 1,005行目:
Guitar2_Tab1.draw();
Guitar2_Tab1.draw();


Guitar2tab_1st.x = Guitar2_Tab1_1.x;
Guitar2tab_1st.y = Guitar2_Tab1_1.y;


Guitar2Tab1.x = Guitar2_Tab1.x;
Guitar2Tab1.x = Guitar2_Tab1.x;
970行目: 1,020行目:
Guitar2_Tab2_1.draw();
Guitar2_Tab2_1.draw();


Guitar2tab_2st.x = Guitar2_Tab2.x;
Guitar2tab_2st.y = Guitar2_Tab2.y;


const Guitar2_Tab3 = new Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);
const Guitar2_Tab3 = new Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);
Guitar2_Tab3.draw();
Guitar2_Tab3.draw();
Guitar2tab_3st.x = Guitar2_Tab3.x;
Guitar2tab_3st.y = Guitar2_Tab3.y;




978行目: 1,033行目:
Guitar2_Tab4.draw();
Guitar2_Tab4.draw();


Guitar2tab_4st.x = Guitar2_Tab4.x;
Guitar2tab_4st.y = Guitar2_Tab4.y;


var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);
var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);
1,262行目: 1,319行目:
//u254F左利き用4線フレット
//u254F左利き用4線フレット
insertTiePathToSVG({x:shiftGuitar1_1st[2].x , y:shiftGuitar1_1st[2].y + 10}, {x:shiftGuitar1_1st[2].x + 35, y:shiftGuitar1_1st[2].y + 10});
insertTiePathToSVG({x:shiftGuitar1_1st[2].x , y:shiftGuitar1_1st[2].y + 10}, {x:shiftGuitar1_1st[2].x + 35, y:shiftGuitar1_1st[2].y + 10});
var Guitar1tab_st1_option = {
var Guitar1tab_st1_option = {
     textContent: ["\u254F", "３", "２", "１", "：", "：", "／", "／", "／", "／"], // 必須文字列
     textContent: ["\u254F", "３", "２", "１", "：", "：", "／", "／", "／", "／"], // 必須文字列
1,374行目: 1,432行目:
insertTextToSVG(Guitar1tab_st4_option);
insertTextToSVG(Guitar1tab_st4_option);


var Guitar2_st1_option = {
    textContent: ["，"], // 必須文字列
    strID: "Guitar2_st1", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftGuitar2_1st,
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2_st1_option);
var Guitar2_st2_option = {
    textContent: ["＊"], // 必須文字列
    strID: "Guitar2_st2", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftGuitar2_2st,
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2_st2_option);
var Guitar2tab_st1_option = {
    textContent: ["\u254F", "３", "２", "１", "：", "：", "／", "／", "／", "／"], // 必須文字列
    strID: "Guitar2tab_st1", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [
{x:Guitar2tab_1st.x + 10, y:Guitar2tab_1st.y + 80},
{x:Guitar2tab_1st.x + 15, y:Guitar2tab_1st.y + 90},
{x:Guitar2tab_1st.x + 30, y:Guitar2tab_1st.y + 90},
{x:Guitar2tab_1st.x + 45, y:Guitar2tab_1st.y + 90},
{x:Guitar2tab_1st.x + 27, y:Guitar2tab_1st.y + 70},//4弦中ポジ
{x:Guitar2tab_1st.x + 27, y:Guitar2tab_1st.y + 60},//5弦中ポジ
{x:Guitar2tab_1st.x + 60, y:Guitar2tab_1st.y + 30},//1弦ネックマーク
{x:Guitar2tab_1st.x + 60, y:Guitar2tab_1st.y + 40},//2弦ネックマーク
{x:Guitar2tab_1st.x + 60, y:Guitar2tab_1st.y + 50},//3弦ネックマーク
{x:Guitar2tab_1st.x + 60, y:Guitar2tab_1st.y + 80},//6弦ネックマーク
], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2tab_st1_option);
var Guitar2tab_st2_option = {
    textContent: ["\uFF03", "５", "４", "３", "：", "：", "：", "［"], // 必須文字列
    strID: "Guitar2tab_st2", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [
{x:Guitar2tab_2st.x + 10, y:Guitar2tab_2st.y + 80},
{x:Guitar2tab_2st.x + 15, y:Guitar2tab_2st.y + 90},
{x:Guitar2tab_2st.x + 30, y:Guitar2tab_2st.y + 90},
{x:Guitar2tab_2st.x + 45, y:Guitar2tab_2st.y + 90},
{x:Guitar2tab_2st.x + 27, y:Guitar2tab_2st.y + 50},//3弦中ポジ
{x:Guitar2tab_2st.x + 10, y:Guitar2tab_2st.y + 60},//4弦内ポジ
{x:Guitar2tab_2st.x + 10, y:Guitar2tab_2st.y + 70},//5弦内ポジ
{x:Guitar2tab_2st.x + 42, y:Guitar2tab_2st.y + 80},//外全セーハ
//{x:Guitar2tab_2st.x + 60, y:Guitar2tab_2st.y + 40},//2弦ネックマーク
//{x:Guitar2tab_2st.x + 60, y:Guitar2tab_2st.y + 50},//3弦ネックマーク
//{x:Guitar2tab_2st.x + 60, y:Guitar2tab_2st.y + 80},//6弦ネックマーク
], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2tab_st2_option);


var EGuitar2Text_options = {
var EGuitar2Text_options = {
1,511行目: 1,639行目:
                   }
                   }
                 }
                 }
              }
            }
          }
          else if (numberOfValues === 23) {
            if (dAttribute.startsWith('M')) {
              var MnumberOfValues = (dAttribute.match(/M/g) || []).length; // カンマの数 + 1 = 数値の数
              var CnumberOfValues = (dAttribute.match(/C/g) || []).length; // カンマの数 + 1 = 数値の数
              var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);
              if (MnumberOfValues == 2){
              if (CnumberOfValues == 11){
                path.setAttribute("fill", "none");
                path.setAttribute("stroke", "none");
              }
               }
               }
             }
             }
           }
           }
           else if (numberOfValues === 1) {
           else if (numberOfValues === 1) {
             if (dAttribute.startsWith('M')) {
             if (dAttribute.startsWith('M')) {
               var AnumberOfValues = (dAttribute.match(/A/g) || []).length; // カンマの数 + 1 = 数値の数
               var AnumberOfValues = (dAttribute.match(/A/g) || []).length; // カンマの数 + 1 = 数値の数

2024年4月12日 (金) 23:54時点における版

VexFlow 使い方に戻る。

概要

　コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタあるいは連桁で表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。

　

タブ譜 コードフォーム


　コードは以下のとおりです。 


<div id="yonet202403Mid_Output01"></div>
<script>

</script>


　

　

VexFlow 使い方に戻る。

「https://wiki.yo-net.jp/index.php?title=VexFlow_タブ譜_コードフォーム&oldid=7792」から取得