将一个形状从一个容器到另一个与KineticJS,我们可以使用moveTo()方法需要一个集装箱作为一个参数。一个集装箱可以是另一个阶段,一个层,或一组。你也可以移动到其他组织和层组,或形状直接进入其他层的组织。
产品说明:拖放组和观察,红色矩形势必要么黄组或蓝色的集团。使用左边的按钮来移动箱子从一个组织到另一个。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#buttons {
position: absolute;
left: 10px;
top: 0px;
}
button {
margin-top: 10px;
display: block;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="toBlue">
Move red box to blue group
</button>
<button id="toYellow">
Move red box to yellow group
</button>
</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var yellowGroup = new Kinetic.Group({
x: 200,
y: 100,
draggable: true
});
var blueGroup = new Kinetic.Group({
x: 400,
y: 80,
draggable: true
});
var box = new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'red',
stroke: 'black'
});
var yellowCircle = new Kinetic.Circle({
x: 0,
y: 0,
radius: 50,
fill: 'yellow',
stroke: 'black'
});
var blueCircle = new Kinetic.Circle({
x: 0,
y: 0,
radius: 50,
fill: 'blue',
stroke: 'black'
});
// build node tree
yellowGroup.add(yellowCircle);
yellowGroup.add(box);
blueGroup.add(blueCircle);
layer.add(yellowGroup);
layer.add(blueGroup);
stage.add(layer);
// add button event bindings
document.getElementById('toBlue').addEventListener('click', function() {
box.moveTo(blueGroup);
layer.draw();
}, false);
document.getElementById('toYellow').addEventListener('click', function() {
box.moveTo(yellowGroup);
layer.draw();
}, false);
</script>
</body>
</html>