Как вставить переменные в dat.Gui с массивом?

Question

Я пытаюсь объявить переменные через массив, чтобы использовать их в контроллере dat.Gui. Это моя попытка:

<script> 
    window.Horizontale = 300; 
    window.Vertikale = 300; 
    window.A = new Array(); 

    for (var i=1; i<7; i++) { 
    window.A[i] = false; 
    } 

    window.onload = function() { 
    var gui = new dat.GUI(); 
    gui.add(window, 'Horizontale', 0, 600); 
    gui.add(window, 'Vertikale', 0, 600); 

    for (var i=1; i<7; i++) { 
     gui.add(window, A[i]); 
    } 
    gui.remember(window); 
    }; 
</script> 

Переменные в массиве не отображаются в графическом интерфейсе. Я действительно новичок в Javascript, так что, может быть, это просто проблема декларации?

Answer 1

В этой строке:

gui.add(window, A[i]); 

... add() смотрит на объект window для свойства с именем указанного A[i], что в данном случае имеет значение false.

Однако, false не является собственностью. Поэтому вам нужно указать свойства объекта где-то с нужными именами, а затем вы можете назначить каждому из них значения, которые вы хотите передать, в качестве дополнительного аргумента для add(). В этом случае false предоставит вам флажок в непроверенных государство.

Предполагая, что вам нужно 6 отмеченных флажков с именем 1 - 6, вы можете сделать несколько вещей, но все они включают в себя добавление 6 именованных свойств к объекту где-то. Вот один из способов сделать это с помощью второго объекта, чтобы держать ваши имена контроллера, который заменит ваш второй for цикл:

for (var i=1; i<7; i++) { 
    controller_names[i] = A[i]; 
    gui.add(controller_names, i, A[i]); 
} 

Однако, это не может играть хорошо с функциональностью сохранения настроек - dat.gui, кажется, только возможность сохранения настроек для управления, определенных на самом графического интерфейса объекта, как изучить здесь: Save dat.gui presets for dynamically added controls?

... в этом случае, вы можете попробовать что-то больше, как это:

<script> 
    window.onload = function() { 

    var gui = new dat.GUI(); 
    gui.Horizontale = 300; 
    gui.Vertikale = 300; 
    gui.A = new Array(); 

    for (var i=1; i<7; i++) { 
     gui.A[i] = false; 
    } 

    gui.add(gui, 'Horizontale', 0, 600); 
    gui.add(gui, 'Vertikale', 0, 600); 

    for (var i=1; i<7; i++) { 
     gui.add(gui.A, i, gui.A[i]); 
    } 
    gui.remember(gui); 
    }; 
</script>