[编辑 - 再次!对不起,我昨晚的回答不完整——我困了!]
要获取 Kinetic Text 以显示舞台上鼠标移动的坐标……</p>
舞台本身不会发出鼠标事件,但我们可以使用它stage.getContent
来获取舞台的 DIV,以便我们可以在该 div 上监听鼠标事件:
$(stage.getContent()).on('mousemove', function(event){ onMousemove(event)});
然后在 onMousemove 处理函数中,我们可以得到鼠标在舞台上的坐标:
var pos=stage.getMousePosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
最后我们更新动力学文本以显示该坐标:
simpleTextRight.setText("Mouse: x="+mouseX+", y="+mouseY);
这是代码和小提琴:http: //jsfiddle.net/m1erickson/KamDV/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{ border:solid 1px #ccc; margin-top: 10px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// create a stage and a layer
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
// a kinetic text object to display coordinates
var mouseToText=new Kinetic.Text({
x:20,
y:30,
fontFamily:"Arial",
fontSize:18,
fill:"blue",
stroke:null,
text:"Mouse position"
});
layer.add(mouseToText);
// Start listening to mousemove events
// The stage does not emit mouse events
// So stage.getContent() will get a reference to the stage <div>
// This will let us get mouseevents even on areas not filled with kinetic nodes
$(stage.getContent()).on('mousemove', function(event){ onMousemove(event)});
// on mousemove...
// Find the current mouse position
// Update the kinetic text for the new coordinate
// And redraw the layer
function onMousemove(event) {
// Find the position of the mouse relative to the stage
var pos=stage.getMousePosition();
mouseX=pos.x;
mouseY=pos.y;
// update the kinetic text with the current coordinate
mouseToText.setText("Mouse: x="+mouseX+", y="+mouseY);
// draw the layer with the new text
layer.drawScene();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>