如何锁定滑块并防止使用鼠标更新值到dat.GUI菜单中。

9 浏览
0 Comments

如何锁定滑块并防止使用鼠标更新值到dat.GUI菜单中。

我试图实现一种方法，以防止使用鼠标更新数值（实际上是在点击按钮后启动的three.js动画）。

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

[图片链接](https://i.stack.imgur.com/5xsI1.png)

一旦点击“开始”按钮，我希望阻止用户使用鼠标修改“旋转x”和“旋转y”参数。

下面是与此菜单相关的代码部分：

// 创建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
};
// 设置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 ');
...

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

// 重置按钮
resetButton.onclick = function ResetParameters() {
  ...
  // 重新初始化gui参数
  params.Rotationx = torusRotationInitX; 
  params.Rotationy = torusRotationInitY; 
  for (var i in gui.__controllers) {
     gui.__controllers[i].updateDisplay();
  }
  render();
}

我不知道是否有一个选项可以锁定这些通常改变其值的滑块。这可能吗？

更新1

也许我可以将dat.GUI菜单包装在一个div中，并使这个div不可点击，这是一个解决办法吗？

更新2

我尝试应用Method for disabling a button in 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”中的滑块。

我看到上面的链接（Method for disabling a button in dat.gui?），这是关于按钮而不是滑块的，对我的情况有所改变吗？

我没有找到一个明确的控制器来控制滑块。

0