「VexFlow test content」の版間の差分

提供：yonewiki
 
(同じ利用者による、間の24版が非表示)
15行目: 15行目:
var UniqueIds;
var UniqueIds;
var SteveNoteUniqueIds;
var SteveNoteUniqueIds;
let nscale = 0.68
let nwidth = 1040;
let nheight = 420;
let nHeadMargin = 70;
let nStaveWidth = 350;
const f = new VF.Factory({
  renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
  });
const ctx = f.getContext();
ctx.scale(nscale, nscale);
const defaultStyle = {
  lineWidth: ctx.lineWidth,
  strokeStyle: ctx.strokeStyle,
};
for (let i = 0; i <= nwidth * (1 / nscale); i += 10) {
  ctx.beginPath();
  ctx.moveTo(0 + i, 0);
  ctx.lineTo(0 + i, nheight);
  if (i % 100 === 0){
    ctx.setLineWidth(1);
    ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
  }
  else{
    ctx.setLineWidth(0.5);
    ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
  }
  ctx.stroke();
}
for (let i = 0; i <= nheight; i += 10) {
  ctx.beginPath();
  ctx.moveTo(0, i);
  ctx.lineTo(nwidth * (1 / nscale), i);
  if (i % 100 === 0){
    ctx.setLineWidth(1);
    ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
  }
  else{
    ctx.setLineWidth(0.5);
    ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
  }
  ctx.stroke();
}
ctx.lineWidth = defaultStyle.lineWidth;
ctx.strokeStyle = defaultStyle.strokeStyle;
const stave1 = new VF.Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx);
stave1.setClef("treble").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();
//SINGLE:1, DOUBLE:2, END:3, REPEAT_BEGIN:4, REPEAT_END:5, REPEAT_BOTH:6, NONE:7
const notes1 = [
  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" }),
  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" }),
];


function getUniqueStaveNotesIds(notes, arr = []) {
function getUniqueStaveNotesIds(notes, arr = []) {
142行目: 71行目:
}
}


function updateAllFlagUniqueIds(UniqueIds) {
function updateAllFlagUniqueIds(FlagUniqueIds) {
     // allUniqueIdsにUniqueIdsを追加または結合
     // allUniqueIdsにUniqueIdsを追加または結合
     if (allFlagUniqueIds.length === 0) {
     if (allFlagUniqueIds.length === 0) {
       // allUniqueIdsが空の場合、UniqueIdsをそのままコピー
       // allUniqueIdsが空の場合、UniqueIdsをそのままコピー
       allFlagUniqueIds = [...UniqueIds];//スプレッド演算子で要素の中身を書き出す。
       allFlagUniqueIds = [...FlagUniqueIds];//スプレッド演算子で要素の中身を書き出す。
     } else {
     } else {
       UniqueIds.forEach(id => {
       FlagUniqueIds.forEach(id => {
         if (!allFlagUniqueIds.includes(id)) {
         if (!allFlagUniqueIds.includes(id)) {
             allFlagUniqueIds.push(id);
             allFlagUniqueIds.push(id);
157行目: 86行目:
     return allFlagUniqueIds;
     return allFlagUniqueIds;
}
}
SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [0, 1, 2, 3, 4, 5, 6, 7]);
allFlagUniqueIds = updateAllUniqueIds(SteveNoteUniqueIds);


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


UniqueIds = getUniqueNoteheadIds(notes1[1]);
let nscale = 0.68
allUniqueIds = updateAllUniqueIds(UniqueIds);
let nwidth = 1040;
let nheight = 420;
 
let nHeadMargin = 70;
let nStaveWidth = 350;
 
const f = new VF.Factory({
  renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
  });
const ctx = f.getContext();
ctx.scale(nscale, nscale);
 
const defaultStyle = {
  lineWidth: ctx.lineWidth,
  strokeStyle: ctx.strokeStyle,
};
 
for (let i = 0; i <= nwidth * (1 / nscale); i += 10) {
  ctx.beginPath();
  ctx.moveTo(0 + i, 0);
  ctx.lineTo(0 + i, nheight);
  if (i % 100 === 0){
    ctx.setLineWidth(1);
    ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
  }
  else{
    ctx.setLineWidth(0.5);
    ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
  }
  ctx.stroke();
}
 
for (let i = 0; i <= nheight; i += 10) {
  ctx.beginPath();
  ctx.moveTo(0, i);
  ctx.lineTo(nwidth * (1 / nscale), i);
  if (i % 100 === 0){
    ctx.setLineWidth(1);
    ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
  }
  else{
    ctx.setLineWidth(0.5);
    ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
  }
  ctx.stroke();
}
 
ctx.lineWidth = defaultStyle.lineWidth;
ctx.strokeStyle = defaultStyle.strokeStyle;
 
const stave1 = new VF.Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx);
stave1.setClef("treble").setContext(ctx);
stave1.setTimeSignature('4/4').setContext(ctx);
stave1.draw();
 
const notes1 = [
  new VF.StaveNote({ keys: ["a/5"], duration: "1" }),
];
 
//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 });
var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
201行目: 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」から取得