html5 dat.gui,Dat.gui 使用教程
Dat.gui 使用教程:Dat.gui 是一个 GUI 组件,他可以为你的 demo 提供参数的设置。并且很容易上手。
基础用法
引入js 文件
初始化配置
var Options = function() {
this.message = 'dat.gui';
this.speed = 0.8;
this.displayOutline = false;
this.button = function() {};
};
window.onload = function() {
var options = new Options();
var gui = new dat.GUI();
gui.add(options, 'message');
gui.add(options, 'speed', -5, 5);
gui.add(options, 'displayOutline');
gui.add(options, 'button');
};
这里,在你的配置项:FizzyText 里,GUI 会根据你设置的属性类型来渲染不同的控件
如果是Number 类型则用 slider来控制
如果是 Boolean 类型,则用 Checkbox来控制
如果是 Function 类型则用 button 来控制
如果是 String 类型则用 input 来控制
控制输入限制
控制限制输入项输入类型以及值
gui.add(text, 'noiseStrength').step(5); // 增长的步长
gui.add(text, 'growthSpeed', -5, 5); // 最大、最小值
gui.add(text, 'maxSize').min(0).step(0.25); // 最大值和步长
// 文本输入项
gui.add(text, 'message', [ 'pizza', 'chrome', 'hooray' ] );
// 下拉框形式选择文案
gui.add(text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
选项组
可以使用文件夹给选项分组
var gui = new dat.GUI();
var f1 = gui.addFolder('Flow Field');
f1.add(text, 'speed');
f1.add(text, 'noiseStrength');
var f2 = gui.addFolder('Letters');
f2.add(text, 'growthSpeed');
f2.add(text, 'maxSize');
f2.add(text, 'message');
f2.open();
颜色值的输入
提供4种类型颜色输入控制
CSS
RGB
RGBA
Hue
var Options = function() {
this.color0 = "#ffae23"; // CSS string
this.color1 = [ 0, 128, 255 ]; // RGB array
this.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
this.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value
};
window.onload = function() {
var options = new Options();
var gui = new dat.GUI();
gui.addColor(options, 'color0');
gui.addColor(options, 'color1');
gui.addColor(options, 'color2');
gui.addColor(options, 'color3');
};
存储
可以使用 remember 方法开启 GUI 的存储模式,而且可以分组存储
var Options = function() {
this.color0 = "#ffae23"; // CSS string
};
window.onload = function() {
var options = new Options();
var gui = new dat.GUI();
gui.remember(options);
gui.addColor(options, 'color0');
};
当然你也可以把之前保存的数据在初始化时导入
var Options = function() {
this.number = 1;
};
window.onload = function() {
var options = new Options();
var gui = new dat.GUI({
load:{
"preset": "kkkkk",
"closed": false,
"remembered": {
"Default": {
"0": {
"number": 4
}
},
"kkkkk": {
"0": {
"number": 6
}
}
},
"folders": {}
}
});
gui.remember(options);
gui.add(options, 'number').min(0).max(10).step(1);
};
可以通过 preset 配置项指定使用哪个分组的配置
事件
你可以为每一项设置一个监听事件 onChange 和 onFinishChange
var Options = function() {
this.number = 1;
};
window.onload = function() {
var options = new Options();
var gui = new dat.GUI();
var controller = gui.add(options, 'number').min(0).max(10).step(1);
controller.onChange(function(value) {
console.log("onChange:" + value)
});
controller.onFinishChange(function(value) {
console.log("onFinishChange" + value)
});
};
获取面板DOM对象
可以通过 gui.domElement 获取原生 dom 对象
从GUI外部控制配置项
如果你想从外部控制选项,你可以为选项调用 listen 方法,则你改变option时,也会同步到面板里
var Options = function() {
this.number = 1;
};
window.onload = function() {
var options = new Options();
var gui = new dat.GUI();
var controller = gui.add(options, 'number').min(0).max(10).step(1).listen();
setInterval(function() {
options.number = Math.random() * 10;
}, 500)
};
dat.gui stats.js 通用参数配置及图像统计工具
在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...
图解Windows下 GIT GUI 使用教程
https://jingyan.baidu.com/article/19020a0a7ae6af529c284248.html 本篇经验将和大家介绍Windows下 GIT GUI 使用教程,希望对大 ...
three.js - 动画 图形统计帧频 dat.GUI
运行一把: 代码解释:
dat.gui.js
].appendChild(b)},inject:function(e,a){a=a||document;].appendChild(b)}}}(); dat.utils.common=functio ...
dat.gui 上手
dat.gui是款神器产品.一个调试利器.但是用起来很简单很简单 1:引用dat.gui.js. 2:实例化 this.gui = new dat.GUI(); 3:创建可设置一个数据对象.例如v ...
GIT GUI简易教程
GIT GUI简易教程 前言 之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点多,而且还是会给我带来很多多余且重复的操作负担,所以我希望能压缩一下它在我工作中 ...
dat.GUI 打造可视化工具(一)
前言 有时候学习api其实我们可以从源码的角度学习,因为有时候很多文档写的太不清楚了,自己都是慢慢去试,去猜,去实现其实也是挺浪费时间的,面对未知的一脸蒙蔽,偶尔烦躁,其实需要的是自己静下心来慢慢研究 ...
unity3d插件Daikon Forge GUI 中文教程1-Daikon Forge介绍
DF-GUI特点: · 深编辑器集成:DF-GUI提供广泛的整合与Unity3D编辑环境,包括自定义检查人员对每个组件向导来简化复杂的多步任务,提高生产力的上下文菜单,编辑控件在一个所见 ...
随机推荐
一台linux真实机实现多台Tomcat服务
一.事前准备 ü 确保linux并未安装tomcat (这里虚拟机测试) ü 下载jdk与tomcat ① jdk-6u18-ea-bin-b01-linux-i586-20_aug_2009.bin ...
DB天气app冲刺第十天
好了 这是第十天了,按照白板任务上的来说的话,今天没有完成,所以等一下还要继续看看今天能不能把他做完,今天出的问题在于我又自己调整了一下UI设计,因为发现以前的设计发面有重复,浪费了屏幕.所以还不如省 ...
ARCGIS10如何修改图例的大小
设置好图例的样式,然后转换成图形,接着ungroup,全部打散,就可以对每一个图形包括文字进行大小和格式的编辑
java rest版简单的webservice
目前的webservice风格,rest应该是其中一种 还有种就是soap,rest是轻量级的,越来越流行.下面举一个简单例子说明下rest的用法. 1. 准备ws的jar和spring的jar,如何 ...
从C++到Qt(命令行编译,讲解原理)
Qt 是 C++ 的库,Qt 在 ansi C++ 的基础上进行了一点扩展. 但国内似乎比较浮躁,学Qt的很多连基本的C++如何编译似乎都不太清楚.本文舍弃IDE或qmake.cmake等工具的束缚, ...
用Visual C++设计“精灵”窗体
随着Microsoft凭借Windows在操作系统上取得的巨大成绩,Windows用户界面也日益成为业界标准.统一的界面给广大用户对应用软件的学习与使用带来了很大方便.但每天都面对同一副面孔,日久天长 ...
Flask开发微电影网站(七)
1.后台管理之电影管理 1.1 定义电影表单 在app的admin目录的forms.py文件中,定义电影表单 # 电影表单 class MovieForm(FlaskForm): title = St ...
使用zabbix监控mariadb性能状态
0x01 前言 zabbix内置Mysql的监控模版,因为mariadb和Mysql两者的相关性,所以这个模版也能用在mariadb services上. 0x02 Mysql 首先要在mariadb ...
《精通Oracle SQL(第2版) 》
基本信息 作者: (美)Karen Morton Kerry Osborne Robyn Sands Riyaj Shamsud ...
html5 dat.gui,Dat.gui 使用教程相关推荐
- MATLAB美图秀秀系统GUI设计[完美运行,GUI界面,详细教程,万字文稿]
课题名称 基于MATLAB的美图秀秀系统GUI设计 GUI框架链接:matlab美图秀秀[GUI,磨皮,白平衡,特效].zip_matlabGUI制作美图秀秀界面-专业指导文档类资源-CSDN下载 课 ...
- Web开发:HTML5、CSS、JavaScript必备教程
2019独角兽企业重金招聘Python工程师标准>>> Web开发:HTML5.CSS.JavaScript必备教程 想开启Web开发的智慧之门吗?想DIY炫酷的网页特效设计吗?想通 ...
- MAT之GUI:GUI的方式创建/训练/仿真/预测神经网络
MAT之GUI:GUI的方式创建/训练/仿真/预测神经网络 目录 操作步骤 (0).打开 (1).导入数据 (2)创建模型network_Jason_niu (3)设置参数并训练 (4)仿真预测 操作 ...
- Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- Win95下的注册表文件(User.dat,System.dat)文件格式说明 (转)
Win95下的注册表文件(User.dat,System.dat)文件格式说明 (转)[@more@] windows registry files agreement: ========== the ...
- Matlab GUI与GUI间数据传递实现
Matlab GUI与GUI间数据传递实现 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.ne ...
- 跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程 编辑 锁定 讨论 上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
- html5 简单图片效果,【HTML5】Canvas绘制简单图片教程,
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawIm ...
- java gui容器_[Java教程]GUI Panel 容器以及布局管理器
[Java教程]GUI Panel 容器以及布局管理器 0 2016-11-09 07:04:32 一.Panel是AWT中的另一个典型的容器,它代表不能独立存在.必须放在其他容器中使用. 1.可作为 ...
- python tkinter_Python编程GUI库之tkinter教程——Label篇
首先需要介绍一下什么是tkinter? tkinter是Python编程语言内置的标准GUI库,也就是程序员可以使用Tkinter类库快速而且方便的创建出GUI应用程序. 那么有同学可能就问了什么是G ...
最新文章
- 2012 RDS Remote App 对于win7的支持问题
- 九、非主体机构元素——header元素、footer元素、address元素、网页编排
- 终端多窗口管理旗舰------screen
- oracle中国授权机构查询,oracle授权查询
- 音视频技术开发周刊 | 185
- 空值为0非空为1_万达广场4周年,1降到底!0元送万张杂技团门票、人气餐饮6.8折,这波周年庆我先锁为敬...
- php修改mysql数据找不到_php 如何修改mysql数据
- delphi idtcpclient 发送十六进制00_91413足球推荐分析 法甲 04:00 南特 VS 巴黎圣日尔曼...
- python避坑_Django搭建项目实战与避坑细节详解
- Python,入门1
- 《Linux杂记》Window读取 Ext3/Ext4文件系统数据
- python语言基础与应用 mooc答案_Python语言基础与应用_中国大学 MOOC_章节考试选修课答案...
- 火力发电行业三大知识图谱应用场景,助力火力发电厂清洁高效智慧化运营
- 空间点到空间直线的距离求解
- 华为交换机冗余链路(VRRP)和vlan负载均衡
- c语言程序评委评分,c语言编程:歌唱比赛评委评分系统
- Adams隐式4阶方法解常微分方程,fortran实现
- 天桥脑科学研究院推出“对话大脑”院士论坛:国际大咖畅谈脑机接口
- 【油猴脚本】鼠标选中跳转蓝奏云有效链接及自动填写提取码
- 【文献】非牛顿流体调研总结
热门文章
- 什么是交互设计?交互设计师是做什么的?
- 滴滴涨价背后:市值缩水40亿美元,高峰期无人接单?
- 2020年计算机组装行业,组装电脑已成夕阳产业?DIY装机发展的道路在何方?
- 我的物联网大学【第五章】:沉默不会爆发,沉默一定会灭亡!
- FAT16 FAT32 NTFS exFAT ReFS
- IT人员的职业生涯规划
- 可转债数据一览表集思录_可转债交易常用的一些工具与手法 支独秀 股票大作手回忆录 自己常看的可转债数据网站: 集思录:网页链接 富投网:网页链接 可转债新债申购还不是闭着眼睛申... - 雪球...
- Layered Windows分层窗口
- Fingerprint指纹识别学习
- 高精度电压基准电路-TL431实现