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. java8新特性——四大内置核心函数式接口

    在前面几篇简单介绍了一些Lambda表达式得好处与语法,我们知道使用Lambda表达式是需要使用函数式接口得,那么,岂不是在我们开发过程中需要定义许多函数式接口,其实不然,java8其实已经为我们定义 ...

  2. 【BZOJ 1398】 1398: Vijos1382寻找主人 Necklace （最小表示法）

    1398: Vijos1382寻找主人 Necklace Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 308  Solved: 129 Descrip ...

  3. [APIO2010]特别行动队 --- 斜率优化DP

    [APIO2010]特别行动队 题面很直白,就不放了. 太套路了,做起来没点感觉了. \(dp(i)=dp(j)+a*(s(i)-s(j))^{2}+b*(s(i)-s(j))+c\) 直接推出一个斜 ...

  4. 【MPI】矩阵向量乘法

    输入作乘法的次数K 然后输入矩阵和向量的维度n 然后输入一个n维向量 然后输入K个n阶方阵 程序会给出该向量连续与此K个方阵做乘法后的结果 主要用了MPI_Gather, MPI_Allgather, ...

  5. python3-开发进阶Flask的基础(4)

    今日内容: 上下文管理:LocalProxy对象 上下文管理:  请求上下文: request/session   app上下文:app/g 第三方组件:wtforms       1.使用      ...

  6. poj 2342 && hdu 1520 树形dp

    题意:有n个人,接下来n行是n个人的价值,再接下来n行给出l,k说的是l的上司是k,这里注意l与k是不能同时出现的 链接:点我 dp[i][1] += dp[j][0], dp[i][0] += ma ...

  7. Educational Codeforces Round 12 C. Simple Strings 贪心

    C. Simple Strings 题目连接: http://www.codeforces.com/contest/665/problem/C Description zscoder loves si ...

  8. JAVA容器-重点总结与深度解析

    重点内容总结 问题思考 问题思考解析

  9. Known BREAKING CHANGES from NH3.3.3.GA to 4.0.0

    Build 4.0.0.Alpha1 =============================   ** Known BREAKING CHANGES from NH3.3.3.GA to 4.0. ...

  10. Java中的break和continue关键字使用总结

    java中的break和continue关键字使用总结   一.作用和区别   break的作用是跳出当前循环块(for.while.do while)或程序块(switch).在循环块中的作用是跳出 ...