dat.gui 如何用代码隐藏菜单

Posted 2023-05-07

【中文标题】dat.gui 如何用代码隐藏菜单

【英文标题】：dat.gui how to hide menu with code

【发布时间】：2013-02-05 15:05:25

【问题描述】：

我使用 dat.gui 为我的 Three.js 应用程序制作了一个菜单。 它工作正常，我还发现按 h 键可以隐藏使用 dat.gui 创建的菜单。 我的问题是如何让菜单直接从代码中出现/消失？

 var gui = new dat.GUI();
 gui.add(text, 'message');
 gui.add(text, 'speed', -5, 5);

 gui.???

我尝试使用 DOMElement hide 的属性，它可以工作，但我想要一种独特的方式来处理这个函数。 有函数调用吗？我注意到与击键相关的 javascript 事件通过库中的绑定与范围相关。 但是这样做的正确方法是什么？

【参考方案1】：

我遇到了同样的问题并通过以下方式解决了它：

var gui = new dat.GUI();
dat.GUI.toggleHide();

【讨论】：

还有gui.close()

@CompanyLaser 但是 gui.close() 向上滚动控件，而 dat.GUI.toggleHide() 实际上隐藏了它们（通过将 zIndex 设置为负数）。您只能通过 API 一次隐藏所有 GUI，而不是单独隐藏。除非你跟踪最后一个状态，否则你不能断言它们被显示或隐藏。

【参考方案2】：

你可以试试

var gui = new dat.GUI();
 //... your logic here
gui.__proto__.constructor.toggleHide()

【参考方案3】：

你和我一直在寻找的是

var gui = new dat.GUI();
// to toggle it closed
gui.closed = true;
// to toggle it open again
gui.closed = false;

我在 2104 行 的 the source 得到了这个，内部函数 open 和 close 正是这样做的。

gui 会即时对值更改做出反应（您可以从控制台重新分配 gui.close 以查看它的运行情况）。

【参考方案4】：

截至最新版本：

gui.close();

【讨论】：

gui.close() 不会完全隐藏 GUI。它只是关闭它。使用GUI.toggleHide() 就可以了！ （参考@Qiau 的回答）。

【参考方案5】：

Ok找到了解决办法，在dat.GUI的原型中加入如下函数：

  dat.GUI.prototype.removeFolder = function(name) 
    var folder = this.__folders[name];
    if (!folder) 
      return;
    
    folder.close();
    this.__ul.removeChild(folder.domElement.parentNode);
    delete this.__folders[name];
    this.onResize();
  

【参考方案6】：

我会推荐：

$(gui.domElement).attr("hidden", true);

因为它还可以防止点击。使用toggleHide() 仍然可以单击它。 只需关闭它就会有机会重新打开。

为我工作，因为我不希望用户重新打开它；）

【参考方案7】：

您可以在 gui domElement 中的第一个 ul 标记上切换“关闭”类。

如果您使用的是 JQuery，请按照以下步骤操作：

var gui = new dat.GUI();
$(gui.domElement).find(">ul").toggleClass("closed");