KineticJS-使用新的鼠标位置更新文本层 [英] KineticJS - update text layer with new mouse position
问题描述
我正在使用以下方法获取鼠标位置:
I am using the following to get the mouse position:
var coordinate = 0;
............
canvas1.addEventListener('mousemove', function (evt) {
var mousePos = getMousePos(canvas1, evt);
var nY = Math.round(mousePos.y);
var nX = Math.round(mousePos.x);
coordinate = "x=" + nX + ", y=" + nY;
$('#pValue').val(coordinate);
}, false);
如果我在文本字段中显示值，则效果很好；但是我无法更新文本层:
It works great if I display the value in a text field; however I could not update a text layer:
dlayerA1Text = new Kinetic.Layer();
var simpleTextRight = new Kinetic.Text({
x: lOffset + (lOffset * 0.25),
y: 15,
text: coordinate,
fontSize: 12,
fontFamily: 'Calibri',
fill: 'white',
align: 'left'
});
推荐答案
[再次编辑-再次！抱歉昨晚回答不完整–我很困！]
要获取动态文本"以显示舞台上鼠标移动的坐标……
To get a Kinetic Text to display coordinates of mouse movements on the stage…
舞台本身不会发出鼠标事件，但是我们可以使用stage.getContent来获取舞台的DIV，以便我们可以在该div上监听鼠标事件:
The stage itself does not emit mouse events, but we can use stage.getContent to get the stage’s DIV so we can listen for mouse events on that div:
$(stage.getContent()).on('mousemove', function(event){ onMousemove(event)});
然后在onMousemove处理程序中，我们可以在舞台上获取鼠标的坐标:
Then in the onMousemove handler, we can get the coordinate of the mouse on the stage:
var pos=stage.getMousePosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
最后，我们更新动力学文字以显示该坐标:
And finally we update the kinetic text to show that coordinate:
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>
这篇关于KineticJS-使用新的鼠标位置更新文本层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
