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. 看雪论坛 破解exe 看雪CTF2017第一题分析-『CrackMe』-看雪安全论坛

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 逆向 黑客 破解 学习 论坛 『CrackMe』 http://bbs.pediy.co ...

  2. [BJOI2017]魔法咒语 --- AC自动机 + 矩阵优化

    bzoj 4860   LOJ2180   洛谷P3175 [BJOI2017]魔法咒语 题目描述: Chandra 是一个魔法天才. 从一岁时接受火之教会洗礼之后,Chandra 就显示出对火元素无 ...

  3. org.json.JSONObject and no properties discovered 错误解决

    自己在搭建SSM框架的时候(Spring + spring mvc + mybatis)报错内容如下: No serializer found for class org.json.JSONObjec ...

  4. hdu 5232 Shaking hands 水题

    Shaking hands Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pi ...

  5. PAT甲级1087. All Roads Lead to Rome

    PAT甲级1087. All Roads Lead to Rome 题意: 确实有从我们这个城市到罗马的不同的旅游线路.您应该以最低的成本找到您的客户的路线,同时获得最大的幸福. 输入规格: 每个输入 ...

  6. WebDriver元素查找方法摘录与总结

    WebDriver元素查找方法摘录与总结 整理By:果冻迪迪 selenium-webdriver提供了强大的元素定位方法,支持以下三种方法. • 单个对象的定位方法 • 多个对象的定位方法 • 层级 ...

  7. Use an LM317 as 0 to 3V adjustable regulator

    Most engineers know that they can use an inexpensive, three-terminal adjustable regulator, such as F ...

  8. linux下使用free命令查看实际内存占用（可用内存）

    转:http://blog.is36.com/linux_free_command_for_memory/ linux下在终端环境下可以使用free命令看到系统实际使用内存的情况,一般用free -m ...

  9. Android学习进阶和IoC

    1.成为Android高手一般分为六个阶段: 第一阶段:熟练掌握Java SE,尤其是对其内部类.线程.并发.网络编程等需要深入研究:熟练掌握基于HTTP协议的编程,清楚POST和GET等请求方式流程 ...

  10. Visual Studio 2012连接TFS2010登录不了

    一直用VS2012+TFS2010开发项目, 最近几天忽然很不正常, 在VS中会频繁要求输入TFS的账号密码, 经常要输入很多遍才可以正常连接签入签出. 这几天更甚, 基本上直接连接不了了. 网上找到 ...