https://twiki.yo-net.jp/index.php?action=history&feed=atom&title=VexFlow_test_content2
VexFlow test content2 - 版の履歴
2026-04-05T18:25:54Z
このウィキのこのページに関する変更履歴
MediaWiki 1.38.2
https://twiki.yo-net.jp/index.php?title=VexFlow_test_content2&diff=8633&oldid=prev
Yo-net: /* 概要 */
2024-11-25T15:47:29Z
<p><span dir="auto"><span class="autocomment">概要</span></span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ja">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← 古い版</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2024年11月26日 (火) 00:47時点における版</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l11">11行目:</td>
<td colspan="2" class="diff-lineno">11行目:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var VF = Vex.Flow;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var VF = Vex.Flow;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>(function(){</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>(function(){</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>let nscale = <del style="font-weight: bold; text-decoration: none;">0.68</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>let nscale = <ins style="font-weight: bold; text-decoration: none;">1</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>let nwidth = 2040;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>let nwidth = 2040;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>let nheight = 1020;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>let nheight = 1020;</div></td></tr>
</table>
Yo-net
https://twiki.yo-net.jp/index.php?title=VexFlow_test_content2&diff=8625&oldid=prev
2024年11月25日 (月) 14:12にYo-netによる
2024-11-25T14:12:43Z
<p></p>
<a href="https://twiki.yo-net.jp/index.php?title=VexFlow_test_content2&diff=8625&oldid=8624">差分を表示</a>
Yo-net
https://twiki.yo-net.jp/index.php?title=VexFlow_test_content2&diff=8624&oldid=prev
Yo-net: ページの作成:「<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> <yjavascript></script> <script> (function(){ var VF = Vex.Flow; var allUniqueIds = []; var allFl…」
2024-11-25T14:08:15Z
<p>ページの作成:「<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> <yjavascript></script> <script> (function(){ var VF = Vex.Flow; var allUniqueIds = []; var allFl…」</p>
<p><b>新規ページ</b></p><div><yjavascript></script><br />
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow@4.2.2.0001.js"></script><br />
<!--<script src="https://cdn.jsdelivr.net/npm/vexflow@4.2.3/build/cjs/vexflow.js"></script>--><br />
<!--<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.2/build/cjs/vexflow.js></script>--><br />
</yjavascript><br />
== '''概要''' ==<br />
<div id="yonet202403Mid_Output01"></div><br />
<yjavascript></script><br />
<script><br />
(function(){<br />
var VF = Vex.Flow;<br />
var allUniqueIds = [];<br />
var allFlagUniqueIds = [];<br />
(function(){<br />
var UniqueIds;<br />
var SteveNoteUniqueIds;<br />
<br />
function getUniqueStaveNotesIds(notes, arr = []) {<br />
//すべてのidを格納するためのセットを作成<br />
let tempnote;<br />
uniqueIds = new Set();<br />
for(let i = 0; i < arr.length || i == 0; i++){<br />
//notesのchildrenの各要素について処理<br />
if(arr.length === 0){<br />
tempnote = notes;<br />
}<br />
else{<br />
tempnote = notes[arr[i]];<br />
}<br />
if (tempnote.attrs){<br />
if(tempnote.attrs.type === "StaveNote") {<br />
uniqueIds.add(tempnote.attrs.id);<br />
}<br />
}<br />
}<br />
// セットを配列に変換して戻り値として返す<br />
return Array.from(uniqueIds);<br />
}<br />
<br />
function getUniqueNoteheadIds(notes) {<br />
// すべてのidを格納するためのセットを作成<br />
uniqueIds = new Set();<br />
<br />
// notesのchildrenの各要素について処理<br />
notes.children.forEach(child => {<br />
// typeが"notehead"であるかチェックし、idを取得<br />
if (child.attrs){<br />
if(child.attrs.type === "NoteHead") {<br />
uniqueIds.add(child.attrs.id);<br />
}<br />
}<br />
});<br />
<br />
// セットを配列に変換して戻り値として返す<br />
return Array.from(uniqueIds);<br />
}<br />
function updateAllUniqueIds(UniqueIds) {<br />
// allUniqueIdsにUniqueIdsを追加または結合<br />
if (allUniqueIds.length === 0) {<br />
// allUniqueIdsが空の場合、UniqueIdsをそのままコピー<br />
allUniqueIds = [...UniqueIds];//スプレッド演算子で要素の中身を書き出す。<br />
} else {<br />
UniqueIds.forEach(id => {<br />
if (!allUniqueIds.includes(id)) {<br />
allUniqueIds.push(id);<br />
}<br />
});<br />
}<br />
// 更新されたallUniqueIdsを戻り値として返す<br />
return allUniqueIds;<br />
}<br />
<br />
function updateAllFlagUniqueIds(FlagUniqueIds) {<br />
// allUniqueIdsにUniqueIdsを追加または結合<br />
if (allFlagUniqueIds.length === 0) {<br />
// allUniqueIdsが空の場合、UniqueIdsをそのままコピー<br />
allFlagUniqueIds = [...FlagUniqueIds];//スプレッド演算子で要素の中身を書き出す。<br />
} else {<br />
FlagUniqueIds.forEach(id => {<br />
if (!allFlagUniqueIds.includes(id)) {<br />
allFlagUniqueIds.push(id);<br />
}<br />
});<br />
}<br />
// 更新されたallUniqueIdsを戻り値として返す<br />
return allFlagUniqueIds;<br />
}<br />
<br />
<br />
let nscale = 0.68<br />
let nwidth = 1040;<br />
let nheight = 420;<br />
<br />
let nHeadMargin = 70;<br />
let nStaveWidth = 350;<br />
<br />
const f = new VF.Factory({ <br />
renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }<br />
});<br />
const ctx = f.getContext();<br />
ctx.scale(nscale, nscale);<br />
<br />
const defaultStyle = {<br />
lineWidth: ctx.lineWidth,<br />
strokeStyle: ctx.strokeStyle,<br />
};<br />
<br />
for (let i = 0; i <= nwidth * (1 / nscale); i += 10) {<br />
ctx.beginPath();<br />
ctx.moveTo(0 + i, 0);<br />
ctx.lineTo(0 + i, nheight);<br />
if (i % 100 === 0){<br />
ctx.setLineWidth(1);<br />
ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');<br />
}<br />
else{<br />
ctx.setLineWidth(0.5);<br />
ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');<br />
}<br />
ctx.stroke();<br />
}<br />
<br />
for (let i = 0; i <= nheight; i += 10) {<br />
ctx.beginPath();<br />
ctx.moveTo(0, i);<br />
ctx.lineTo(nwidth * (1 / nscale), i);<br />
if (i % 100 === 0){<br />
ctx.setLineWidth(1);<br />
ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');<br />
}<br />
else{<br />
ctx.setLineWidth(0.5);<br />
ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');<br />
}<br />
ctx.stroke();<br />
}<br />
<br />
ctx.lineWidth = defaultStyle.lineWidth;<br />
ctx.strokeStyle = defaultStyle.strokeStyle;<br />
<br />
const stave1 = new VF.Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx);<br />
stave1.setClef("treble").setContext(ctx);<br />
stave1.setTimeSignature('4/4').setContext(ctx);<br />
stave1.draw();<br />
<br />
const notes1 = [<br />
new VF.StaveNote({ keys: ["a/5"], duration: "1" }),<br />
];<br />
<br />
//SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [0]);<br />
//allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);<br />
<br />
//UniqueIds = getUniqueNoteheadIds(notes1[0]);<br />
//allUniqueIds = updateAllUniqueIds(UniqueIds);<br />
<br />
var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br />
stave1Voice.addTickables(notes1);<br />
<br />
var formatter1 = new Vex.Flow.Formatter().joinVoices([stave1Voice]);<br />
formatter1.formatToStave([stave1Voice], stave1);<br />
stave1Voice.draw(ctx, stave1);<br />
})();<br />
var svgContainer = document.getElementById('yonet202403Mid_Output01');<br />
var svgElement = svgContainer.querySelector('svg');<br />
<br />
// 透明にするIDの配列<br />
// 例としてここでIDを指定<br />
<br />
let autoUniqueIds = allUniqueIds.map(id => "vf-" + id);<br />
<br />
// 各IDに対して処理<br />
autoUniqueIds.forEach(id => {<br />
// 該当するIDの要素を取得<br />
let element = svgElement.getElementById(id);<br />
if (element) {<br />
// 該当する要素があれば、描画内容を透明にする<br />
let paths = element.querySelectorAll("path");<br />
paths.forEach(path => {<br />
path.setAttribute("fill", "none");<br />
path.setAttribute("stroke", "none");<br />
});<br />
}<br />
});<br />
<br />
let autoFlagUniqueIds = allFlagUniqueIds.map(id => "vf-" + id);<br />
autoFlagUniqueIds.forEach(id => {<br />
// 該当するIDの要素を取得<br />
let element = svgElement.getElementById(id);<br />
if (element) {<br />
// 該当する要素があれば、描画内容を透明にする<br />
let paths = element.querySelectorAll('path');<br />
paths.forEach(path => {<br />
var dAttribute = path.getAttribute('d');<br />
// カンマで区切られた数値の数を数えます<br />
var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数<br />
<br />
if (numberOfValues === 9) {<br />
var firstCoord = dAttribute.split(',')[0];<br />
if (dAttribute.startsWith('M')) {<br />
var CnumberOfValues = (dAttribute.match(/C/g) || []).length; // カンマの数 + 1 = 数値の数<br />
var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数<br />
// 座標の差を計算します<br />
if(CnumberOfValues > 0){<br />
var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);<br />
var xdiff = coords[0] - coords[2]; // xの差を計算<br />
var ydiff = coords[1] - coords[3]; // yの差を計算<br />
<br />
// xが0でyが0より大きい場合、描画内容を透明にします<br />
if (xdiff !== 0) {<br />
if(ydiff === 0){<br />
path.setAttribute("fill", "none");<br />
path.setAttribute("stroke", "none");<br />
}<br />
}<br />
}<br />
}<br />
}<br />
else if (numberOfValues === 1) {<br />
var firstCoord = dAttribute;<br />
if (dAttribute.startsWith('M')) {<br />
var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数<br />
// 座標の差を計算します<br />
if(LnumberOfValues > 0){<br />
var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);<br />
var xdiff = coords[0] - coords[2]; // xの差を計算<br />
var ydiff = coords[1] - coords[3]; // yの差を計算<br />
<br />
// xが0でyが0より大きい場合、描画内容を透明にします<br />
if (xdiff < -17) {<br />
if (xdiff > -18) {<br />
if(ydiff === 0){<br />
path.setAttribute("fill", "none");<br />
path.setAttribute("stroke", "none");<br />
}<br />
}<br />
}<br />
}<br />
}<br />
}<br />
else if (numberOfValues === 35 || numberOfValues === 95 || numberOfValues === 41) {<br />
path.setAttribute("fill", "none");<br />
path.setAttribute("stroke", "none");<br />
}<br />
});<br />
}<br />
});<br />
<br />
})();<br />
</yjavascript></div>
Yo-net