javascript 如何锁定滑块和防止更新的价值观与鼠标到dat.gui菜单

kyks70gy  于 2023-09-29  发布在  Java
关注(0)|答案(5)|浏览(88)

我尝试实现一种方法来防止用鼠标更新值(实际上是在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菜单 Package 成一个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?),这是关于一个按钮,而不是一个滑块,它是否改变了我的情况下的任何东西?
我没有找到滑块的显式控制器。

mnemlml8

mnemlml81#

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

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

o0lyfsai2#

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

fae0ux8s3#

按下“开始”按钮时,设置:

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

3phpmpom4#

感谢提示在我身边我破解了共同的控制器,所以能够链.
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;
    },
ycl3bljg

ycl3bljg5#

我找到了解决这个问题的方法,它在我的情况下有效。

var params = {
    Rotationx: 0.785,
    get rx() { return this.Rotationx; },
    set rx(val) { /* Do nothing */ }
};

var ctrl = gui.add(params, 'rx', 0, 2 * Math.PI, 0.001).name('Rotation x ');
gui.add({
    clickMeToChangeRotX() {
        params.Rotationx += 0.001;
        ctrl.updateDisplay();
    }
}, 'clickMeToChangeRotX').name('Change rotation x');

相关问题