java gui怎么刷新当前页面_dat.GUI 打造可视化工具(一) - 房东家的猫

前言

有时候学习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
      (());
    })