3

1) 我正在开发一个有 2 个滑块的 dat.GUI 应用程序。我想在另一个更改时重置一个。例如 ：

 var FizzyText = function() {
   this.slider1 = 0;
   this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

slider1.onChange(function(value){
  console.log(value); 
  text.slider2 = 0; // this doesn't work
});

slider2.onChange(function(value){
  console.log(value);
  text.slider1 = 0; // this doesn't work
});

这只是一个示例，但将滑块重置或设置为其默认值（在 FizzyText 中）非常重要。

上面的例子来自https://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically我不能自动更新滑块

2）我想添加一个重置按钮，其中所有滑块都将被重置。但是有了前面的答案，我就可以重置所有值

4

2 回答 2

2

我找到了答案： gui.__controllers是和控制器数组。所以我只是添加了类似的东西：

var FizzyText = function () {
    this.slider1 = 0;
    this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

/* Here is the update */
var resetSliders = function (name) {
    for (var i = 0; i < gui.__controllers.length; i++) {
        if (!gui.__controllers.property == name)
            gui.__controllers[i].setValue(0);
    }
};

slider1.onChange(function (value) {
    console.log(value);
    resetSliders('slider1');
});

slider2.onChange(function (value) {
    console.log(value);
    resetSliders('slider2');
});

于 2016-12-15T01:15:29.313 回答
0

最好通过使用控制器.initialValue而不是硬编码来重置 dat.GUI 的值，因此最好使用以下方法：gui.__controllers[i].setValue(gui.__controllers[i]);

您可以使用重置所有 GUI 的控制器gui.__controllers.forEach(controller => controller.setValue(controller.initialValue));

于 2019-03-14T00:07:47.910 回答