如何使用数组将变量插入 dat.Gui？

Posted 2023-05-07

【中文标题】如何使用数组将变量插入 dat.Gui？

【英文标题】：How to insert variables to dat.Gui with an array?

【发布时间】：2013-02-13 00:40:05

【问题描述】：

我尝试通过数组声明变量以在 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>

数组中的变量不会出现在 GUI 中。我对javascript真的很陌生，所以也许这只是声明的问题？

【问题讨论】：

你是如何决定它不出现在控制器中的？如果您无法访问此方法中的数组，您能否显示方法 gui.add 声明。也可能是在“for”循环之前发生了一些故障，因此循环中的代码没有被执行。如果没有显示任何错误，我建议检查 firebug 或 chrome js 控制台

我不确定我是否正确。当我运行这个脚本时，一个 dat.gui 出现了控制器“Horizo​​ntale”和“Vertikale”，但不是 A[1]、A[2]、A[3]……其他控制器运行良好。

Aptana 和 Firebug 都没有显示任何错误。

在gui.add(window, A[i]); 之前添加alert(A[i]) 如果这些警报在执行时显示错误，则意味着您的gui.add(window, A[i]); 有问题

好的。如果我在gui.add(window, A[i]); 之前添加alert(A[1]);，则会出现警报，如果我把它放在它后面就不会。

【参考方案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 对象本身上定义的控件的设置，如下所述：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>