dat.GUI 打造可视化工具(一) (2)

保存的标识符,可以展示默认显示哪组

const Options = function() { this.number = 1; }; window.onload = function() { const options = new Options(); const gui = new dat.GUI({ load:{ "preset": "kkkkks",// 默认展示kkkks选项 "closed": false, "remembered": { "Default": { "0": { "number": 4 } }, "kkkkk": { "0": { "number": 6 } }, "kkkkks": { "0": { "number": 8 } } }, } }); // 标记保存的对象,但是不修改预设的值 gui.remember(options); gui.add(options, 'number').min(0).max(10).step(1); }; gui.add(object,prop,[min],[max],[step])

添加控制器

对象object,属性string,最小值number,最大值numer,步长number .min() .max() .step() gui.addColor(对象,属性)

颜色控制器添加到GUI

var palette = { color1: '#FF0000', // CSS string color2: [ 0, 128, 255 ], // RGB array color3: [ 0, 128, 255, 0.3 ], // RGB with alpha color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value }; gui.addColor(palette, 'color1'); gui.addColor(palette, 'color2'); gui.addColor(palette, 'color3'); gui.addColor(palette, 'color4'); gui.remove(控制器)

删除控制器

// 定义标记的控制器 let color3= gui.addColor(options,'color3') // 删除对应的控制器 gui.remove(color3); gui.destroy()

从文档中删除根GUI

gui.destroy() 折叠,展开,隐藏,显示 // 折叠 gui.close(); // 展开 gui.open(); // 隐藏 gui.hide(); // 显示 gui.show(); gui.getRoot()

拿到最顶层的实例,我再把他折叠了

one.getRoot().close() gui.getSaceObject()

一个JSON对象,表示此GUI的当前状态及其属性

下拉框

gui.add(object, key, array/object );

const options = { color5:'xxxx', speed:40, types:'two' }; const gui = new dat.GUI(); gui.add(options, 'color5'); gui.add(options,'types',['one','two','three']) // 第一种 gui.add(options,'speed',{slow:1,fast:40}) // 第二种

controller let one = gui.addFolder('nameOne') one.addColor(options, 'color1') let two = one.addFolder('nameTwo'); two.addColor(options, 'color1') console.log(one.name); // nameOne console.log(one.domElement); // 拿到当前控制器的dom // 这个应该是监听值得更改进行更新,进行更新 one.listen(two) // 删除对应的控制器 let two = one.addFolder('nameTwo'); let three = two.addColor(options, 'color1') two.remove(three) .object =>object .property=>string const Options = { number: 1, color5: 'xxxx' }; const options = Options; const gui = new dat.GUI(); gui.add(options, 'color5'); let controll= gui.add(options, 'number') console.log(controll.property); // number console.log(controll.object);// {number: 1, color5: "xxxx"} onChange 改成值时触发

只要通过此控制器修改值，就会调用此函数

let three = two.addColor(options, 'color1') three.onChange(val=>{ console.log(val); }) onFinishChange(fn)

去掉焦点的时候触发,对数字或者字符串有效

const Options = function () { this.number = 1; this.color5 = 'xxxx'; }; gui.add(options, 'number').min(0).max(10).step(1).onFinishChange(val=>{ console.log(val); }); gui.add(options, 'color5').onFinishChange(val=>{ console.log(val); }) getValue() setValue(newValue)

查询设置值

const one=gui.add(options, 'color5'); one.setValue('333') console.log(one.getValue());//333 controller.updateDisPlay()

刷新此控制器的视图显示,以便与对象的当前值保持同步

controller.isModified() => Boolean

如果值偏移初始值则返回true

const options = { color5: 'xxxx', speed: 40, types: 'two' }; const gui = new dat.GUI(); let one = gui.add(options, 'types', ['one', 'two', 'three']) one.onChange(val=>{ // 我们发现当不等于two 则返回true console.log(one.isModified()); })