UI控件dat.GUI的使用

原文地址:https://workshop.chromeexperiments.com/examples/gui/(可能需翻墙)。

dat.gui是一个用于JavaScript的轻量级控件库。

1.基本用法

只需要使用少量代码,dat.GUI就可以创建一个用户界面。

<script type="text/javascript" src="dat.gui.js"></script>
<script type="text/javascript">

	var FizzyText = function () {
		this.message = 'dat.gui';
		this.speed = 0.8;
		this.displayOutline = false;
		this.explode = function () { ... };
		// Define render logic ...
	};

	window.onload = function () {
		var text = new FizzyText();
		var gui = new dat.GUI();
		gui.add(text, 'message');
		gui.add(text, 'speed', -5, 5);
		gui.add(text, 'displayOutline');
		gui.add(text, 'explode');
	};

</script>

注意:水平有限,不知道示例的代码是如何实现的,要看到本例以及其他9个例子的动态效果请至原地址查看。下面是效果的截图:

截图

2.约束输入内容

你可以对输入的数值进行一些限制。若一个数值被设置了min或max值,则成为一个滑动条。

gui.add(text, 'noiseStrength').step(5); // Increment amount
gui.add(text, 'growthSpeed', -5, 5); // Min and max
gui.add(text, 'maxSize').min(0).step(0.25); // Mix and match

你也可以从下拉菜单中选择数值和字符串。

// Choose from accepted values
gui.add(text, 'message', [ 'pizza', 'chrome', 'hooray' ] );

// Choose from named values
gui.add(text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );

3.文件夹

你可以将任意数量的控件归为一组,用户界面会表示为一个折叠的文件夹。

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.颜色控件

dat.GUI包含一个颜色选择器,这个选择器可以识别不同的颜色表示,下面的代码展示了使用不同颜色格式的颜色选择器控件。

var FizzyText = function() {

  this.color0 = "#ffae23"; // CSS字符串格式
  this.color1 = [ 0, 128, 255 ]; // RGB数组格式
  this.color2 = [ 0, 128, 255, 0.3 ]; // 包含alpha值的RGB数组格式
  this.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value

  // Define render logic ...

};

window.onload = function() {

  var text = new FizzyText();
  var gui = new dat.GUI();

  gui.addColor(text, 'color0');
  gui.addColor(text, 'color1');
  gui.addColor(text, 'color2');
  gui.addColor(text, 'color3');

};

dat.GUI会根据颜色初始的格式设置对应的值。

5.保存菜单设置

通过调用gui.remember方法可以在GUI界面上添加一个保存菜单,这样就可以保存菜单上的所有对象。

var fizzyText = new FizzyText();
var gui = new dat.GUI();

gui.remember(fizzyText);

// Add controllers ...

点击图标可以改变保存的设置,你可以将这些值保存到localStorage,也可以使用下面的代码将将一个JSON对象复制到源代码中:

var fizzyText = new FizzyText();
var gui = new dat.GUI({ load: JSON });

gui.remember(fizzyText);

// Add controllers ...

6.预设值

你可以将所有设置保存起来作为预设值。点击Save按钮可以修改当前的预设值,点击New按键可以创建一个新的预设值,点击Revert按钮会清除所有未经保存的更改。

使用下来菜单可以切换不同的预设值。以下代码可以设置默认的预设值:

var gui = new dat.GUI({
  load: JSON,
  preset: 'Flow'
});

使用localStorage要当心:最好能经常将保存的JSON数据粘贴到你的源码中。使用localStorage保存你的预设值非常方便且快捷,但它也很容易丢失,丢失的现象常常发生在以下场景中:清空浏览器数据,换用浏览器,甚至在修改当前网页的URL时也有可能发生。

7.事件

你可以通过一个事件监听器监听控件引发的事件。

var controller = gui.add(fizzyText, 'maxSize', 0, 10);

controller.onChange(function(value) {
  // Fires on every change, drag, keypress, etc.
});

controller.onFinishChange(function(value) {
  // Fires when a controller loses focus.
  alert("The new value is " + value);
});

8. 自定义面板放置位置

默认情况下,dat.GUI面板使用的是固定位置,并自动添加到创建时的DOM元素。

将参数autoPlace设置为false,你就可以改变默认的设置。

var gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);

9. 自动更新显示

在控件上使用listen方法可以让它接收来自外界的变化。

var fizzyText = new FizzyText();
var gui = new dat.GUI();

gui.add(fizzyText, 'noiseStrength', 0, 100).listen();

var update = function() {
  requestAnimationFrame(update);
  fizzyText.noiseStrength = Math.random();
};
update();

由于每一帧都会修改对应的属性,因此往往会比较慢。

10.手动更新显示

如果你想手动控制控件的更新,可使用updateDisplay方法。

var fizzyText = new FizzyText();
var gui = new dat.GUI();

gui.add(fizzyText, 'noiseStrength', 0, 100);

var update = function() {

  requestAnimationFrame(update);
  fizzyText.noiseStrength = Math.cos(Date.getTime());

  // Iterate over all controllers
  for (var i in gui.__controllers) {
    gui.__controllers[i].updateDisplay();
  }

};

update();

示例

 

js代码

var canvas, ctx, w, h;
var x = 0, y = 0, width = 50, height = 50, fillColor = "#ff0000", 
	strokeColor = "#ffae23", shapeType = "椭圆", showBorder = true;
init();
requestAnimationFrame(animate);

function init() {
	// 初始化canvas
	canvas = document.getElementById("canvas");
	w = canvas.width;
	h = canvas.height;
	ctx = canvas.getContext("2d");
	ctx.lineWidth = 8;

	var obj = {
		message: '使用例子',
		显示边框: true,
		图形: '椭圆',
		x坐标: x,
		y坐标: y,
		宽: width,
		高: height,
		绘制信息: function () {
			if (shapeType == "椭圆")
				alert("你在坐标(" + x + "," + y + ")绘制了一个长轴为" + 
	width + "、短轴为" + height + "的" + shapeType);
			else if (shapeType == "矩形")
				alert("你在坐标(" + x + "," + y + ")绘制了一个宽为" + 
	width + "、高为" + height + "的" + shapeType);
		},
		边框颜色: "#ffae23", // CSS string
		填充颜色: "#ff0000"
	};
	var gui = new dat.GUI({ autoPlace: false });
	var customContainer = document.getElementById('my-gui-container');
	customContainer.appendChild(gui.domElement);

	gui.add(obj, 'message');
	gui.add(obj, '绘制信息');
	gui.add(obj, '显示边框').onChange(function (e) {
		showBorder = e;
	});
	gui.add(obj, 'x坐标').min(-200).max(200).step(5).onChange(function (e) {
		x = e;
	});
	gui.add(obj, 'y坐标').min(-200).max(200).step(5).onChange(function (e) {
		y = e;
	});
	gui.add(obj, '宽').min(20).max(100).step(5).onChange(function (e) {
		width = e;
	});
	gui.add(obj, '高').min(20).max(100).step(5).onChange(function (e) {
		height = e;
	});
	gui.add(obj, '图形', ['椭圆', '矩形']).onChange(function (e) {
		shapeType = e;
	});
	var f1 = gui.addFolder('颜色');
	f1.addColor(obj, '边框颜色').onChange(function (e) {
		strokeColor = e;
	});
	f1.addColor(obj, '填充颜色').onChange(function (e) {
		fillColor = e;
	});
}

function drawShape() {

	ctx.save();

	ctx.fillStyle = fillColor;
	if (showBorder) {
		ctx.strokeStyle = strokeColor;
		ctx.stroke();
	}

	if (shapeType == "矩形") {
		// 清空画圆可能带来的线条
		ctx.beginPath();
		ctx.closePath();

		ctx.fillRect(x - width / 2, y - height / 2, width, height);

		if (showBorder)
			ctx.strokeRect(x - width / 2, y - height / 2, width, height);
	}
	else if (shapeType == "椭圆") {
		ctx.translate(x, y);

		ctx.scale(width, height);
		ctx.beginPath();
		ctx.arc(0, 0, 1, 0, Math.PI * 2, true);
		ctx.closePath();
		ctx.fill();
	}
	ctx.restore();
}

function render() {
	ctx.clearRect(0, 0, w, h);
	ctx.save();
	ctx.translate(w / 2, h / 2);
	ctx.scale(1, -1);
	drawShape();
	ctx.restore();
}

function animate(time) {
	requestAnimationFrame(animate);

	render();
}
文件下载(已下载 1606 次)

发布时间:2017/6/19 下午12:10:03  阅读次数:5672

2006 - 2024,推荐分辨率 1024*768 以上,推荐浏览器 Chrome、Edge 等现代浏览器,截止 2021 年 12 月 5 日的访问次数:1872 万 9823 站长邮箱

沪 ICP 备 18037240 号-1

沪公网安备 31011002002865 号