我尝试实现一种方法来防止用鼠标更新值(实际上是在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?),这是关于一个按钮,而不是一个滑块,它是否改变了我的情况下的任何东西?
我没有找到滑块的显式控制器。
5条答案
按热度按时间mnemlml81#
我会这么做的滑块不是一个表单元素,在传统的w3c意义上没有什么可以禁用的。幸运的是,我们可以使用pointer-events并正确地禁用它,就像它是一个表单元素一样,只使用公共的dat.gui属性。
o0lyfsai2#
@Radio给出的解决方案效果很好。但是,对于滑块,滑块是文本框的DOM元素的兄弟。我们需要在包含所有控件的div上禁用指针事件(并且没有直接由dat.gui公开)。所以,
fae0ux8s3#
按下“开始”按钮时,设置:
3phpmpom4#
感谢提示在我身边我破解了共同的控制器,所以能够链.
gui.add(this, '_screenW').disable(true);
ycl3bljg5#
我找到了解决这个问题的方法,它在我的情况下有效。