javascript - 如何使用数组将变量插入到 dat.Gui 中？

Question

我尝试通过数组声明变量以在 dat.Gui Controller 中使用它们。这是我的尝试:

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

但是，没有名为 false 的属性上window 。因此，您需要在某个对象上指定具有所需名称的属性，然后您可以为每个属性分配您想要作为附加参数传递给 add() 的值。 – 在这种情况下，false会给你一个未选中状态的复选框。

因此，假设您想要 6 个名为 1 - 6 的未选中复选框，您可以执行一些操作，但它们都涉及向某个对象的某处添加 6 个命名属性。这是使用第二个对象来保存 Controller 名称的一种方法，它将替换您的第二个 for循环:

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

但是，这可能无法很好地使用保存设置功能 - dat.gui 似乎只能保存 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>