dat.gui在Vue里的连接使用，包含实例

前言&＃xff1a;最近项目在整一个绘制栅格颜色的工具&＃xff0c;使用到了dat.gui &＃xff0c;不知道是不是我的搜索方式有问题&＃xff0c;只是看到了API的使用&＃xff0c;在这一点上如何让两个folder之间产生关联 属实是 折磨了我一会。这篇文章会介绍dat.gui 在Vue 下的 最基本 使用&＃xff0c;以及不同folder下的联动。包含增添、删除&＃xff0c;更新数据等。在我默认你有一定前端基础的前提下&＃xff0c;我会尽可能的缩短篇幅。

下载以及引入

npm install dat.gui --save-dev
安装在开发环境中即可。

import dat from &＃39;dat.gui&＃39;


最基础使用

简述一下&＃xff1a;这里的关键在于 生成一个GUI的类&＃xff0c;往这个类里添加Controller&＃xff0c;Controller有4种类型&＃xff0c;一个是数字类型&＃xff0c;一个是字符串类型&＃xff0c;一个是布尔类型&＃xff0c;一个是函数类型。分别会有不同的显示状况。要想使用很简单&＃xff0c;实例化这个GUI&＃xff0c;然后往里面去填充controller即可。

// 在vue 里面 可以这样定义
// data(){ return { person: {name: &＃39;Sam&＃39;} } }
var gui &＃61; new dat.GUI();
gui.add(this.person,&＃39;name&＃39;);


以上代码就可以生成一个在右上角挂着的一个控制器&＃xff0c;形状如&＃xff1a;name [[[[[input框]]]]]。
当然通常如果稍微复杂一点&＃xff0c;有多个属于同一类型的我们最好把他放在一个文件夹&＃xff0c;即folder。

如上图所示&＃xff0c;只需添加一个文件夹的名字即可。所以。

// 在vue 里面 可以这样定义
// data(){ return { person: {name: &＃39;Sam&＃39;} } }
var gui &＃61; new dat.GUI();
let persons &＃61; gui.addFolder(&＃39;很多人&＃39;);
persons.add(this.person,&＃39;name&＃39;);


这样就可以显示一个很多人的目录&＃xff0c;目录下面有一个name为Sam的控制器。

进阶

假如我想要的是上面图的效果。那么首先&＃xff0c;我应该是需要一个可遍历的数组对象。

"legendData": [{"val": -20,"color": [149,137,211]},{"val": -10,"color": [139,206,206]},{"val": 0,"color": [70,134,198]},{"val": 10,"color": [106,144,41]},{"val": 20,"color": [211,173,8]},{"val": 30,"color": [235,94,20]},{"val": 40,"color": [145,46,11]}],


你可以直接把他塞到data里面使用&＃xff0c;接着循环遍历这个列表 绘制 颜色。这里应该会有个疑惑&＃xff0c;为啥color长这样&＃xff0c;跟我在写的项目有关了。

data() {return {colors: {},colorNumObj: {nums: 0,},legendKeyObj: {},startFlag: false,// 图例 数组对象curLegendData: [],// 根据图例生成的rgbArray[ [ ] , [ ] ]curColorsArr: [],viewer: null,// 定时器 idtimer: 3,startTimeStamp: 0,// sortKeylastSortKey: [],}},


根据 数据 处理colors 生成颜色对象

methods: {//这个 函数 就是为了把 key 值 排序 分割成 数组形式。用于得到排序的结果// 而不是直接通过for in 去遍历对象 keySort: function (obj) {let sortKeyStr &＃61; Object.keys(obj).sort((a, b) &＃61;> a - b).join(&＃39;,&＃39;);let sortKeyArr &＃61; sortKeyStr.split(&＃39;,&＃39;);return sortKeyArr;},
}
mounted(){let legendDate &＃61; this.legendDate; //这个在上面已经给出数据了。for (let i &＃61; 0; i < legendDate.length; i&＃43;&＃43;) {console.log(legendDate[i])let str &＃61; legendDate[i].color.join(&＃39;,&＃39;)let value &＃61; legendDate[i].val;this.$set(this.colors, value, &＃96;rgb(${str})&＃96;)}let colorKeyArr &＃61; this.keySort(_C_colors)for (let i &＃61; 0, ii &＃61; colorKeyArr.length; i < ii; i&＃43;&＃43;) {this.$set(this.legendKeyObj,&＃96;第${i &＃43; 1}个颜色数值&＃96;,Number(&＃96;${legendDate[i].val}&＃96;))}// 上面操作 做如下事情// 1、初始化了 this.colors 对象 形状如 { &＃39;20&＃39;: rgb(?,?,?), &＃39;30&＃39;: rgb(?,?,?) }// 2、 初始化了 this.legendKeyObj 对象 形状如 { &＃39;第1个颜色数值&＃39; , 20}}


var gui &＃61; new dat.GUI()
var f &＃61; gui.addFolder(&＃39;颜色调试&＃39;);
var nums &＃61; gui.addFolder(&＃39;颜色数值&＃39;)
let legendKeyObj &＃61; this.legendKeyObj
for (let i in legendKeyObj) {// 先获取 key 的索引 匹配 数字。 为什么这样做&＃xff1f;因为在finishChange里 更新的这个操作已经完成了。// 所以 无法 拿到最开始的key 。 所以需要绕一个圈去进行修改 操作。nums.add(legendKeyObj, i).min(-100).max(1000).step(1).onFinishChange((e) &＃61;> {// e 传进来一个改变后的值// 这个handler 做的 主要就是 同步上面的Colors 的名字的 状态.console.log(i);let key &＃61; Number(i.replace(/[^0-9]/ig,""));// key - 1 得到 索引。 得到索引 之后 读取 sortkey 值 进行修改let __controllers__Index &＃61; key - 1;f.__controllers[__controllers__Index].name(e);})
}
let sortKeyArr &＃61; this.sortKey();
for (let i &＃61; 0, ii &＃61; sortKeyArr.length; i < ii; i&＃43;&＃43;) {//添加颜色 获取这个排序后的值 按序进行添加操作。f.addColor(this.colors, sortKeyArr[i]);
}


以上是 其中的一种联动。即改变某一个文件夹里的值或者某一个控制器的值 让另一个控制器响应。
还有一种联动是对视图的操作。即如何在通过修改了你的引用对象如此文中的this.colors 我后面新增了一个key value&＃xff0c;但是视图没有更新的情况&＃xff1b;或者是删除了一个keyvalue&＃xff0c;视图没有更新的情况。都会分别介绍。

添加

添加同样&＃xff0c;往vue上 具有响应式 还是得 $set&＃xff0c;但除此之外&＃xff0c;如果想响应式地也把dat.gui的视图更新了&＃xff0c;别妄想你set之后就会更新&＃xff0c;你set顶多只是保证你的状态是正确的。你得手动操作&＃xff0c;例如我在某一个控制器的change事件里做如下事情。即可做到响应式地更新。

// 添加属性 与值
this.$set(this.colors, key, rgb?)
//添加到视图
f.addColor(this.colors, key)


删除

// 具体可以打印一下控制器。 remove 某一个控制器
this.$delete(this.colors,key);
f.remove(f.__controllers[someIndex])


总结

这篇文章就结束了&＃xff0c;主要介绍了dat.gui 的使用&＃xff0c;以及联动的方法。一个是视图更新的操作&＃xff0c;一个是控制器里的某个属性被更改 响应另一个控制器。