Get screen coordinates of an Kinetic image in Javascript?

问题

I'm writing an app and using Kinetic JS library to load image from client's computer. The image is contained in a photo object and is initialised as below

     var photoObj = new Image();

     photoObj.onload = function() {
          var photoImage = new Kinetic.Image({
            x: 0,
            y: 0,
            image: photoObj,
            width: photoObj.width,
            height: photoObj.height,
            name: "photo",
            id: "photo"
          });
      photoGroup.removeChildren();              
      photoGroup.add(photoImage);

The object is included in a Kinetic Group object, named photoGroup, which is created earlier.

photoGroup = new Kinetic.Group({
    x : 0,
    y : 0,
    draggable : true,
    id : "photoGroup"
});

photoLayer = new Kinetic.Layer({
    drawBorder: true
});

photoLayer.add(photoGroup);

stage = new Kinetic.Stage({
    container : "kinetic-kard-preview",
    width : 320,
    height : 480
});

stage.add(photoLayer);
stage.draw();

The group object is included in a Kinetic Layer object, named photoLayer, which is included in a Kinetic Stage object, named stage.

Anyway, my question is, now I would like to get the screen coordinates of the image. I successfully got the coordinates of the stage by

var containerOffset=$("#kinetic-kard-preview").offset();
var offsetX=containerOffset.left;
var offsetY=containerOffset.top;
console.log(offsetX);//455.859375 
console.log(offsetY);//218

but I can't seem to do the same thing for the image. When I viewed source code of the web page, I've noticed that the generated html code of the canvas that contains the image is something like this.

<canvas width="320" height="480" style="padding: 0px; margin: 0px; border: 0px; background-color: transparent; width: 320px; height: 480px; position: absolute; background-position: initial initial; background-repeat: initial initial;"></canvas>

How can I get the screen coordinates of the image after it's loaded from client's pc to the canvas? Please help!!! Thank you.

thanks for your answer but it can't seem to get what I need. I just added the link of the screenshot here:

As you can see in the picture, the coordinates of the image are not the same as the coordinates of the stage that contains it. I wrote a mousemove event and calculated - the distance between the x screen coordinate of the stage (ie. offsetX) and x screen coordinate of the image. - the distance between the y screen coordinate of the stage (ie. offsetY) and y screen coordinate of the image.

They all have the same number....24 (as shown on the screen). By using the mousemove event, I manually got the values of offsetX, offsetY and the x and y screen coordinates of the image are 455, 218, 479 and 242.

However, my problem is how to get those numbers automatically, especially the screen coordinates of the image, after the image is loaded from my pc. I printed the values of gPos to console.log and got (0,0) values. So when I added offsetX and offsetY to these values, they are the same (455,218), not (479,242). Please let me know what should I do now? Thanks again for your help.

回答1:

Your Kinetic.Image is at position [0,0] in a draggable Kinetic.Group.

So you can get your image position by adding:

The #kinetic-kard-preview offsets
Plus the current group position: group.position()

[ Added code for KineticJS version 4.5.1 ]

Here is example code for v4.5.1 and a Demo: http://jsfiddle.net/m1erickson/NXH9X/

<!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-v4.5.1.min.js"></script>
<style>
body{padding:20px; background:ivory;}
#kinetic-kard-preview{
  margin-top: 10px;
  width:350px;
  height:350px;
  border:1px solid gray;
}
#target{position:absolute;top:200px;left:150px;opacity:0.50;}
</style>        
<script>
$(function(){

//
$pos=$("#results");

//
var containerOffset=$("#kinetic-kard-preview").offset();
var offsetX=containerOffset.left;
var offsetY=containerOffset.top;

//
var stage = new Kinetic.Stage({
    container: 'kinetic-kard-preview',
    width: 350,
    height: 350
});

//
photoLayer = new Kinetic.Layer({
    drawBorder: true
});
stage.add(photoLayer);

//
photoGroup = new Kinetic.Group({
    x : 0,
    y : 0,
    draggable : true,
    id : "photoGroup"
});
photoGroup.on("dragmove",function(){
    var gPos=photoGroup.getPosition();
    var x=parseInt(offsetX+gPos.x);
    var y=parseInt(offsetY+gPos.y);
    $pos.text("photoImage: screenX="+x+", screenY="+y);
});
photoLayer.add(photoGroup);

//
 var photoObj = new Image();
 photoObj.onload = function() {
    var photoImage = new Kinetic.Image({
      x: 0,
      y: 0,
      image: photoObj,
      width: photoObj.width,
      height: photoObj.height,
      name: "photo",
      id: "photo"
    });
    photoGroup.add(photoImage);
    photoLayer.draw();
}
photoObj.src="https://dl.dropboxusercontent.com/u/139992952/multple/norwayFlag.jpg";


}); // end $(function(){});
</script>       
</head>
<body>
    <h4>Semi-transparent flag is at screen position 150,200</h4>
    <p id=results>Drag the opaque flag and see screen position</p>
    <img id=target src='https://dl.dropboxusercontent.com/u/139992952/multple/norwayFlag.jpg'>
    <div id="kinetic-kard-preview"></div>
</body>
</html>

来源：https://stackoverflow.com/questions/22526670/get-screen-coordinates-of-an-kinetic-image-in-javascript

标签

javascript

jquery

kineticjs