KineticJS教程（11）

作者: ysm

11.对象的上下关系

11.1.层的上下关系

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

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

<script>

//移动到最上层

layer.moveToTop();

//移动到最下层

layer.moveToBottom();

//向上移动一层

layer.moveUp();

//向下移动一层

layer.moveDown();

//设定层的ZIndex值

layer.setZIndex(5);

</script>

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

<!DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8″>

<title>KineticJS</title>

<script src=“../kinetic.js”></script>

</head>

<body>

<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>

<div id=“container”></div>

</body>

</html>

11.2.图形对象的上下关系

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

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

<script>

//移动到最上层

shape.moveToTop();

//移动到最下层

shape.moveToBottom();

//向上移动一层

shape.moveUp();

//向下移动一层

shape.moveDown();

//设定层的ZIndex值

shape.setZIndex(5);

</script>

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

<!DOCTYPE html>

<html>

<head>

<meta charset=“UTF-8″>

<title>KineticJS</title>

<script src=“../kinetic.js”></script>

</head>

<body>

<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>

<div id=“container”></div>

</body>

</html>

KineticJS教程（11）的更多相关文章

  1. KineticJS教程（5）

    KineticJS教程(5) 作者: ysm  5.事件响应 5.1.图形的事件响应 图形对象对事件的响应处理可以使用 on() 方法绑定事件类型和相应方法. On() 方法需要一个事件类型参数和相应 ...

  2. node-webkit教程(11)Platform Service之shell

    node-webkit教程(11)Platform Service之shell 文/玄魂 目录 node-webkit教程(10)Platform Service之shell 前言 11.1  She ...

  3. 【译】ASP.NET MVC 5 教程 - 11：Details 和 Delete 方法详解

    原文:[译]ASP.NET MVC 5 教程 - 11:Details 和 Delete 方法详解 在教程的这一部分,我们将研究一下自动生成的 Details 和Delete 方法. Details ...

  4. KineticJS教程（12）

    KineticJS教程(12) 作者: ysm  12.舞台 12.1.舞台的大小 舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度. <scr ...

  5. KineticJS教程（10）

    KineticJS教程(10) 作者: ysm  10.在容器之间移动图形对象 Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里,这个容器指 ...

  6. KineticJS教程（9）

    KineticJS教程(9) 作者: ysm  9.选择器 Kinetic在舞台.层和组对象上都提供了get方法,用于返回这三者中包含的对象. 9.1.根据ID获取对象 要用id获取对象,首先要给对象 ...

  7. KineticJS教程（8）

    KineticJS教程(8) 作者: ysm  8.动画 动画就是一帧帧的画面按照时间间隔显示出来,Kinetic给我们提供了一个舞台对象的onFrame方法,用这个方法可以绑定一个动画方法,我们要显 ...

  8. KineticJS教程（7）

    KineticJS教程(7) 作者: ysm 7.图形变换 7.1.线性变化 Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换,也就是从原始的状态线性变 ...

  9. KineticJS教程（6）

    KineticJS教程(6) 作者: ysm 6.拖拽 6.1.拖拽功能 要实现Kinetic对象的拖拽功能很简单,只需要将图形对象的draggable属性设为true就可以了. <script ...

随机推荐

  1. thunk 函数

    function* f() { console.log(1); for (var i = 0; true; i++) { console.log('come in'); var reset = yie ...

  2. [BZOJ4028][HEOI2015]公约数数列(分块)

    先发掘性质: 1.xor和gcd均满足交换律与结合率. 2.前缀gcd最多只有O(log)个. 但并没有什么数据结构能同时利用这两个性质,结合Q=10000,考虑分块. 对每块记录这几个信息: 1.块 ...

  3. CodeForces - 1017C The Phone Number

    题面在这里! 一开始有一种构造猜想,可以把答案降到 sqrt(N) 级别. 考虑把 {1,2,...,n} 分成 sqrt(N) 段,每一段是连续的sqrt(N)个数.然后我们倒着把每一段数放上. 比 ...

  4. [ARC055D]隠された等差数列

    题意:对一个等差数列$a_i=A+Bi(0\leq i\leq n-1)$和非负整数$x$,把$a_i$的$10^x$位拿出来可以写成一个字符集为$0\cdots9$的字符串,现在给定这个字符串$d_ ...

  5. [ZJOI2007]最大半连通子图

    [ZJOI2007]最大半连通子图 题目大意: 一个有向图称为半连通的,当且仅当对于任意两点\(u,v\),都满足\(u\)能到达\(v\)或者\(v\)能到达\(u\). 给定一个\(n(n\le1 ...

  6. 对Java Serializable（序列化）的理解和总结（一）

    导读:最近在做项目的过程中,发现一个问题,就是我们最开始的时候,传递参数包括返回类型,都有map类型.但是由于map每次都要匹配key值,很麻烦.所以在之后就将参数传递和返回类型全都改成了实体bean ...

  7. Unity ScriptObject创建Asset文件

    创建ScriptObject可以创建带序列化的资源,只保存数据不用绑定在游戏对象上.创建出来的本子资源可以通过资源加载到游戏里使用.这里介绍一下使用Resources加载. 创建好的asset文件也可 ...

  8. TortoiseSVN 修改密码

    在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么以后就不用每次都输入一遍用户名密码了. 不过,如果 ...

  9. Registering DLL and ActiveX controls from code

    http://delphi.about.com/od/windowsshellapi/l/aa040803a.htm How to register (and unregister) OLE cont ...

  10. Spring JavaConfig实例

    从Spring 3起,JavaConfig功能已经包含在Spring核心模块,它允许开发者将bean定义和在Spring配置XML文件到Java类中. 但是,仍然允许使用经典的XML方式来定义bean ...