「VexFlow スラー」の版間の差分

提供:yonewiki
 
(同じ利用者による、間の43版が非表示)
7行目: 7行目:
 スラーは異なる高さの音同士を区切らずに演奏する奏法に使います。
 スラーは異なる高さの音同士を区切らずに演奏する奏法に使います。


基本的にはStaveTieタイと同じです。ですが、Curveを使う方法もある感じです。
 
 


== '''スラー''' ==
== '''スラー''' ==
<div id="Output"></div>
<div id="yonet202403Mid_Output01"></div>
<yjavascript></script>
<yjavascript></script>
<script>
<script>
21行目: 23行目:
   Voice,
   Voice,
   StaveTie,
   StaveTie,
  Renderer
} = Vex.Flow;
} = Vex.Flow;


const f = new Factory({ renderer: { elementId: 'Output', width: 1500, height: 350 } });
let nscale = 0.68
let nwidth = 1040;
let nheight = 320;
const f = new Factory({  
  renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
  });
const ctx = f.getContext();
const ctx = f.getContext();
ctx.scale(nscale, nscale);
//ctx.setBackgroundFillStyle('#EEEEEE');
const defaultStyle = {
  lineWidth: ctx.lineWidth,
  strokeStyle: ctx.strokeStyle,
};


// 灰色の背景
for (let i = 0; i <= nwidth * (1 / nscale); i += 10) {
ctx.setFillStyle('#F5F5F5'); // 灰色に設定
  ctx.beginPath();
ctx.fillRect(0, 0, f.width, f.height);
  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();
}


// 横線を引く
//for (let i = stave.y; i <= stave.y + stave.height; i += 10) {
//  ctx.beginPath();
//  ctx.moveTo(stave.x, i);
//  ctx.lineTo(stave.x + stave.width, i);
//  ctx.stroke();
//}


ctx.lineWidth = defaultStyle.lineWidth;
ctx.strokeStyle = defaultStyle.strokeStyle;


const stave1 = new Stave(10, 50, 350).setContext(ctx);
const stave1 = new Stave(10, 50, 350).setContext(ctx);
116行目: 167行目:
tie5.setContext(ctx).draw();
tie5.setContext(ctx).draw();


// 縦線
// 灰色の背景
const verticalLineSpacing = 10; // 縦の線の間隔
ctx.setFillStyle('#F5F5F5'); // 灰色に設定
const verticalLineCount = Math.floor(f.width / verticalLineSpacing);
ctx.fillRect(0, 0, f.width, f.height);


ctx.setStrokeStyle('#CCCCCC'); // 灰色に設定
})();
ctx.setLineWidth(1); // 線の太さ
 
for (let i = 1; i < verticalLineCount; i++) {
  const x = i * verticalLineSpacing;
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, f.height);
  ctx.stroke();
}


// 横線
const svgElement = document.querySelector('#Output svg');
const horizontalLineSpacing = 10; // 横の線の間隔
svgElement.style.backgroundColor = '#F5F5F5';
const horizontalLineCount = Math.floor(f.height / horizontalLineSpacing);
  const svgNS = 'http://www.w3.org/2000/svg';
 
  const lineColor = '#EEEEEE';
for (let i = 1; i < horizontalLineCount; i++) {
  //
   const y = i * horizontalLineSpacing;
  // 縦線(10pxごと)
   ctx.beginPath();
  //for (let x = 10; x < svgElement.getAttribute('width'); x += 10) {
   ctx.moveTo(0, y);
   //  const line = document.createElementNS(svgNS, 'line');
   ctx.lineTo(f.width, y);
   //  line.setAttribute('x1', x);
   ctx.stroke();
   //  line.setAttribute('y1', 0);
}
  //  line.setAttribute('x2', x);
  //  line.setAttribute('y2', svgElement.getAttribute('height'));
   //  line.setAttribute('stroke', lineColor);
  //  line.setAttribute('stroke-width', '1');
   //  svgElement.appendChild(line);
  //}


})();
  // 横線(10pxごと)
  //for (let y = 10; y < svgElement.getAttribute('height'); y += 10) {
  //  const line = document.createElementNS(svgNS, 'line');
  //  line.setAttribute('x1', 0);
  //  line.setAttribute('y1', y);
  //  line.setAttribute('x2', svgElement.getAttribute('width'));
  //  line.setAttribute('y2', y);
  //  line.setAttribute('stroke', lineColor);
  //  line.setAttribute('stroke-width', '1');
  //  svgElement.appendChild(line);
  //}
 
</yjavascript>
</yjavascript>


159行目: 217行目:
   Voice,
   Voice,
   StaveTie,
   StaveTie,
  Renderer
} = Vex.Flow;
} = Vex.Flow;


const f = new Factory({ renderer: { elementId: 'Output', width: 1500, height: 400 } });
let nscale = 0.5
let nwidth = 1040;
let nheight = 320;
const f = new Factory({  
  renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
  });
const ctx = f.getContext();
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 Stave(10, 50, 350).setContext(ctx);
const stave1 = new Stave(10, 50, 350).setContext(ctx);
248行目: 350行目:


tie5.setContext(ctx).draw();
tie5.setContext(ctx).draw();
// 灰色の背景
ctx.setFillStyle('#F5F5F5'); // 灰色に設定
ctx.fillRect(0, 0, f.width, f.height);
})();
})();
const svgElement = document.querySelector('#Output svg');
svgElement.style.backgroundColor = '#F5F5F5';
const svgNS = 'http://www.w3.org/2000/svg';
const lineColor = '#EEEEEE';
 
</script>
</script>
</syntaxhighlight>
</syntaxhighlight>

2024年3月11日 (月) 01:10時点における最新版

VexFlow 使い方に戻る。

概要

 スラーは異なる高さの音同士を区切らずに演奏する奏法に使います。


基本的にはStaveTieタイと同じです。ですが、Curveを使う方法もある感じです。  

スラー

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

<div id="yonet202403Mid_Output01"></div>
<script>
(function(){
const {
  Factory,
  Stave,
  StaveNote,
  Formatter,
  Voice,
  StaveTie,
  Renderer
} = Vex.Flow;

let nscale = 0.5
let nwidth = 1040;
let nheight = 320;
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: 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 Stave(10, 50, 350).setContext(ctx);
stave1.addClef("treble").setContext(ctx);
stave1.addTimeSignature('4/4').setContext(ctx);

const stave2 = new Stave(stave1.x, stave1.y + 100, 350).setContext(ctx);
stave2.addClef("treble").setContext(ctx);
stave2.addTimeSignature('4/4').setContext(ctx);

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

stave1.draw();

const tie1 = new StaveTie({
  first_note: notes1[1],
  last_note: notes1[2],
  first_indices: [0],
  last_indices: [0],
});

const tie2 = new StaveTie({
  first_note: notes1[2],
  last_note: notes1[3],
  first_indices: [0],
  last_indices: [0],
});

Formatter.FormatAndDraw(ctx, stave1, notes1);
tie1.setContext(ctx).draw();
tie2.setContext(ctx).draw();

stave2.draw();

const notes2 = [
  new StaveNote({ keys: ["a/4"], duration: "q" }),
  new StaveNote({ keys: ["b/4"], duration: "q" }),
  new StaveNote({ keys: ["c/5"], duration: "q" }),
  new StaveNote({ keys: ["d/5"], duration: "q" }),
];

Formatter.FormatAndDraw(ctx, stave2, notes2);

const tie3 = new StaveTie({
  first_note: notes2[1],
  last_note: notes2[2],
  first_indices: [0],
  last_indices: [0],
});

const tie4 = new StaveTie({
  first_note: notes2[2],
  last_note: notes2[3],
  first_indices: [0],
  last_indices: [0],
});

tie3.setContext(ctx).draw();
tie4.setContext(ctx).draw();

const stave3 = new Stave(stave2.width + stave2.x, stave2.y, 350).setContext(ctx);
const notes3 = [
  new StaveNote({ keys: ["e/5"], duration: "q" }),
  new StaveNote({ keys: ["f/5"], duration: "q" }),
  new StaveNote({ keys: ["g/5"], duration: "q" }),
  new StaveNote({ keys: ["a/5"], duration: "q" }),
];

stave3.draw();

Formatter.FormatAndDraw(ctx, stave3, notes3);

const tie5 = new StaveTie({
  first_note: notes2[3],
  last_note: notes3[0],
  first_indices: [0],
  last_indices: [0],
});

tie5.setContext(ctx).draw();

// 灰色の背景
ctx.setFillStyle('#F5F5F5'); // 灰色に設定
ctx.fillRect(0, 0, f.width, f.height);

})();

const svgElement = document.querySelector('#Output svg');
svgElement.style.backgroundColor = '#F5F5F5';
const svgNS = 'http://www.w3.org/2000/svg';
const lineColor = '#EEEEEE';
  
</script>


 スラーでもStaveTie というオブジェクトを利用します。


 配列で [new StaveTie({オブジェクト}), …] という構造のものを用意し、配列を代入した変数を作ります。


 const Ties1 = [new StaveTie({オブジェクト}), new StaveTie({オブジェクト})]; のような形式です。オブジェクトには以下のようなキーと値を設定します。


  • first_note: タイの始まりの音符を設定します。例:notes1[2]
  • last_note: タイの終わりの音符を設定します。例:notes1[3]
  • first_indices: タイの始まりの音符の和音の番号を設定します。和音になっていない場合は配列番号 0 を指定します。例:[0]
  • last_indices: タイの終わりの音符の和音の番号を設定します。和音になっていない場合は配列番号 0 を指定します。例:[0]

 

VexFlow 使い方に戻る。