正文
KineticJS教程（11）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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>
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>
