如何将变量插入数据.桂带着一个阵列

Question

我试图通过数组声明Variables，以便在dat中使用它们。桂控制器。这是我的尝试：

<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>

数组中的变量不会出现在GUI中。我真的是Javascript的新手，所以也许这只是一个声明的问题？

Answer 1

在行中：

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

…add()在对象window上查找具有由A[i]指定的名称的属性，在本例中，该属性的求值结果为false。

但是，在window上没有名为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似乎只能保存在gui对象本身上定义的控件的设置，如本文所述：为动态添加的控件保存dat.gui预设？

…在这种情况下，你可能会尝试更像这样的东西：

<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>