dat.gui---轻量级的图形用户界面库( 二 ) _初始

文章插图
存储
可以使用方法开启 GUI 的存储模式，而且可以分组存储

var Options = function() {this.color0 = "#ffae23"; // CSS string};window.onload = function() {var options = new Options();var gui = new dat.GUI();gui.remember(options); gui.addColor(options, 'color0');};

文章插图
当然你也可以把之前保存的数据在初始化时导入

文章插图

var Options = function() {this.number = 1;};window.onload = function() {var options = new Options();var gui = new dat.GUI({load:{"preset": "kkkkk","closed": false,"remembered": {"Default": {"0": {"number": 4}},"kkkkk": {"0": {"number": 6}}},"folders": {}}});gui.remember(options);gui.add(options, 'number').min(0).max(10).step(1);};

可以通过配置项指定使用哪个分组的配置

文章插图
事件
你可以为每一项设置一个监听事件和

var Options = function() {this.number = 1;};window.onload = function() {var options = new Options();var gui = new dat.GUI();var controller = gui.add(options, 'number').min(0).max(10).step(1);controller.onChange(function(value) {console.log("onChange:" + value)});controller.onFinishChange(function(value) {console.log("onFinishChange" + value)});};

获取面板DOM对象
可以通过gui.获取原生 dom 对象
从GUI外部控制配置项
如果你想从外部控制选项，你可以为选项调用方法，则你改变时，也会同步到面板里

var Options = function() {this.number = 1;};window.onload = function() {var options = new Options();var gui = new dat.GUI();var controller = gui.add(options, 'number').min(0).max(10).step(1).listen();setInterval(function() {options.number = Math.random() * 10;}, 500)};

文章插图