发表新帖
发表新帖

KineticJS - update text layer with new mouse position

前端 未结
关注
2 1730
情书的邮戳
情书的邮戳 2021-01-25 14:03

I am using the following to get the mouse position:

  var coordinate = 0;
............
           canvas1.addEventListener(\'mousemove\', function (evt) {
相关标签:
2条回答
  • 北荒
    2021-01-25 14:32

    [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>
    0 讨论(0)
  • 别跟我提以往
    2021-01-25 14:41

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题