「VexFlow test content」の版間の差分

提供：yonewiki
(ページの作成:「<div id="yonet202403Mid_Output01"></div> <yjavascript></script> <script> (function(){ var VF = Vex.Flow; (function(){ let nscale = 0.68 let nwidth = 1040; let nheight = 420; let nHeadMargin = 70; let nStaveWidth = 350; const f = new Factory({ renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale } }); const ctx = f.getContext(); ctx.scale(nscale, nscale); const defaultStyle = { lineWidth: ctx.lineWidth, strokeStyle: ct…」)
 
 
(同じ利用者による、間の44版が非表示)
1行目: 1行目:
<yjavascript></script>
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow@4.2.2.0001.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vexflow@4.2.3/build/cjs/vexflow.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.2/build/cjs/vexflow.js></script>-->
</yjavascript>
== '''概要''' ==
<div id="yonet202403Mid_Output01"></div>
<div id="yonet202403Mid_Output01"></div>
<yjavascript></script>
<yjavascript></script>
4行目: 10行目:
(function(){
(function(){
var VF = Vex.Flow;
var VF = Vex.Flow;
var allUniqueIds = [];
var allFlagUniqueIds = [];
(function(){
(function(){
var UniqueIds;
var SteveNoteUniqueIds;
function getUniqueStaveNotesIds(notes, arr = []) {
    //すべてのidを格納するためのセットを作成
    let tempnote;
    uniqueIds = new Set();
    for(let i = 0; i < arr.length || i == 0; i++){
    //notesのchildrenの各要素について処理
      if(arr.length === 0){
        tempnote = notes;
      }
      else{
        tempnote = notes[arr[i]];
      }
      if (tempnote.attrs){
        if(tempnote.attrs.type === "StaveNote") {
          uniqueIds.add(tempnote.attrs.id);
        }
      }
    }
    // セットを配列に変換して戻り値として返す
    return Array.from(uniqueIds);
}
function getUniqueNoteheadIds(notes) {
    // すべてのidを格納するためのセットを作成
    uniqueIds = new Set();
    // notesのchildrenの各要素について処理
    notes.children.forEach(child => {
        // typeが"notehead"であるかチェックし、idを取得
        if (child.attrs){
          if(child.attrs.type === "NoteHead") {
            uniqueIds.add(child.attrs.id);
          }
        }
    });
    // セットを配列に変換して戻り値として返す
    return Array.from(uniqueIds);
}
function updateAllUniqueIds(UniqueIds) {
    // allUniqueIdsにUniqueIdsを追加または結合
    if (allUniqueIds.length === 0) {
      // allUniqueIdsが空の場合、UniqueIdsをそのままコピー
      allUniqueIds = [...UniqueIds];//スプレッド演算子で要素の中身を書き出す。
    } else {
      UniqueIds.forEach(id => {
        if (!allUniqueIds.includes(id)) {
            allUniqueIds.push(id);
        }
      });
    }
    // 更新されたallUniqueIdsを戻り値として返す
    return allUniqueIds;
}
function updateAllFlagUniqueIds(FlagUniqueIds) {
    // allUniqueIdsにUniqueIdsを追加または結合
    if (allFlagUniqueIds.length === 0) {
      // allUniqueIdsが空の場合、UniqueIdsをそのままコピー
      allFlagUniqueIds = [...FlagUniqueIds];//スプレッド演算子で要素の中身を書き出す。
    } else {
      FlagUniqueIds.forEach(id => {
        if (!allFlagUniqueIds.includes(id)) {
            allFlagUniqueIds.push(id);
        }
      });
    }
    // 更新されたallUniqueIdsを戻り値として返す
    return allFlagUniqueIds;
}
let nscale = 0.68
let nscale = 0.68
let nwidth = 1040;
let nwidth = 1040;
12行目: 95行目:
let nStaveWidth = 350;
let nStaveWidth = 350;


const f = new Factory({  
const f = new VF.Factory({  
   renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
   renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
   });
   });
56行目: 139行目:
ctx.strokeStyle = defaultStyle.strokeStyle;
ctx.strokeStyle = defaultStyle.strokeStyle;


const stave1 = new Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx);
const stave1 = new VF.Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx);
stave1.setClef("treble").setContext(ctx);
stave1.setClef("treble").setContext(ctx);
stave1.setTimeSignature('4/4').setContext(ctx);
stave1.setTimeSignature('4/4').setContext(ctx);
stave1.setSection("A", 0);
//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN
stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN
stave1.draw();
stave1.draw();
//SINGLE:1, DOUBLE:2, END:3, REPEAT_BEGIN:4, REPEAT_END:5, REPEAT_BOTH:6, NONE:7


const notes1 = [
const notes1 = [
   new VF.StaveNote({ keys: ["d/5"], duration: "q" }),
   new VF.StaveNote({ keys: ["a/5"], duration: "1" }),
  new VF.StaveNote({ keys: ["e/5"], duration: "q" }),
  new VF.StaveNote({ keys: ["f/5"], duration: "q" }),
  new VF.StaveNote({ keys: ["g/5"], duration: "q" }),
];
];


Formatter.FormatAndDraw(ctx, stave1, notes1);
//SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [0]);
}();
//allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);
}();
 
//UniqueIds = getUniqueNoteheadIds(notes1[0]);
//allUniqueIds = updateAllUniqueIds(UniqueIds);
 
var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
stave1Voice.addTickables(notes1);
 
var formatter1 = new Vex.Flow.Formatter().joinVoices([stave1Voice]);
formatter1.formatToStave([stave1Voice], stave1);
stave1Voice.draw(ctx, stave1);
})();
var svgContainer = document.getElementById('yonet202403Mid_Output01');
var svgElement = svgContainer.querySelector('svg');
 
// 透明にするIDの配列
// 例としてここでIDを指定
 
let autoUniqueIds = allUniqueIds.map(id => "vf-" + id);
 
// 各IDに対して処理
autoUniqueIds.forEach(id => {
    // 該当するIDの要素を取得
    let element = svgElement.getElementById(id);
    if (element) {
        // 該当する要素があれば、描画内容を透明にする
        let paths = element.querySelectorAll("path");
        paths.forEach(path => {
            path.setAttribute("fill", "none");
            path.setAttribute("stroke", "none");
        });
    }
});
 
let autoFlagUniqueIds = allFlagUniqueIds.map(id => "vf-" + id);
autoFlagUniqueIds.forEach(id => {
    // 該当するIDの要素を取得
    let element = svgElement.getElementById(id);
    if (element) {
        // 該当する要素があれば、描画内容を透明にする
        let paths = element.querySelectorAll('path');
        paths.forEach(path => {
          var dAttribute = path.getAttribute('d');
          // カンマで区切られた数値の数を数えます
          var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数
 
          if (numberOfValues === 9) {
            var firstCoord = dAttribute.split(',')[0];
            if (dAttribute.startsWith('M')) {
              var CnumberOfValues = (dAttribute.match(/C/g) || []).length; // カンマの数 + 1 = 数値の数
              var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数
                // 座標の差を計算します
              if(CnumberOfValues > 0){
                var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);
                var xdiff = coords[0] - coords[2]; // xの差を計算
                var ydiff = coords[1] - coords[3]; // yの差を計算
 
                // xが0でyが0より大きい場合、描画内容を透明にします
                if (xdiff !== 0) {
                  if(ydiff === 0){
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
                  }
                }
              }
            }
          }
          else if (numberOfValues === 1) {
            var firstCoord = dAttribute;
            if (dAttribute.startsWith('M')) {
              var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数
                // 座標の差を計算します
              if(LnumberOfValues > 0){
                var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);
                var xdiff = coords[0] - coords[2]; // xの差を計算
                var ydiff = coords[1] - coords[3]; // yの差を計算
 
                // xが0でyが0より大きい場合、描画内容を透明にします
                if (xdiff < -17) {
                if (xdiff > -18) {
                  if(ydiff === 0){
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
                  }
                }
                }
              }
            }
          }
          else if (numberOfValues === 35 || numberOfValues === 95 || numberOfValues === 41) {
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
          }
        });
    }
});
 
})();
</yjavascript>
</yjavascript>

2024年4月12日 (金) 22:28時点における最新版

概要

「https://wiki.yo-net.jp/index.php?title=VexFlow_test_content&oldid=7779」から取得