dat.gui---轻量级的图形用户界面库

基础用法

引入js 文件

<script type="text/javascript" src="https://raw.github.com/dataarts/dat.gui/master/build/dat.gui.min.js">script>

初始化配置

var Options = function() {this.message = 'dat.gui';this.speed = 0.8;this.displayOutline = false;this.button = function() {};
};window.onload = function() {var options = new Options();var gui = new dat.GUI();gui.add(options, 'message');gui.add(options, 'speed', -5, 5);gui.add(options, 'displayOutline');gui.add(options, 'button');
};

这里，在你的配置项： 里，GUI 会根据你设置的属性类型来渲染不同的控件

控制输入限制

控制限制输入项输入类型以及值

gui.add(text, 'noiseStrength').step(5); // 增长的步长
gui.add(text, 'growthSpeed', -5, 5); // 最大、最小值
gui.add(text, 'maxSize').min(0).step(0.25); // 最大值和步长// 文本输入项
gui.add(text, 'message', [ 'pizza', 'chrome', 'hooray' ] );// 下拉框形式选择文案
gui.add(text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );

选项组

可以使用文件夹给选项分组

var gui = new dat.GUI();var f1 = gui.addFolder('Flow Field');
f1.add(text, 'speed');
f1.add(text, 'noiseStrength');var f2 = gui.addFolder('Letters');
f2.add(text, 'growthSpeed');
f2.add(text, 'maxSize');
f2.add(text, 'message');f2.open();

颜色值的输入

提供4种类型颜色输入控制

var Options = function() {this.color0 = "#ffae23"; // CSS stringthis.color1 = [ 0, 128, 255 ]; // RGB arraythis.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alphathis.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value
};window.onload = function() {var options = new Options();var gui = new dat.GUI();gui.addColor(options, 'color0');gui.addColor(options, 'color1');gui.addColor(options, 'color2');gui.addColor(options, 'color3');
};

存储

可以使用方法开启 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)
};