dat.GUI 打造視覺化工具(一)
阿新 • • 發佈：2020-11-09
# 前言
有時候學習api其實我們可以從原始碼的角度學習,因為有時候很多文件寫的太不清楚了,自己都是慢慢去試,去猜,去實現其實也是挺浪費時間的,面對未知的一臉矇蔽,偶爾煩躁,其實需要的是自己靜下心來慢慢研究,收穫離你不遠
# 介紹
* 與javascript一起使用的引數呼叫庫
* 顧名思義，GUI（圖形使用者介面）可以建立一個表單螢幕，您可以在其中通過載入此庫並設定引數來簡單地輸入滑塊和數值
* 根據引數值得更改合併處理直接更改畫面
好處
* dat.GUI 讓操作DOM更容易
* 設定dat.GUI後，您無需執行手動操作
* 通過設定dat.GUI，不僅可以與工程師共享螢幕狀態的確認,也可以跟產品和UI或者測試共享螢幕狀態的確認
* 可以僅憑設計無法想法的互動式表達影象
# 安裝
```js
npm install --save dat.gui
```
# 使用
```js
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
```html
```
拖動的時候,隨著數值的變化頁面也會發現對應的變化
# new GUI([params])
```js
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的頂部,也就是說預設情況下,開啟的按鈕在頂部,關閉的時候按鈕在底下 |
例如
```js
const gui = new dat.GUI({name:'aaa',hideable:false,closed:true,closeOnTop:false});
```
例如autoPlace的使用方式,我們需要把他新增到我們需要放置的位置
```js
const gui = new dat.GUI({autoPlace:false});
// 新增id
gui.domElement.id = 'ccc';
// 在你需要新增的dom,把它放在裡面
box.appendChild(gui.domElement)
```
**gui.domElement**拿到最外層的DOM
然後,我們只需要修改css就可以了
```css
#ccc{
position: absolute;
top:50%;
left:50%;
}
```
設定預設模式,感覺這個不常用
```js
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(資料夾)
刪除一個子盒子例項
```js
// 新增一個子盒子
let one=gui.addFolder('nameOne')
one.addColor(options,'color1')
// 刪除一個子盒子
gui.removeFolder(one)
```
## gui.parent
拿到父級的例項
```js
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
儲存的識別符號,可以展示預設顯示哪組
```js
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])
新增控制器
```js
物件object,屬性string,最小值number,最大值numer,步長number
.min()
.max()
.step()
```
## gui.addColor(物件,屬性)
顏色控制器新增到GUI
```js
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(控制器)
刪除控制器
```js
// 定義標記的控制器
let color3= gui.addColor(options,'color3')
// 刪除對應的控制器
gui.remove(color3);
```
## gui.destroy()
從文件中刪除根GUI
```js
gui.destroy()
```
## 摺疊,展開,隱藏,顯示
```js
// 摺疊
gui.close();
// 展開
gui.open();
// 隱藏
gui.hide();
// 顯示
gui.show();
```
## gui.getRoot()
拿到最頂層的例項,我再把他摺疊了
```js
one.getRoot().close()
```
## gui.getSaceObject()
一個JSON物件,表示此GUI的當前狀態及其屬性
# 單選
```js
const options = {
fale:true
};
```
# 按鈕
```js
const options={
randomw(){
alert(333)
}
}
```
# 下拉框
**gui.add(object, key, array/object );**
```js
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
```js
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
```js
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 改成值時觸發
只要通過**此控制器**修改值，就會呼叫此函式
```js
let three = two.addColor(options, 'color1')
three.onChange(val=>{
console.log(val);
})
```
## onFinishChange(fn)
去掉焦點的時候觸發,對數字或者字串有效
```js
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)
查詢設定值
```js
const one=gui.add(options, 'color5');
one.setValue('333')
console.log(one.getValue());//333
```
## controller.updateDisPlay()
重新整理此控制器的檢視顯示,以便與物件的當前值保持同步
```js
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()
```
## controller.isModified() => Boolean
如果值偏移初始值則返回true
```js
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());