Question

我使用以下内容获取鼠标位置：

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

Answer 1

[编辑 - 再次！对昨晚我的不完整答案感到抱歉 - 我很困！]

获取动态文本以显示舞台上鼠标移动的坐标...

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

Answer 2

这非常有帮助。但是，最新版本的kinetic.js不再具有＆＃39; getMousePosition＆＃39;，他们正在使用＆＃39; getPointerPosition＆＃39;。

哪个好，因为我无法使用hand.js来使用kinetic.js。看来他们已经想到了这一点。

KineticJS - 使用新鼠标位置更新文本图层

2 个答案: