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

回答1:

[Edited – again! Sorry about my incomplete answer last night – I was sleepy!]

To get a Kinetic Text to display coordinates of mouse movements on the stage…

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

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

Here is code and a Fiddle: 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>

回答2:

This was very helpful. However, the latest version of kinetic.js no longer has 'getMousePosition', they are using the 'getPointerPosition'.

Which is nice, because I could not get hand.js to work with kinetic.js. Appears they already thought of that.

来源：https://stackoverflow.com/questions/16128431/kineticjs-update-text-layer-with-new-mouse-position

标签

mouseevent

kineticjs