比较有趣的一个代码,我一直都调试,还是有点不懂。呵呵。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script defer="defer">
function addCircle(id) {
var circle = new Kinetic.Circle({
x: Math.random() * stage.getWidth(),
y: Math.random() * stage.getHeight(),
radius: Math.random() * 50 + 30,
fill: Kinetic.Util.getRandomColor(),
id: id
});
layer.add(circle);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 260
});
var tooltipLayer = new Kinetic.Layer();
var dragLayer = new Kinetic.Layer();
var tooltip = new Kinetic.Label({
opacity: 0.75,
visible: false,
listening: false
});
tooltip.add(new Kinetic.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.2
}));
tooltip.add(new Kinetic.Text({
text: '',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
listening: false
}));
tooltipLayer.add(tooltip);
var layer = new Kinetic.Layer();
for(var n = 0; n < 50; n++) {
addCircle(n);
}
stage.add(layer).add(dragLayer).add(tooltipLayer);
stage.on('mouseover mousemove', function(evt) {
var node = evt.targetNode;
if (node) {
// update tooltip
var mousePos = node.getStage().getMousePosition();
tooltip.setPosition(mousePos.x, mousePos.y - 5);
tooltip.getText().setText("node: " + node.getId() + ", color: " + node.getFill());
tooltip.show();
tooltipLayer.batchDraw();
}
else {
tooltip.hide();
tooltipLayer.batchDraw();
}
});
stage.on('mouseout', function(evt) {
tooltip.hide();
tooltipLayer.draw();
});
</script>
</body>
</html>