dat.GUI 打造視覺化工具(一)

房東家的貓發表於2020-11-09
GUI視覺化

前言

有時候學習api其實我們可以從原始碼的角度學習,因為有時候很多文件寫的太不清楚了,自己都是慢慢去試,去猜,去實現其實也是挺浪費時間的,面對未知的一臉矇蔽,偶爾煩躁,其實需要的是自己靜下心來慢慢研究,收穫離你不遠

介紹

  • 與javascript一起使用的引數呼叫庫
  • 顧名思義，GUI（圖形使用者介面）可以建立一個表單螢幕，您可以在其中通過載入此庫並設定引數來簡單地輸入滑塊和數值
  • 根據引數值得更改合併處理直接更改畫面

好處

  • dat.GUI 讓操作DOM更容易
  • 設定dat.GUI後，您無需執行手動操作
  • 通過設定dat.GUI，不僅可以與工程師共享螢幕狀態的確認,也可以跟產品和UI或者測試共享螢幕狀態的確認
  • 可以僅憑設計無法想法的互動式表達影像

安裝

npm install --save dat.gui

<script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>

使用

const dat = require('dat.gui');

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

const gui = new dat.GUI();

api文件

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

簡單demo

<style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-color: rgb(0, 0, 0);
    }
</style>
<div id="box"></div>
<script>
import * as dat from 'dat.gui'

const box = document.querySelector('#box');

class Choid {
  constructor() {
    this.R = 0;
    this.G = 0;
    this.B = 0;
  }

  setup() {
    box.style.background = `rgb(${this.R},${this.G},${this.B})`;
  }
}

const params = new Choid();
const gui = new dat.GUI();
['R','G','B'].forEach(val=>gui.add(params,val).min(0).max(255).step(.1).onChange(()=>{
  params.setup();
}))
</script>

拖動的時候,隨著數值的變化頁面也會發現對應的變化

new GUI([params])

var gui = new dat.GUI({name: 'My GUI'});
name的作用
// 建立一個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%;
    }

設定預設模式,感覺這個不常用

const obj = {
  message: 'Hello World',
  explode: function () {
    alert('Bang!');
  },

};

var gui = new dat.GUI();

gui.remember(obj);

gui.add(obj, 'message');
gui.add(obj, 'explode');

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

相關文章