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

[編集 – もう一度！昨夜は不完全な回答で申し訳ありません – 私は眠かったです!]

キネティック テキストを取得してステージ上のマウスの動きの座標を表示するには…</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 に答える