0

Raphaeljs と Jquery を使用して巨大な配列からコード ダイアグラムを描画していますが、永遠に時間がかかります。一度に 1 つのコードを描画して、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() });

すべてのコード ダイアグラムを一度に作成するのではなく、一度に 1 つずつコード ダイアグラムを作成する最良の方法は何ですか?

4

1 に答える 1

0

約 1000 のコードを持つオブジェクトを参照するコード ファインダーを作成しました。それらは一瞬で構築されます。テーブルを使用しましたが、おそらくより高速です。これが最速の方法かどうかはわかりませんが、私にとってはうまくいきました。これはすべてバニラjsです。

基本的に、すべての和音を含む和音オブジェクトを作成しました。この例では 2 つ使用します。

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 に答える