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

Posted 2023-05-07

【中文标题】如何锁定滑块并防止使用鼠标将值更新到 dat.GUI 菜单

【英文标题】：How to lock slider and prevent updating of values with mouse into dat.GUI menu

【发布时间】：2016-07-27 01:11:28

【问题描述】：

我尝试实现一种方法来防止用鼠标更新值（实际上是在 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

我尝试应用Method for disabling a button in dat.gui?上使用的方法

按照这个解决方案，我已将扩展名添加到dat.gui，紧随其后：

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

...

);

下面添加的代码sn-p是：

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?)，这是关于一个按钮而不是一个滑块，它对我的​​情况有什么改变吗？

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

【参考方案1】：

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

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

【参考方案2】：

@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'

【参考方案3】：

按下开始按钮时，设置：

controllerRotationx.__li.setAttribute( "style", "display: none" );

【讨论】：

谢谢，但我想避免隐藏 controllerRotationx 的 __li 元素（ 标签？？）。按照您的想法，我尝试过：controllerRotationx.__li.setAttribute('disabled', 'disabled');但它似乎不起作用。

对于disabled 部分，请查看：***.com/questions/24461964/…

@gailat：在您的链接中，这是一个按钮而不是滑块，它对我的​​情况有什么改变吗？

没关系。你只需要控制器变量；按钮或滑块的工作方式应该相同。

@gailat：好的，我意识到“this.domElement.setAttribute("disabled", "disabled");"没有被调用到代码扩展中，我还在试图理解为什么

【参考方案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;
    ,