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. BZOJ3669 NOI2014魔法森林

    按a从小到大排序,然后按b建图. 每次只需要找1~n中最大的b加当前的a计算答案即可. 这里还有一个小操作就是化边为点,把一条边的边权看做一个点的点权然后多连两条边. By:大奕哥 #include& ...

  2. HDU 5651 xiaoxin juju needs help 数学

    xiaoxin juju needs help 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5651 Description As we all k ...

  3. 2015 UESTC 搜索专题K题 秋实大哥の恋爱物语 kmp

    秋实大哥の恋爱物语 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/61 De ...

  4. mybatis源码分析（3）-----SqlSessionHolder作用

    1. sqlSessionHolder 是位于mybatis-spring 包下面,他的作用是对于sqlSession和事务的控制 sqlSessionHolder 继承了spring的Resourc ...

  5. 如何理解Hibernate中的HibernateSessionFactory类

    package com.zz.util; import org.hibernate.HibernateException; import org.hibernate.Session; import o ...

  6. DAC calibrates 4- to 20-mA output current

    Industrial controls make heavy use of 4- to 20-mA current loops to transmit process measurements bec ...

  7. mysql 虚拟列

    http://blog.csdn.net/yueliangdao0608/article/category/351407

  8. iptables学习与研究(使用LOG记录失败日志)

    原文地址: http://blog.csdn.net/fafa211/article/details/2307581 通常情况下,iptables的默认政策为DROP,不匹配的数据包将被直接丢弃.但在 ...

  9. pm2 相关命令

    pm2 相关命令 转载 2017年02月18日 22:59:48   二.安装 Linux Binaries下载地址:https://nodejs.org/dist cd oneinstack/src ...

  10. js：对象的创建（为prototype做铺垫）

    /**  *在js中并不存在类,所以能够直接通过Object来创建对象,可是使用这样的方式创建有一  *弊端:因为没有类的约束,无法实现对象的反复利用,而且没有一种规范约定,在操作时easy带来问题. ...