KineticJS - 用新的鼠标位置更新文本层答案

【问题标题】：KineticJS - update text layer with new mouse positionKineticJS - 用新的鼠标位置更新文本层
【发布时间】：2013-04-14 06:03:26
【问题描述】：

我正在使用以下方法来获取鼠标位置：

  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);

如果我在文本字段中显示值，效果会很好；但是我无法更新文本层：

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'
            });

【问题讨论】：

标签： mouseevent kineticjs

【解决方案1】：

[已编辑——再次！对不起，我昨晚的回答不完整——我困了！]

要获取 Kinetic Text 以显示舞台上鼠标移动的坐标……

舞台本身不会发出鼠标事件，但我们可以使用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>

【讨论】：

是的，我确实将它添加到舞台，更新坐标值是问题，谢谢。
很遗憾没用，这里是jsfiddle.net/user373721/NJ7q8/7
我试过 simpleTextRight.setText 但没有更新 x 和 y 的值，谢谢
感谢一百万马克，非常感谢您的帮助。效果很好。
对于 KineticJS >=5.0.0，将 getMousePosition() 更改为 getPointerPosition()。

【解决方案2】：

这很有帮助。但是，最新版本的 kinetic.js 不再有 'getMousePosition'，他们使用的是 'getPointerPosition'。

这很好，因为我无法让 hand.js 与 kinetic.js 一起工作。看来他们已经想到了。

【讨论】：