|
|
| 10行目: |
10行目: |
| (function(){ | | (function(){ |
| var VF = Vex.Flow; | | var VF = Vex.Flow; |
| var allUniqueIds = [];
| |
| var allFlagUniqueIds = [];
| |
| (function(){ | | (function(){ |
| var UniqueIds;
| |
| var SteveNoteUniqueIds;
| |
|
| |
| function getUniqueStaveNotesIds(notes, arr = []) {
| |
| //すべてのidを格納するためのセットを作成
| |
| let tempnote;
| |
| uniqueIds = new Set();
| |
| for(let i = 0; i < arr.length || i == 0; i++){
| |
| //notesのchildrenの各要素について処理
| |
| if(arr.length === 0){
| |
| tempnote = notes;
| |
| }
| |
| else{
| |
| tempnote = notes[arr[i]];
| |
| }
| |
| if (tempnote.attrs){
| |
| if(tempnote.attrs.type === "StaveNote") {
| |
| uniqueIds.add(tempnote.attrs.id);
| |
| }
| |
| }
| |
| }
| |
| // セットを配列に変換して戻り値として返す
| |
| return Array.from(uniqueIds);
| |
| }
| |
|
| |
| function getUniqueNoteheadIds(notes) {
| |
| // すべてのidを格納するためのセットを作成
| |
| uniqueIds = new Set();
| |
|
| |
| // notesのchildrenの各要素について処理
| |
| notes.children.forEach(child => {
| |
| // typeが"notehead"であるかチェックし、idを取得
| |
| if (child.attrs){
| |
| if(child.attrs.type === "NoteHead") {
| |
| uniqueIds.add(child.attrs.id);
| |
| }
| |
| }
| |
| });
| |
|
| |
| // セットを配列に変換して戻り値として返す
| |
| return Array.from(uniqueIds);
| |
| }
| |
| function updateAllUniqueIds(UniqueIds) {
| |
| // allUniqueIdsにUniqueIdsを追加または結合
| |
| if (allUniqueIds.length === 0) {
| |
| // allUniqueIdsが空の場合、UniqueIdsをそのままコピー
| |
| allUniqueIds = [...UniqueIds];//スプレッド演算子で要素の中身を書き出す。
| |
| } else {
| |
| UniqueIds.forEach(id => {
| |
| if (!allUniqueIds.includes(id)) {
| |
| allUniqueIds.push(id);
| |
| }
| |
| });
| |
| }
| |
| // 更新されたallUniqueIdsを戻り値として返す
| |
| return allUniqueIds;
| |
| }
| |
|
| |
| function updateAllFlagUniqueIds(FlagUniqueIds) {
| |
| // allUniqueIdsにUniqueIdsを追加または結合
| |
| if (allFlagUniqueIds.length === 0) {
| |
| // allUniqueIdsが空の場合、UniqueIdsをそのままコピー
| |
| allFlagUniqueIds = [...FlagUniqueIds];//スプレッド演算子で要素の中身を書き出す。
| |
| } else {
| |
| FlagUniqueIds.forEach(id => {
| |
| if (!allFlagUniqueIds.includes(id)) {
| |
| allFlagUniqueIds.push(id);
| |
| }
| |
| });
| |
| }
| |
| // 更新されたallUniqueIdsを戻り値として返す
| |
| return allFlagUniqueIds;
| |
| }
| |
|
| |
|
| |
| let nscale = 0.68 | | let nscale = 0.68 |
| let nwidth = 1040; | | let nwidth = 2040; |
| let nheight = 420; | | let nheight = 1020; |
|
| |
|
| let nHeadMargin = 70; | | let nHeadMargin = 70; |
| 139行目: |
62行目: |
| ctx.strokeStyle = defaultStyle.strokeStyle; | | 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 });
| |
| stave1Voice.addTickables(notes1);
| |
|
| |
| var formatter1 = new Vex.Flow.Formatter().joinVoices([stave1Voice]);
| |
| formatter1.formatToStave([stave1Voice], stave1);
| |
| stave1Voice.draw(ctx, stave1);
| |
| })(); | | })(); |
| var svgContainer = document.getElementById('yonet202403Mid_Output01'); | | var svgContainer = document.getElementById('yonet202403Mid_Output01'); |
| var svgElement = svgContainer.querySelector('svg'); | | var svgElement = svgContainer.querySelector('svg'); |
|
| |
| // 透明にするIDの配列
| |
| // 例としてここでIDを指定
| |
|
| |
| let autoUniqueIds = allUniqueIds.map(id => "vf-" + id);
| |
|
| |
| // 各IDに対して処理
| |
| autoUniqueIds.forEach(id => {
| |
| // 該当するIDの要素を取得
| |
| let element = svgElement.getElementById(id);
| |
| if (element) {
| |
| // 該当する要素があれば、描画内容を透明にする
| |
| let paths = element.querySelectorAll("path");
| |
| paths.forEach(path => {
| |
| path.setAttribute("fill", "none");
| |
| path.setAttribute("stroke", "none");
| |
| });
| |
| }
| |
| });
| |
|
| |
| let autoFlagUniqueIds = allFlagUniqueIds.map(id => "vf-" + id);
| |
| autoFlagUniqueIds.forEach(id => {
| |
| // 該当するIDの要素を取得
| |
| let element = svgElement.getElementById(id);
| |
| if (element) {
| |
| // 該当する要素があれば、描画内容を透明にする
| |
| let paths = element.querySelectorAll('path');
| |
| paths.forEach(path => {
| |
| var dAttribute = path.getAttribute('d');
| |
| // カンマで区切られた数値の数を数えます
| |
| var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数
| |
|
| |
| if (numberOfValues === 9) {
| |
| var firstCoord = dAttribute.split(',')[0];
| |
| if (dAttribute.startsWith('M')) {
| |
| 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");
| |
| }
| |
| });
| |
| }
| |
| });
| |
|
| |
| })(); | | })(); |
| </yjavascript> | | </yjavascript> |
