javascript - 如何在 Canvas 中获取图像元素的坐标

Question

我正在尝试在 Canvas 中拖放图像，并且我在 Canvas 中获得了该图像的完美坐标。但是每当我在 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 属性。

在最新版本的 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();