如何锁定滑块并防止用鼠标更新值到 dat.GUI 菜单
How to lock slider and prevent updating of values with mouse into dat.GUI menu
我尝试实现一种防止使用鼠标更新值的方法(实际上,当 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) {
...
});
下面添加的代码片段是:
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
”中的滑块。
我在 link (Method for disabling a button in dat.gui?) 上面看到了,这是关于按钮而不是滑块,它对我的情况有什么改变吗?
我没有找到滑块的明确控制器。
按下开始按钮时,设置:
controllerRotationx.__li.setAttribute( "style", "display: none" );
我会这样做。滑块不是表单元素,在传统的 w3c 意义上没有什么可以禁用的。幸运的是,我们可以使用指针事件并正确禁用它,就好像它是一个仅使用 public dat.gui 属性的表单元素一样。
var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;
@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'
感谢提示
在我这边,我破解了通用控制器
如此能够链接。
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;
},
我尝试实现一种防止使用鼠标更新值的方法(实际上,当 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) {
...
});
下面添加的代码片段是:
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
”中的滑块。
我在 link (Method for disabling a button in dat.gui?) 上面看到了,这是关于按钮而不是滑块,它对我的情况有什么改变吗?
我没有找到滑块的明确控制器。
按下开始按钮时,设置:
controllerRotationx.__li.setAttribute( "style", "display: none" );
我会这样做。滑块不是表单元素,在传统的 w3c 意义上没有什么可以禁用的。幸运的是,我们可以使用指针事件并正确禁用它,就好像它是一个仅使用 public dat.gui 属性的表单元素一样。
var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;
@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'
感谢提示 在我这边,我破解了通用控制器 如此能够链接。
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;
},