CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Parag Bhingre
Parag Bhingre

Reputation: 850

How to get Co-ordinates of image element in canvas

I am trying to drag drop image in canvas and i am getting perfect co-ordinates of that image in canvas.But whenever i move that same image in the canvas i am not getting the new co-ordinates of that image. I want help to determine the new co-ordinates of that image when i move it.

this is my code:

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

Upvotes: 2

Views: 189

Answers (1)

markE
markE

Reputation: 105015

Each KineticJS object, like the image object, has x,y properties that hold its current location.

In recent versions of KineticJS, you can fetch an object's x,y using:

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

Or you can fetch an object containing the current x,y like this:

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

Upvotes: 1

Related Questions