KineticJS教程6：对象的移动及其上下层关系

2015-06-11 08:27:22

10. 在容器之间移动图形对象

Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里, 这个容器指的可以是另一个舞台(Stage), 一个层(Layer)或是一个组(Group). 另外也可以把一个组(Group)移动到另一个组中或者层里, 也可以把图形从一个组移动到另一个层里.

# Language: js
<script>
	shape.moveTo(layer);
</script>

11. 对象的上下关系

11.1. 层的上下关系

Kinetic的层是按照添加到舞台的次序, 由下向上排列, 上层遮盖下层的图形. 每个层各自有一个ZIndex编号来表示在层级中的上下位置, 编号从0开始, 表示最底层, 向上层依次增1.

Kinetic提供了几个方法用于调整层的上下层位置, 包括:

# Language: js
<script>
	//移动到最上层
	layer.moveToTop();

	//移动到最下层
	layer.moveToBottom();

	//向上移动一层
	layer.moveUp();

	//向下移动一层
	layer.moveDown();

	//设定层的ZIndex值
	layer.setZIndex(5);
</script>

如下代码通过点击某层上的圆将圆所在的层调整至最上层:

# Language: js
<script>
	window.onload = function() {
		var stage = new Kinetic.Stage({
			container: "container",
			width: 600,
			height: 400
		});

		var layer1 = new Kinetic.Layer();
		var layer2 = new Kinetic.Layer();
		var layer3 = new Kinetic.Layer();

		var config1 = {
			x: 200,
			y: 200,
			radius: 100,
			height: 100,
			fill: "red",
			stroke: "black",
			strokeWidth: 4
		};
		var circle1 = new Kinetic.Circle(config1);

		var config2 = {
			x: 250,
			y: 200,
			radius: 100,
			height: 100,
			fill: "green",
			stroke: "black",
			strokeWidth: 4
		};
		var circle2 = new Kinetic.Circle(config2);

		var config3 = {
			x: 300,
			y: 200,
			radius: 100,
			height: 100,
			fill: "blue",
			stroke: "black",
			strokeWidth: 4
		};
		var circle3 = new Kinetic.Circle(config3);

		layer1.add(circle1);
		layer2.add(circle2);
		layer3.add(circle3);

		layer1.on("click", function() {
			alert("from Z index:" + this.getZIndex());
			//将本层移动至最上层
			this.moveToTop();
			alert("to Z index:" + this.getZIndex());
		});

		layer2.on("click", function() {
			alert("from Z index:" + this.getZIndex());
			//将本层移动至最上层
			this.moveToTop();
			alert("to Z index:" + this.getZIndex());
		});

		layer3.on("click", function() {
			alert("from Z index:" + this.getZIndex());
			//将本层移动至最上层
			this.moveToTop();
			alert("to Z index:" + this.getZIndex());
		});

		//将层添加到舞台中
		stage.add(layer1);
		stage.add(layer2);
		stage.add(layer3);
	};
</script>

11.2. 图形对象的上下关系

在某一层中的各图形对象也有类似于层之间的上下层叠关系, 由下向上排列, 上层图形对象遮盖下层的图形对象. 每个图形对象各自有一个ZIndex编号来表示在层级中的上下位置, 编号从0开始, 表示最底层, 向上层依次增1.

Kinetic提供了几个方法用于调整图形对象的上下层位置, 包括:

# Language: js
<script>
	//移动到最上层
	shape.moveToTop();

	//移动到最下层
	shape.moveToBottom();

	//向上移动一层
	shape.moveUp();

	//向下移动一层
	shape.moveDown();

	//设定层的ZIndex值
	shape.setZIndex(5);
</script>

如下代码通过点击圆将所点击的圆调整至其所在层中各圆的最上层:

# Language: js
<script>
	window.onload = function() {
		var stage = new Kinetic.Stage({
			container: "container",
			width: 600,
			height: 400
		});
		var layer = new Kinetic.Layer();

		var config1 = {
			x: 200,
			y: 200,
			radius: 100,
			height: 100,
			fill: "red",
			stroke: "black",
			strokeWidth: 4
		};
		var circle1 = new Kinetic.Circle(config1);

		circle1.on("click", function() {
			alert("from Z index:" + this.getZIndex());

			//将本对象移动到本层所有对象中的最上面
			this.moveToTop();

			//重绘对象所在本层
			layer.draw();
			alert("to Z index:" + this.getZIndex());
		});

		var config2 = {
			x: 250,
			y: 200,
			radius: 100,
			height: 100,
			fill: "green",
			stroke: "black",
			strokeWidth: 4
		};
		var circle2 = new Kinetic.Circle(config2);

		circle2.on("click", function() {
			alert("from Z index:" + this.getZIndex());

			//将本对象移动到本层所有对象中的最上面
			this.moveToTop();

			//重绘对象所在本层
			layer.draw();
			alert("to Z index:" + this.getZIndex());
		});

		var config3 = {
			x: 300,
			y: 200,
			radius: 100,
			height: 100,
			fill: "blue",
			stroke: "black",
			strokeWidth: 4
		};
		var circle3 = new Kinetic.Circle(config3);

		circle3.on("click", function() {
			alert("from Z index:" + this.getZIndex());

			//将本对象移动到本层所有对象中的最上面
			this.moveToTop();

			//重绘对象所在本层
			layer.draw();
			alert("to Z index:" + this.getZIndex());
		});

		layer.add(circle1);
		layer.add(circle2);
		layer.add(circle3);

		//将层添加到舞台中
		stage.add(layer);
	};
</script>