Dat.gui 使用教程

官方站點：http://workshop.chromeexperiments.com/examples/gui/

Dat.gui 使用教程：Dat.gui 是一個 GUI 組件，他可以為你的 demo 提供參數的設置。並且很容易上手。

基礎用法

引入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');
};

這里，在你的配置項：FizzyText 里，GUI 會根據你設置的屬性類型來渲染不同的控件

• 如果是Number 類型則用 slider來控制
• 如果是 Boolean 類型，則用 Checkbox來控制
• 如果是 Function 類型則用 button 來控制
• 如果是 String 類型則用 input 來控制

控制輸入限制

控制限制輸入項輸入類型以及值

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種類型顏色輸入控制

• CSS
• RGB
• RGBA
• Hue

var Options = function() {
  this.color0 = "#ffae23"; // CSS string
  this.color1 = [ 0, 128, 255 ]; // RGB array
  this.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
  this.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');
};

存儲

可以使用 remember 方法開啟 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);
};

可以通過 preset 配置項指定使用哪個分組的配置

事件

你可以為每一項設置一個監聽事件 onChange 和 onFinishChange

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.domElement 獲取原生 dom 對象

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