Selecting an Image in KineticJS

I have multiple images in Kineticjs stage. I have to get the properties of the image (x, y, height, width) on clicking on the image.

Solution

Here's an example of how to have a Kinetic.Image report it's XY when clicked.

preload all your images first
attach the click event to each new Kinetic.Image

Example code and a Demo: http://jsfiddle.net/m1erickson/58a89/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

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

    // first fully load all images into imgs[] 
    // then call start() when all are loaded

    var imageURLs=[];  // put the paths to your images here
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg");
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }

    function start(){
        // the imgs[] array holds fully loaded images
        // the imgs[] are in the same order as imageURLs[]
        for(var i=0;i<imgs.length;i++){
            addImage(imgs[i],i*60,10,50,50);
        }
    }

    function addImage(img,x,y,w,h){
        var image=new Kinetic.Image({
            x:x,
            y:y,
            width:w,
            height:h,
            image:img,
            draggable:true
        });
        image.on("click",function(){
            var pos=this.position();
            alert(parseInt(pos.x)+","+parseInt(pos.y));
        });
        layer.add(image);
        layer.draw();
    }

}); // end $(function(){});
</script>       
</head>
<body>
    <h4>Drag to new position. Click to get XY.</h4>
    <div id="container"></div>
</body>
</html>