dat.GUI - API

dat.GUI

dat.GUI 是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。

• GitHub 主页：https://github.com/dataarts/dat.gui

使用步骤

1. 首先在页面的 标签中添加这个库。

<script type="text/javascript" src="../libs/dat.gui.js">script>

2. 定义一个 JavaScript 对象（这里假设叫做 controls），该对象将保存希望通过 dat.GUI 改变的属性。

var controls = new function () {
     
    this.rotationSpeed = 0.02;
    //......
};

3. 接下来需要将这个 JavaScript 对象传递给 dat.gui 对象，并设置各个属性的取值范围。

var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
//......

4. 最后当用户对 dat.GUI 控件进行操作时，controls 里的属性值也会同步修改。我们在程序中直接引用这个属性值就好了。
   上述原文出自：www.hangge.com 原文链接：https://www.hangge.com/blog/cache/detail_1785.html

---

dat

GUI: ƒ GUI(pars)
color: {math: {…}, Color: ƒ, interpret: ƒ}
controllers: {Controller: ƒ, BooleanController: ƒ, OptionController: ƒ, StringController: ƒ, NumberController: ƒ, …}
default: {color: {…}, controllers: {…}, dom: {…}, gui: {…}, GUI: ƒ}
dom: {dom: {…}}
gui: {GUI: ƒ}

GUI

属性

.domElement
.autoPlace: true
.closeOnTop: false
.closed: false
.load: Object
.name: undefined
.parent: undefined
.preset: "Default"
.scrollable: true
.useLocalStorage: false
.width: 245

方法

.add(object, property)
添加控制器

.addColor(object, property)
添加颜色控制器

.addFolder(name)
添加文件夹

.close()
关闭

.destroy()
删除

.getRoot()
获取根节点

.getSaveObject()
.hide()
隐藏

.listen(controller)
.onResize()
.onResizeDebounced: ƒ ()
.open()
打开

.remember()
.remove(controller)
移除控制器

.removeFolder(folder)
移除文件夹

.revert(gui)
.save()
.saveAs(presetName)
.show()
显示

.updateDisplay()
更新显示内容

controllers

• Controller: ƒ Controller(object, property)
• BooleanController: ƒ BooleanController(object, property)
• ColorController: ƒ ColorController(object, property)
• FunctionController: ƒ FunctionController(object, property, text)
• NumberController: ƒ NumberController(object, property, params)
• NumberControllerBox: ƒ NumberControllerBox(object, property, params)
• NumberControllerSlider: ƒ NumberControllerSlider(object, property, min, max, step)
• OptionController: ƒ OptionController(object, property, opts)
• StringController: ƒ StringController(object, property)

Controller

属性

.initialValue = object[property];
.domElement = document.createElement('div');
.object = object;
.property = property;

方法

.getValue()
.isModified()
.onChange(fnc)
.onFinishChange(fnc)
.setValue(newValue)
.updateDisplay()