dat.GUI：它是一个轻量级的 JavaScript 控制器库。它使我们可以轻松地即时操作变量和触发函数。我们可以通过设定好的控制器去快捷的修改设定的变量

安装

发表于

更新于

阅读量

npm i dat.gui

使用

发表于

更新于

阅读量

const dat = require('dat.gui')

// ES6
import * as dat from 'dat.gui'

const gui = new dat.GUI({
    name: 'MyGUI',
    width: 300,
    closed: true
})

控制输入限制

发表于

更新于

阅读量

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

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

从GUI外部控制配置项

如果你想从外部控制选项，你可以为选项调用 listen 方法，则你改变option时，也会同步到面板里

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)
};

new GUI([params])

var gui = new dat.GUI({name: 'My GUI'});
// 创建一个GUI ,添加一个子盒子
var gui = new dat.GUI();
var folder1 = gui.addFolder('Flow Field');

Param	Type	Default	Description
[params]	Object
[params.name]	String		此GUI的名称
[params.load]	Object		放在预设的实例
[params.parent]	dat.gui.GUI
[params.autoPlace]	Boolean	true	如果为false,就是不实用默认定位方式
[params.hideable]	Boolean	true	如果为true,则通过按键h显示/隐藏GUI
[params.closed]	Boolean	false	如果为true,则开始折叠
[params.closeOnTop]	Boolean	false	如果为true，则关闭/打开按钮显示在GUI的顶部,也就是说默认情况下,打开的按钮在顶部,关闭的时候按钮在底下

例如

const gui = new dat.GUI({name:'aaa',hideable:false,closed:true,closeOnTop:false});

例如autoPlace的使用方式,我们需要把他添加到我们需要放置的位置

const gui = new dat.GUI({autoPlace:false});
// 添加id
gui.domElement.id = 'ccc';
// 在你需要添加的dom,把它放在里面
box.appendChild(gui.domElement)
gui.domElement拿到最外层的DOM

然后,我们只需要修改css就可以了

#ccc{
  position: absolute;
  top:50%;
  left:50%;
}

gui.addFolder(string)

创建一个子盒子实例

gui.removeFolder(实例)

删除一个子盒子实例

// 添加一个子盒子
let one=gui.addFolder('nameOne')
one.addColor(options,'color1')
// 删除一个子盒子
gui.removeFolder(one)

gui.parent

拿到父级的实例

let obj={
  child:1
}
const gui = new dat.GUI();
// 创建一个子盒子
const folder = gui.addFolder('nameOne')

folder.add(obj,'child',-1,1,0.1);
//拿到父级的GUI实例
console.log(folder.parent);
//拿到对应的文件夹名称
console.log(folder.name);

gui.preset

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

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.remove(控制器)

删除控制器

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

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.destroy()

从文档中输出根GUI

gui.destroy()

折叠,展开,隐藏,显示

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

gui.getRoot()

拿到最顶层的实例，再折叠

one.getRoot().close()

gui.getSaveObject()

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

Controller

发表于

更新于

阅读量

表示对象的给定属性的“抽象”类

onChange 改成值时触发

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

let color = two.addColor(options,'color')
color.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()

查询设置值

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

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

const options = {
  color5: 'xxxx',
  speed: 40,
  types: 'two'
};
const gui = new dat.GUI();
let num = gui.add(options, 'speed', 10, 20, .1);
options.speed=12
// 比如直接修改对象,然后更新
gui.updateDisplay()

isModified()

如果值偏移初始值则返回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());
})

API文档

发表于

更新于

阅读量

https://github.com/dataarts/dat.gui/blob/master/API.md