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

我试着在画布上拖放图像，我得到了画布上图像的完美坐标，但每当我在画布上移动相同的图像时，我就得不到该图像的新坐标。当我移动图像时，我需要帮助确定图像的新坐标

这是我的代码：

// 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>

//获取动态容器的偏移位置
变量$stageContainer=$（“#容器”）；
var stageOffset=$stageContainer.offset（）；
var offsetX=stageOffset.left；
var offsetY=stageOffset.top；
//创造动感舞台和层次
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
//开始加载可拖动工具栏元素中使用的图像
//此图像将用于新的动能图像
var image1=新图像（）；
image1.onload=函数（）{
$house.show（）；
}
图1.src=”https://dl.dropboxusercontent.com/u/139992952/multple/4top.png";
//使工具栏图像可拖动
$house.draggable({
助手：'clone'，
});
//设置数据有效负载
$house.data（“url”、“house.png”）；//键值对
$house.data（“宽度”、“32”）；//键值对
$house.数据（“高度”、“33”）；//键值对
$house.data（“图像”，图像1）；//键值对
//使动能容器成为dropzone
$stageContainer.droppable({
下降：dragDrop，
});
//将液滴放入容器中
函数dragDrop（e，ui）{
//抓住落点
var x=parseInt（ui.offset.left offsetX）；
var y=parseInt（ui.offset.top-offsetY）；
//获取下降有效载荷（此处有效载荷为图像）
var元素=ui.draggable；
var数据=元素数据（“url”）；
var theImage=element.data（“图像”）；
//在下降点创建一个新的动能图像
//确保调整任何边框宽度（此处边框==1）
var image=新的动能图像({
名称:数据,，
x:x，
y:y，
图片：theImage，
德拉格布尔：是的
});
图层。添加（图像）；
layer.draw（）；
}
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
#工具栏{
宽度：350px；
高度：35px；
边框：纯色1px蓝色；
}
从工具栏拖到画布上。然后在画布上拖动。

与图像对象一样，每个KineticJS对象都具有保持其当前位置的x、y属性

在KineticJS的最新版本中，您可以使用以下方法获取对象的x，y：

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

或者，您可以获取包含当前x，y的对象，如下所示：

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

---

但是，在第一次拖放操作后，在画布中移动图像后，您的代码会给我图像的当前x，y坐标吗？现在，在第一次拖放操作后，我只得到图像的x，y坐标，而不是移动该图像后的新坐标。在dragdrop事件处理程序中创建KineticJS对象时，您提供了初始的x，y——我看到您为新KineticJS对象提供了jQuery拖放坐标。是的，.x（）和.y（）是由KineticJS维护的，因此它们反映了新KineticJS对象的任何拖动。我明白你的意思。在将图像从一个地方移动到另一个地方后，我将获得更新的图像值。你能帮我消除画布上的图像重叠吗？我快速查看了你的新问题，并为你提供了一个解决方案：。祝你的项目好运！