dat.GUI-寻找一种方法来锁定滑块，防止用鼠标进入dat.GUI菜单来更新数值。[英] dat.GUI - Looking for a way to lock slider and prevent updating of values with mouse into dat.GUI menu

问题描述

我尝试实现一种方法来防止用鼠标更新值(实际上是在 three.js 动画开始时，通过单击按钮启动).

目前，我有以下 dat.GUI 菜单:

单击"开始"按钮后，我想防止用户用鼠标修改参数"Rotation x"和"Rotation y".

这是此菜单的相关代码部分:

// Create GUI
var gui = new dat.GUI({
      autoplace: false, 
      width: 350,
          height: 9 * 32 - 1
});

var params = {
      GreatCircle : '',
      Rotationx : torusRotationInitX,
      Rotationy : torusRotationInitY,
      StartingVector : '',
      ComponentVectorTheta : 15.0,
      ComponentVectorPhi : 15.0,
      CovariantDerivativeVector : '',
      ComponentCovariantDerivativeTheta : 15.0,
      ComponentCovariantDerivativePhi : 15.0
};

// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0, 2*Math.PI, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0, 2*Math.PI, 0.001).name('Rotation y ');
...

当我点击重置按钮时，我会调用以下函数:

  // Reset Button
  resetButton.onclick = function ResetParameters() {

  ...

  // Reinitialize parameters into gui
  params.Rotationx = torusRotationInitX; 
  params.Rotationy = torusRotationInitY; 

  for (var i in gui.__controllers) {
     gui.__controllers[i].updateDisplay();
  }

render();

}

我不知道控制器是否有一个选项来锁定这些通常会改变其值的滑块.

有可能吗?

感谢您的帮助.

更新 1:

也许我可以将 dat.GUI 菜单包装成一个 div 并使这个 div 不可点击，这是一个解决方案吗?

更新 2:

我尝试应用 禁用按钮的方法在 dat.gui 中?

按照这个解决方案，我在 dat.gui 中添加了扩展，就在 :

dat.controllers.FunctionController = (function (Controller, dom, common) {

...

});

以下添加的代码片段是:

function blockEvent(event)
{
  event.stopPropagation();
}

Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
  get: function()
  {
    return this.domElement.hasAttribute("disabled");
  },
  set: function(value)
  {
    if (value)
    {
      this.domElement.setAttribute("disabled", "disabled");
      this.domElement.addEventListener("click", blockEvent, true);
    }
    else
    {
      this.domElement.removeAttribute("disabled");
      this.domElement.removeEventListener("click", blockEvent, true);
    }
  },
  enumerable: true
});

扩展代码是否很好地位于 dat.GUI 源代码中?

然后，我将属性"disabled"设置到我的代码中，以防止用户用鼠标滑动"controllerRotationx"(一旦按下开始按钮):

if (animation)
controllerRotationx.__li.disabled = true;

不幸的是，我的方法不起作用:当动画开始时，我仍然可以将包含的滑块移动到"controllerRotationx"中.

我看到了上面的链接(在 dat 中禁用按钮的方法.gui?)，这是关于一个按钮而不是滑块，它对我的​​情况有什么改变吗?

我没有找到滑块的显式控制器.

如果有人能看出问题所在，那就太好了.

推荐答案

我会这样做.滑块不是表单元素，在传统的 w3c 意义上没有什么可以禁用的.幸运的是，我们可以使用指针事件并正确禁用它，就好像它是只使用公共 dat.gui 属性的表单元素一样.

var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;

本文地址：https://www.itbaoku.cn/post/1793937.html