11.對象的上下關係
11.1.層的上下關係
Kinetic的層是按照添加到舞臺的次序，由下向上排列，上層遮蓋下層的圖形。每一個層各自有一個ZIndex編號來表示在層級中的上下位置，編號從0開始，表示最底層，向上層依次增1。html
Kinetic提供了幾個方法用於調整層的上下層位置，包括：post
<script>this
//移動到最上層spa
layer.moveToTop();.net
//移動到最下層htm
layer.moveToBottom();對象
//向上移動一層教程
layer.moveUp();ip
//向下移動一層ci
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>