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. Python正则模块

    re模块 import re # match # 从头开始匹配, 只匹配一次,就结束 a = re.match('\d+', '54:58天5488:8451') # 默认就是0个群组 print(a ...

  2. 【BZOJ 3144】 3144: [Hnoi2013]切糕 （最小割模型）

    3144: [Hnoi2013]切糕 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1764  Solved: 965 Description Inp ...

  3. 51nod1394 差和问题 值域线段树

    水题..... 插入一个值$v$时,对于$[0, v - 1]$和$[v + 1, inf]$的点分别考虑就行了 删除相当于减去插入的贡献 用动态开点线段树卡点常数就过去了 复杂度$O(n \log ...

  4. UVA11468 Substring --- AC自动机 + 概率DP

    UVA11468 Substring 题目描述: 给定一些子串T1...Tn 每次随机选择一个字符(概率会给出) 构造一个长为n的串S,求T1...Tn不是S的子串的概率 直接把T1...Tn建成AC ...

  5. 【插头DP】BZOJ3125-city

    开学忙成狗,刷题慢如蜗牛…… [题目大意] 给出一个m*n的矩阵里面有一些格子为障碍物,一些格子只能上下通行,一些格子只能左右通行,一些格子上下左右都能通行.问经过所有非障碍格子的哈密顿回路个数. [ ...

  6. Nginx 常见问题与错误处理

    常见问题与错误处理1. 400 bad request 错误的原因和解决办法配置 nginx.conf 相关设置如下.client_header_buffer_size 16k;large_clien ...

  7. UI/GUI/UE/UX/ID/UED/UCD的区别

    简述: UI (User Interface):用户界面 UE (User Experience):用户体验 ID (Interaction design):交互设计 UID (User Interf ...

  8. [bzoj1015](JSOI2008)星球大战 starwar(离线+并查集)

    Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武 器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通 ...

  9. Cocoapods报错Unable to satisfy the following requirements

    很多时候我们都会去gitHub上down别人的源码去研究,如果别人的项目用pod集成了,当我们下载好后不外乎cd到项目根目录pod install一下,集成项目所需的库类.今天在我pod instal ...

  10. nginx出现504 Gateway Time-out的解决思路

    http://www.xbc.me/nginx-fix-504-gateway-timeout/ 在安装完Nginx+PHP-fpm+Mysql后 (如何安装LNMP环境,请参考快速配置LNMP环境N ...