logo标签列表

如何删除dat.GUI元素？

user-interfacethree.jsdat.gui
14

我找到了这个用于删除GUI元素的函数，但我认为它已经过时了。到目前为止，我还没有找到其他人知道如何删除GUI的任何部分，无论是整个dat.GUI()还是只是添加到dat.GUI()中的元素。对于我所需的（完全删除dat.GUI()），第一个方法可能已经足够了，但任何一种方法都将非常有帮助！

需要删除一个 dat.GUI()

gui = new dat.GUI();

...

removeGui(gui);

function removeGui(gui, parent) 
{
    if(!parent) 
    {
        parent = dat.GUI.autoPlaceContainer;
    }
    parent.removeChild(gui.domElement);
}
但是返回了错误：无法调用未定义的'removeChild'方法，因此我猜autoPlaceContainer是不正确的。
这个函数的原始作者留下了这些注释：
其中参数gui表示要删除的 DAT.GUI，parent是父容器，如果您在实例化DAT.GUI时没有指定domElement，则不需要传递parent。
3
哇！我正在浏览所有 dat.GUI 的源代码，发现了一个 destroy() 函数，于是我尝试使用它并且它起作用了...从上面的例子中，你只需要执行 gui.destroy();。 - user2287949
1
我刚刚尝试使用 gui.destroy()，但是出现了错误：destroy is not a function。你可以在答案中准确地描述你所做的事情吗？ - Bakuriu
6个回答
14
var gui = new dat.GUI();
item = gui.add(text, 'message');

删除：

gui.remove(item);
如果您的物品在文件夹中，您需要执行以下操作：

如果您的物品在文件夹中，您需要执行以下操作：

folder.remove(item);
8
使用 remove 方法时，我一直收到这个错误信息：“在节点上执行 'removeChild' 失败：要移除的节点不是该节点的子节点”。 - Ash Blue
我也一样... Ash Blue，你找到解决方案了吗？ - José L.
1
好的，我找到了一个解决方案，不确定它是否适用于你，Ash。每次使用.min()或.max()时，您必须将控制器重新分配给变量：var theItem=gui.add(obj, 'x'); theItem=theItem.min(0).max(10);，例如。另一方面，如果您想要附加侦听器，请不要链接它并且不要将其分配给变量。所以做 theItem=theItem.min(0).max(10); theItem.onChange(function(value){console.log(value);}); 而不是 theItem=theItem.min(0).max(10).onChange(function(value){console.log(value);});。希望这有所帮助，我没有时间进一步研究... - José L.
12

如果您想删除整个dat.GUI元素及其所有侦听器，可以使用gui.destroy()

如果您想重置dat.GUI的值，则可以使用datGUI.__controllers.forEach(controller => controller.setValue(controller.initialValue));

好的 - 所以我必须说 - 这并不会删除所有的监听控制器 - 如果你想要正确地完成它，你需要从__listening数组（也在实例__folders属性内）中删除控制器，并使用一个空数组调用updateDisplays。 - cybafelo
1
您可以尝试使用以下代码来隐藏它：

。

gui.hide()
1
你可以像这样删除 dat.GUI 元素：

gui.remove()

0
如果您想在不销毁 GUI 元素本身的情况下删除所有控制器，请执行以下操作：
let gui = new dat.GUI();
//add some elements with gui.add method
...
//remove all controller of gui
while(gui.__controllers.length > 0) {
    gui.__controllers[0].remove();
}
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接