「VexFlow test content」の版間の差分

提供：yonewiki
 
(同じ利用者による、間の22版が非表示)
142行目: 142行目:
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: "8" }),
   new VF.StaveNote({ keys: ["a/5"], duration: "1" }),
  new VF.StaveNote({ keys: ["e/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["f/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["g/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["e/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["f/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["g/5"], duration: "8" }),
];
];


SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [0, 1, 2, 3, 4, 5, 6, 7]);
//SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [0]);
allFlagUniqueIds = updateAllUniqueIds(SteveNoteUniqueIds);
//allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);


UniqueIds = getUniqueNoteheadIds(notes1[0]);
//UniqueIds = getUniqueNoteheadIds(notes1[0]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
//allUniqueIds = updateAllUniqueIds(UniqueIds);
 
UniqueIds = getUniqueNoteheadIds(notes1[1]);
allUniqueIds = updateAllUniqueIds(UniqueIds);


var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
204行目: 189行目:
     if (element) {
     if (element) {
         // 該当する要素があれば、描画内容を透明にする
         // 該当する要素があれば、描画内容を透明にする
         let flagpaths = element.querySelectorAll('path');
         let paths = element.querySelectorAll('path');
         flagpaths.forEach(path => {
         paths.forEach(path => {
           var dAttribute = path.getAttribute('d');
           var dAttribute = path.getAttribute('d');
           // カンマで区切られた数値の数を数えます
           // カンマで区切られた数値の数を数えます
           var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数
           var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数


           // 数値の数が23であれば、このpath要素は求めるものです
           if (numberOfValues === 9) {
           if (numberOfValues === 23) {
            var firstCoord = dAttribute.split(',')[0];
             flagpaths.setAttribute("fill", "none");
            if (dAttribute.startsWith('M')) {
             flagpaths.setAttribute("stroke", "none");
              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");
           }
           }
         });
         });

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

概要

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