仓库源文，站点原文

layout: post title: KineticJS教程6：对象的移动及其上下层关系 categories:

科 tags:
编程
js

2015-06-11 08:27:22

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

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

<pre class="line-numbers" data-start="0"><code class="language-javascript"># Language: js <script> shape.moveTo(layer); </script> </code></pre>

11. 对象的上下关系

11.1. 层的上下关系

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

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

<pre class="line-numbers" data-start="0"><code class="language-javascript"># Language: js <script> //移动到最上层 layer.moveToTop(); //移动到最下层 layer.moveToBottom(); //向上移动一层 layer.moveUp(); //向下移动一层 layer.moveDown(); //设定层的ZIndex值 layer.setZIndex(5); </script> </code></pre>

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

<pre class="line-numbers" data-start="0"><code class="language-javascript"># 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> </code></pre>

11.2. 图形对象的上下关系

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

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

<pre class="line-numbers" data-start="0"><code class="language-javascript"># Language: js <script> //移动到最上层 shape.moveToTop(); //移动到最下层 shape.moveToBottom(); //向上移动一层 shape.moveUp(); //向下移动一层 shape.moveDown(); //设定层的ZIndex值 shape.setZIndex(5); </script> </code></pre>

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

<pre class="line-numbers" data-start="0"><code class="language-javascript"># 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> </code></pre>