「VexFlow タブ譜 コードフォーム」の版間の差分
(→概要) |
|||
| 901行目: | 901行目: | ||
// 例としてここでIDを指定 | // 例としてここでIDを指定 | ||
let autoUniqueIds = allUniqueIds.map(id => "vf-" + id); | let autoUniqueIds = allUniqueIds.map(id => "vf-" + id); | ||
let Last_Stem_x = 0; | |||
// 各IDに対して処理 | // 各IDに対して処理 | ||
autoUniqueIds.forEach(id => { | autoUniqueIds.forEach(id => { | ||
| 907行目: | 907行目: | ||
let element = svgElement.getElementById(id); | let element = svgElement.getElementById(id); | ||
if (element) { | if (element) { | ||
let classValue = element.getAttribute("class"); | |||
// 該当する要素があれば、描画内容を透明にする | // 該当する要素があれば、描画内容を透明にする | ||
let paths = element.querySelectorAll("path"); | let paths = element.querySelectorAll("path"); | ||
| 925行目: | 926行目: | ||
var ydiff = coords[1] - coords[3]; // yの差を計算 | var ydiff = coords[1] - coords[3]; // yの差を計算 | ||
if (coords[0] - Last_Stem_x > 2){ | |||
if (coords[0] - Last_Stem_x < 10){ | |||
path.setAttribute("fill", "none"); | |||
path.setAttribute("stroke", "none"); | |||
} | |||
} | |||
// xが0でyが0より大きい場合、描画内容を透明にします | // xが0でyが0より大きい場合、描画内容を透明にします | ||
if (xdiff <= -3.590) { | if (xdiff <= -3.590) { | ||
| 960行目: | 967行目: | ||
} | } | ||
else if (numberOfValues === 1) { | else if (numberOfValues === 1) { | ||
if (dAttribute.startsWith('M')) { | |||
var AnumberOfValues = (dAttribute.match(/A/g) || []).length; // カンマの数 + 1 = 数値の数 | |||
var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数 | |||
// 座標の差を計算します | |||
if(AnumberOfValues == 2){ | |||
var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat); | |||
var circle_right = coords[0]; // xの差を計算 | |||
var r_x = coords[2]; // xの差を計算 | |||
var r_y = coords[3]; // xの差を計算 | |||
var circle_left = coords[7]; // yの差を計算 | |||
if (circle_right - Last_Stem_x > 7){//7.75 | |||
if (circle_right - Last_Stem_x < 8){ | |||
if (circle_left - Last_Stem_x > 3){//3.75 | |||
if (circle_left - Last_Stem_x < 4){ | |||
if (r_x == 2){ | |||
if (r_y == 2){ | |||
path.setAttribute("fill", "none"); | |||
path.setAttribute("stroke", "none"); | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
if (classValue === "vf-stem"){ | |||
var firstStemCoord = dAttribute; | |||
if (dAttribute.startsWith('M')) { | |||
var StemLnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数 | |||
// 座標の差を計算します | |||
if(StemLnumberOfValues > 0){ | |||
var stem_coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat); | |||
Last_Stem_x = stem_coords[0]; // xの差を計算 | |||
} | |||
} | |||
} | |||
var firstCoord = dAttribute; | var firstCoord = dAttribute; | ||
if (dAttribute.startsWith('M')) { | if (dAttribute.startsWith('M')) { | ||
2024年4月11日 (木) 21:52時点における版
VexFlow 使い方に戻る。
概要
コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2個種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタで表現します。
タブ譜 コードフォーム
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
</script>
VexFlow 使い方に戻る。