1

我正在使用以下内容来获取鼠标位置:

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

2 回答 2

2

[编辑 - 再次!对不起,我昨晚的回答不完整——我困了!]

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

舞台本身不会发出鼠标事件,但我们可以使用它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>
于 2013-04-21T06:23:04.903 回答
1

这很有帮助。但是,最新版本的 kinetic.js 不再具有“getMousePosition”,它们使用的是“getPointerPosition”。

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

于 2013-12-31T06:59:08.547 回答