dat.GUI-寻找一种方法来锁定滑块并防止使用鼠标将值更新到dat.GUI菜单中 [英] dat.GUI - Looking for a way to lock slider and prevent updating of values with mouse into dat.GUI menu
问题描述
我尝试实现一种方法来防止使用鼠标更新值（实际上是 three.js 动画已启动，并通过单击按钮启动）。
I try to implement a way to prevent the updating of values with mouse (actually when the three.js animation has started, launched with a click on button).
目前，我有以下 dat.GUI 菜单：
单击开始按钮后，我想防止用户用鼠标修改参数 旋转x 和 旋转y 。
Once "start" button is clicked, I would like to prevent user from modifying with mouse the parameters "Rotation x" and "Rotation y".
这是此菜单代码的相关部分：
Here is the concerned part of code for this menu :
// 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 ');
...
当我单击重置按钮时，调用以下函数：
When I click on reset button, I call the following function :
// 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();
}
我不知道控制器是否有选项锁定这些通常会更改其值的滑块。
I don't know if there is an option for controller to lock these sliders which usually change their values.
有可能吗？
感谢您的帮助。
更新1：
也许我可以将dat.GUI菜单包装到div中，并使该div不可单击，这是一种解决方案吗？
Maybe I could wrapper the dat.GUI menu into a div and make this div not clickable, is it a solution ?
更新2：
我尝试应用在dat.gui中禁用按钮的方法？
在此解决方案之后，我已将扩展名添加到 dat.gui 中，紧接在以下位置：
Following this solution, I have added the extension into dat.gui, just after :
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 source？
Is extension code well located into dat.GUI source ?
然后，我将属性 disabled 设置到我的代码中，以防止用户滑动 controllerRotationx 用鼠标（一旦按下开始按钮）：
Then, I set the property "disabled" into my code to prevent user from sliding "controllerRotationx" with mouse (once start button is pressed ) :
if (animation)
controllerRotationx.__li.disabled = true;
不幸的是，我的方法不起作用：开始动画时，我仍然可以移动包含的滑块进入 controllerRotationx 。
Unfortunately, my method doesn't work : when animation is started, I can still move the slider contained into "controllerRotationx".
我看到了上面的链接（在dat.gui中禁用按钮的方法？），这是关于按钮的，而不是滑块的，
I saw that above link (Method for disabling a button in dat.gui?), this was about a button and not for a slider, does it change anything for my case ?
我没有找到用于滑块的显式控制器。
I didn't find an explicit controller for the slider.
如果有人看到了问题所在，那就太好了。
if someone could see what's wrong, this would be great.
推荐答案
我会这样做。滑块不是表单元素，传统的w3c都没有要禁用的内容。幸运的是，我们可以使用指针事件并使用公共dat.gui属性将其正确禁用，就好像它是一个表单元素一样。
I would do this. The slider is not a form element, there's nothing to disable in the traditional w3c sense. Luckily we can use pointer-events and disable it properly as if it were a form element using just public dat.gui properties.
var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;
这篇关于dat.GUI-寻找一种方法来锁定滑块并防止使用鼠标将值更新到dat.GUI菜单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
