前言
有时候学习api其实我们可以从源码的角度学习,因为有时候很多文档写的太不清楚了,自己都是慢慢去试,去猜,去实现其实也是挺浪费时间的,面对未知的一脸蒙蔽,偶尔烦躁,其实需要的是自己静下心来慢慢研究,收获离你不远
介绍
- 与javascript一起使用的参数调用库
- 顾名思义,GUI(图形用户界面)可以创建一个表单屏幕,您可以在其中通过加载此库并设置参数来简单地输入滑块和数值
- 根据参数值得更改合并处理直接更改画面
好处
让操作DOM更容易
设置后,您无需执行手动操作
通过设置,不仅可以与工程师共享屏幕状态的确认,也可以跟产品和UI或者测试共享屏幕状态的确认
可以仅凭设计无法想法的交互式表达图像
安装
npm install --save
<script src=""></script>
使用
const dat = require('');
// ES6:
import * as dat from '';
const gui = new ();
api文档
https://github.com/dataarts//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 ''
const box = ('#box');
class Choid {
constructor() {
= 0;
= 0;
= 0;
}
setup() {
box.style.background = `rgb(${},${},${})`;
}
}
const params = new Choid();
const gui = new ();
['R','G','B'].forEach(val=>(params,val).min(0).max(255).step(.1).onChange(()=>{
();
}))
</script>
拖动的时候,随着数值的变化页面也会发现对应的变化
new GUI([params])
var gui = new ({name: 'My GUI'});
name的作用
// 创建一个GUI ,添加一个子盒子
var gui = new ();
var folder1 = Folder('Flow Field');
Param | Type | Default | Description |
---|---|---|---|
[params] | Object | ||
[] | String | 此GUI的名称 | |
[] | Object | 放在预设的实例 | |
[] | .GUI | ||
[] | Boolean | true | 如果为false,就是不实用默认定位方式 |
[] | Boolean | true | 如果为true,则通过按键h 显示/隐藏GUI |
[] | Boolean | false | 如果为true,则开始折叠 |
[] | Boolean | false | 如果为true,则关闭/打开按钮显示在GUI的顶部,也就是说默认情况下,打开的按钮在顶部,关闭的时候按钮在底下 |
例如
const gui = new ({name:'aaa',hideable:false,closed:true,closeOnTop:false});
例如autoPlace的使用方式,我们需要把他添加到我们需要放置的位置
const gui = new ({autoPlace:false});
// 添加id
.id = 'ccc';
// 在你需要添加的dom,把它放在里面
()
拿到最外层的DOM
然后,我们只需要修改css就可以了
#ccc{
position: absolute;
top:50%;
left:50%;
}
设置默认模式,感觉这个不常用
const obj = {
message: 'Hello World',
explode: function () {
alert('Bang!');
},
};
var gui = new ();
(obj);
(obj, 'message');
(obj, 'explode');
Folder(string)
创建一个子盒子实例
(文件夹)
删除一个子盒子实例
// 添加一个子盒子
let one=Folder('nameOne')
(options,'color1')
// 删除一个子盒子
(one)
拿到父级的实例
let obj={
child:1
}
const gui = new ();
// 创建一个子孩子
const folder=Folder('nameOne')
(obj,'child',-1,1,);
//拿到父级的GUI实例
();
//拿到对应的文件夹名称
();
保存的标识符,可以展示默认显示哪组
const Options = function() {
this.number = 1;
};
window.onload = function() {
const options = new Options();
const gui = new ({
load:{
"preset": "kkkkks",// 默认展示kkkks选项
"closed": false,
"remembered": {
"Default": {
"0": {
"number": 4
}
},
"kkkkk": {
"0": {
"number": 6
}
},
"kkkkks": {
"0": {
"number": 8
}
}
},
}
});
// 标记保存的对象,但是不修改预设的值
(options);
(options, 'number').min(0).max(10).step(1);
};
(object,prop,[min],[max],[step])
添加控制器
对象object,属性string,最小值number,最大值numer,步长number
.min()
.max()
.step()
Color(对象,属性)
颜色控制器添加到GUI
var palette = {
color1: '#FF0000', // CSS string
color2: [ 0, 128, 255 ], // RGB array
color3: [ 0, 128, 255, ], // RGB with alpha
color4: { h: 350, s: 0.9, v: } // Hue, saturation, value
};
Color(palette, 'color1');
Color(palette, 'color2');
Color(palette, 'color3');
Color(palette, 'color4');
(控制器)
删除控制器
// 定义标记的控制器
let color3= Color(options,'color3')
// 删除对应的控制器
(color3);
()
从文档中删除根GUI
()
折叠,展开,隐藏,显示
// 折叠
();
// 展开
();
// 隐藏
();
// 显示
();
()
拿到最顶层的实例,我再把他折叠了
().close()
()
一个JSON对象,表示此GUI的当前状态及其属性
单选
const options = {
fale:true
};
按钮
const options={
randomw(){
alert(333)
}
}
下拉框
(object, key, array/object );
const options = {
color5:'xxxx',
speed:40,
types:'two'
};
const gui = new ();
(options, 'color5');
(options,'types',['one','two','three']) // 第一种
(options,'speed',{slow:1,fast:40}) // 第二种
controller
let one = Folder('nameOne')
(options, 'color1')
let two = ('nameTwo');
(options, 'color1')
();
// nameOne
();
// 拿到当前控制器的dom
// 这个应该是监听值得更改进行更新,进行更新
(two)
// 删除对应的控制器
let two = ('nameTwo');
let three = (options, 'color1')
(three)
.object =>object .property=>string
const Options = {
number: 1,
color5: 'xxxx'
};
const options = Options;
const gui = new ();
(options, 'color5');
let controll= (options, 'number')
(); // number
();// {number: 1, color5: "xxxx"}
onChange 改成值时触发
只要通过此控制器修改值,就会调用此函数
let three = (options, 'color1')
(val=>{
(val);
})
onFinishChange(fn)
去掉焦点的时候触发,对数字或者字符串有效
const Options = function () {
this.number = 1;
this.color5 = 'xxxx';
};
(options, 'number').min(0).max(10).step(1).onFinishChange(val=>{
(val);
});
(options, 'color5').onFinishChange(val=>{
(val);
})
getValue() setValue(newValue)
查询设置值
const one=(options, 'color5');
('333')
(());//333
controller.updateDisPlay()
刷新此控制器的视图显示,以便与对象的当前值保持同步
const options = {
color5: 'xxxx',
speed: 40,
types: 'two'
};
const gui = new ();
let num = (options, 'speed', 10, 20, .1);
options.speed=12
// 比如直接修改对象,然后更新
()
() => Boolean
如果值偏移初始值则返回true
const options = {
color5: 'xxxx',
speed: 40,
types: 'two'
};
const gui = new ();
let one = (options, 'types', ['one', 'two', 'three'])
(val=>{
// 我们发现当不等于two 则返回true
(());
})