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

前言

有时候学习api其实我们可以从源码的角度学习,因为有时候很多文档写的太不清楚了,自己都是慢慢去试,去猜,去实现其实也是挺浪费时间的,面对未知的一脸蒙蔽,偶尔烦躁,其实需要的是自己静下心来慢慢研究,收获离你不远

介绍

与javascript一起使用的参数调用库

顾名思义，GUI（图形用户界面）可以创建一个表单屏幕，您可以在其中通过加载此库并设置参数来简单地输入滑块和数值

根据参数值得更改合并处理直接更改画面

好处

dat.GUI 让操作DOM更容易

设置dat.GUI后，您无需执行手动操作

通过设置dat.GUI，不仅可以与工程师共享屏幕状态的确认,也可以跟产品和UI或者测试共享屏幕状态的确认

可以仅凭设计无法想法的交互式表达图像

安装 npm install --save dat.gui <script src="http://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></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