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

How to get Co-ordinates of image element in canvas

本文关键字：图像元 图像 元素 坐标 布中 何获取 获取      更新时间：2023-09-26

我正在尝试将图像拖放到画布中，并在画布中获得该图像的完美坐标。但每当我在画布上移动同一个图像时，我都不会得到该图像的新坐标。当我移动图像时，我想帮助确定它的新坐标。

这是我的代码：

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

每个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();
相关文章：