0

我正在使用 Raphaeljs 和 Jquery 从一个巨大的数组中绘制和弦图，这需要很长时间，我试图找出一种方法来一次绘制一个和弦以避免 javascript 超时错误并防止用户不得不盯着一个空白屏幕。

这就是我绘制 SVG 的方式：

   function drawthis() {
   var container = $("#mydiv");

   for (var i = 0; i < myarray.length; ++i) {
   var section_struct = myarray[i];
   var section = createSectionElement(section_struct);

   for (var j = 0; j < section_struct.chords.length; ++j) {
   section.append(createChordElement(section_struct.chords[j])); }

   container.append(section);
   }


   }

   $(function() { drawthis() });

一次绘制一个和弦图而不是一次绘制它们的最佳方法是什么？

4

1 回答 1

0

我创建了一个和弦查找器，它引用了一个大约有 1000 个和弦的对象。它们是在一瞬间建成的。我使用了表格，但这可能更快。我不知道这是否是最快的方法，但它对我来说效果很好。这都是香草js。

基本上我创建了一个包含所有和弦的和弦对象。在这个例子中我将使用两个。

var chords = [
    {
        chord: ['x', 0, 2, 0, 2, 0],
        name: 'A',
        type: '7',
    },
    {
        chord: ['x', 3, 2, 0, 1, 0],
        name: 'C',
        type: 'maj',
    },
];

然后我将可移动的和弦推入和弦对象，而不必为每个音品位置输入每个和弦 12 次。

// we need the notes twice for creating bar chords.  We'll start at a note then move thorough the next 12
var allSharpNotes = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G'];
// using 'x' for natural notes to prevent duplicates and make sure array is iterated over correct number of times 
var allFlatNotes = ['x', 'Bb', 'x', 'x', 'Db', 'x', 'Eb', 'x', 'x', 'Gb', 'x', 'Ab', 'x', 'Bb', 'x', 'x', 'Db', 'x', 'Eb', 'x', 'x', 'Gb', 'x', 'Ab'];

function makeMovableChords(sharpOrFlat){
    for(ch = 1; ch < 13; ch++){
    chords.push({   
            chord: ['x', 0 + ch, 2 + ch, 2 + ch, 2 + ch, 0 + ch],
            name: sharpOrFlat[ch],
            type: 'maj',
    });
    }
}

// Now run the function and have it create # and b versions of each movable chord.
makeMovableChords(allSharpNotes);
makeMovableChords(allFlatNotes);

然后是标记。基本上只是创建 ax,y 网格。

<div class="chord-container">
    <div id="chord-name"></div>
    <table class="chord">
        <tr id="f0"><td id="s0-f0" class="note nut hide"></td><td id="s1-f0" class="note nut"></td><td id="s2-f0" class="note nut"></td><td id="s3-f0" class="note nut"></td><td id="s4-f0" class="note nut"></td><td id="s5-f0" class="note nut"></td></tr>

        <tr id="f1"><td id="s0-f1" class="note hide"></td><td id="s1-f1" class="note"></td><td id="s2-f1" class="note"></td><td id="s3-f1" class="note"></td><td id="s4-f1" class="note"></td><td id="s5-f1" class="note"></td></tr>

        <tr id="f2"><td id="s0-f2" class="note hide"></td><td id="s1-f2" class="note"></td><td id="s2-f2" class="note"></td><td id="s3-f2" class="note"></td><td id="s4-f2" class="note"></td><td id="s5-f2" class="note"></td></tr>

        <tr id="f3"><td id="s0-f3" class="note hide"></td><td id="s1-f3" class="note"></td><td id="s2-f3" class="note"></td><td id="s3-f3" class="note"></td><td id="s4-f3" class="note"></td><td id="s5-f3" class="note"></td></tr>

        <tr id="f4"><td id="s0-f4" class="note hide"></td><td id="s1-f4" class="note"></td><td id="s2-f4" class="note"></td><td id="s3-f4" class="note"></td><td id="s4-f4" class="note"></td><td id="s5-f4" class="note"></td></tr>

        <tr id="f5"><td id="s0-f5" class="note hide"></td><td id="s1-f5"class="note"></td><td id="s2-f5" class="note"></td><td id="s3-f5" class="note"></td><td id="s4-f5" class="note"></td><td id="s5-f5" class="note"></td></tr>
    </table>
    <div id="select-container">
        <select id="chord-select">
            <option>Dmin</option>
            <option>Emin</option>
            <option>A7</option>
            <option>Cmaj</option>
            <option>Dmaj</option>
            <option>Gmaj</option>
        </select>
        <button id="chord-button" onclick="buildChord();">Make Chord</button>
    </div>
</div>

最后是构建在点击时运行的和弦的函数。 

function buildChord(){
    var selectedChord = document.getElementById('chord-select').value;
    // reset all the notes before a new chord is built
    var allNotes = document.getElementsByClassName('note');
    for(i=0; i<allNotes.length; i++){
        allNotes[i].innerHTML = '';
    }
    for(c=0; c<chords.length; c++){
        var searchChord = selectedChord.search(chords[c].name + chords[c].type);
        if(searchChord != -1){
            document.getElementById('chord-name').innerHTML = chords[c].name + chords[c].type;
            for(s=0; s<6; s++){
                switch(chords[c].chord[s]){
                    case 0: 
                        var fret = 0;
                    break;
                    case 1: 
                        var fret = 1;
                    break;
                    case 2: 
                        var fret = 2;
                    break;
                    case 3: 
                        var fret = 3;
                    break;
                    case 4: 
                        var fret = 4;
                    break;
                    case 5: 
                        var fret = 5;
                    break;
                    case 'x':
                        var fret = 'x'
                    break;
                }
                if (fret == 'x'){
                    var placement = 's' + s + '-f' + '0';
                    document.getElementById(placement).innerHTML = '<span class="chord-note">x</span>';
                } else{
                    var placement = 's' + s + '-f' + fret;
                    document.getElementById(placement).innerHTML = '<span class="chord-note">' + chords[c].fingering[s] + '</span>'; 
                }
            }
        }
    }
}
buildChord();

然后当然你需要做一些造型。 在这里查看我的 jsfiddle。

我还在这里写了一个更深入的教程。

希望这会有所帮助。

于 2015-06-01T18:32:19.463 回答