Question

我尝试实现一种方法来阻止使用鼠标更新值（实际上当three.js动画开始时，通过单击按钮启动）。

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

一次＆＃34;开始＆＃34;单击按钮，我想阻止用户使用鼠标修改参数＆＃34; Rotation x＆＃34;和＆＃34; Rotation y＆＃34;。

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

// 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：

我尝试应用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来源？

然后，我设置了属性＆＃34; disabled＆＃34;进入我的代码以防止用户滑动＆＃34; controllerRotationx＆＃34;用鼠标（按下开始按钮）：

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

不幸的是，我的方法不起作用：当动画开始时，我仍然可以将包含的滑块移动到＆＃34; controllerRotationx＆＃34;。

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

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

如果有人能看出错误，那就太好了。

Answer 1

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

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

Answer 2

按下“开始”按钮后，设置：

name

Answer 3

@Radio给出的解决方案效果很好。但是，对于滑块，滑块是文本框的DOM元素的兄弟。我们需要在包含所有控件的div上禁用指针事件（并且不会直接由dat.gui公开）。所以，

var speeder = menu.add(text, 'speed', -5, 5);
// disables the text box
speeder.domElement.style.pointerEvents = "none"
// disables all controller elements related to "speeder"
speeder.domElement.parentElement.style.pointerEvents = 'none'

Answer 4

感谢提示在我这边，我入侵了通用控制器这样就可以链接。

gui.add(this, '_screenW').disable(true);

  Common.extend(controller,                                   {
    disable: function disable(v) {
      this.domElement.style.pointerEvents = v?"none":"auto";
      this.domElement.style.opacity = v?.5:1;
      return controller;
    },

dat.GUI - 寻找一种方法来锁定滑块并防止使用鼠标将值更新到dat.GUI菜单中

4 个答案: