KineticJS - update text layer with new mouse posit

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

标签： mouseevent kineticjs

2条回答

甜甜的少女心

2楼-- · 2019-02-28 09:26

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) 举报

Fickle 薄情

3楼-- · 2019-02-28 09:37

[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) 举报

KineticJS - update text layer with new mouse posit

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间