如何获得画布中图像元素的坐标

Question

我想拖放画布中的图像，并且我在canvas中获得了该图像的完美坐标。但每当我在画布中移动同一图像时，我都不会获得该图像的新坐标。当我移动它时，我需要帮助来确定该图像的新坐标。

这是我的代码：

// get the offset position of the kinetic container 
    var $stageContainer=$("#container"); 
    var stageOffset=$stageContainer.offset(); 
    var offsetX=stageOffset.left; 
    var offsetY=stageOffset.top; 

    // create the Kinetic.Stage and layer 
    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    // start loading the image used in the draggable toolbar element 
    // this image will be used in a new Kinetic.Image 
    var image1=new Image(); 
    image1.onload=function(){ 
     $house.show(); 
    } 
    image1.src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png"; 

    // make the toolbar image draggable 
    $house.draggable({ 
     helper:'clone', 
    }); 

    // set the data payload 
    $house.data("url","house.png"); // key-value pair 
    $house.data("width","32"); // key-value pair 
    $house.data("height","33"); // key-value pair 
    $house.data("image",image1); // key-value pair 

    // make the Kinetic Container a dropzone 
    $stageContainer.droppable({ 
     drop:dragDrop, 
    }); 

    // handle a drop into the Kinetic container 
    function dragDrop(e,ui){ 

     // get the drop point 
     var x=parseInt(ui.offset.left-offsetX); 
     var y=parseInt(ui.offset.top-offsetY); 

     // get the drop payload (here the payload is the image) 
     var element=ui.draggable; 
     var data=element.data("url"); 
     var theImage=element.data("image"); 

     // create a new Kinetic.Image at the drop point 
     // be sure to adjust for any border width (here border==1) 
     var image = new Kinetic.Image({ 
     name:data, 
     x:x, 
     y:y, 
     image:theImage, 
     draggable: true 
     }); 
     layer.add(image); 
     layer.draw(); 
    } 
    body{padding:20px;} 
    #container{ 
     border:solid 1px #ccc; 
     margin-top: 10px; 
     width:350px; 
     height:350px; 
    } 
    #toolbar{ 
     width:350px; 
     height:35px; 
     border:solid 1px blue; 
    } 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 

    <h4>Drag from toolbar onto canvas. Then drag around canvas.</h4> 
    <div id="toolbar"> 
     <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png"><br> 
    </div> 
    <div id="container"></div> 

Answer 1

每个KineticJS对象，像图像对象，具有X，持有其当前位置y属性。这样

var x=myImageObject.x(); 
var y=myImageObject.y(); 

或者你也可以获取包含当前x对象，Y：

在最近版本KineticJS的，你可以获取对象的x，y使用

// myXY has x,y properties: myXY.x and myXY.y 
var myXY=myImageObject.position();