18177

Get screen coordinates of an Kinetic image in Javascript?

Question:

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.

<hr />

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

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/iLUX5.png" data-original="https://i.stack.imgur.com/iLUX5.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

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.

Answer1:

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

So you can get your image position by adding:

<ul><li>

The #kinetic-kard-preview offsets

</li> <li>

Plus the current group position: group.position()

</li> </ul>

<strong>[ Added code for KineticJS version 4.5.1 ]</strong>

Here is example code for v4.5.1 and a Demo: <a href="http://jsfiddle.net/m1erickson/NXH9X/" rel="nofollow">http://jsfiddle.net/m1erickson/NXH9X/</a>

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

<img id=target src='https://dl.dropboxusercontent.com/u/139992952/multple/norwayFlag.jpg'> <div id="kinetic-kard-preview"></div> </body> </html>

Recommend

  • Rotating Images & Pixel Collision Detection
  • How to rotate text with view using OpenLayers 3
  • DropShadowPanel and border corner radius
  • Javascript event, the parameter “e” , “event” or other
  • How To Save Data For Bookmarks?
  • How does one pull statistics (either daily or over time) from the YouTube API
  • AdminLTE and AngularJS content wrapper wrong min-height
  • Detect when Facebook like button is clicked
  • Needing to do .toArray() to get output of mongodb .find() on key name not value
  • Content-Length header not returned from Pylons response
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • Spark fat jar to run multiple versions on YARN
  • Change multiple background-images with jQuery
  • Reading JSON from a file using C++ REST SDK (Casablanca)
  • Algorithm for a smudge tool?
  • CSS Linear-gradient formatting issue accross different browsers
  • FB SDK and cURL: Unknown SSL protocol error in connection to graph.facebook.com:443
  • Master page gives error
  • Nant, Vault & Windows Integrated Authentication
  • Counter field in MS Access, how to generate?
  • Can Jackson SerializationFeature be overridden per field or class?
  • htaccess rewriting URLs with multiple forward slashes
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Javascript + PHP Encryption with pidCrypt
  • Display Images one by one with next and previous functionality
  • Upload files with Ajax and Jquery
  • Websockets service method fails during R startup
  • Web-crawler for facebook in python
  • How to pass list parameters for each object using Spring MVC?
  • Is there a mandatory requirement to switch app.yaml?
  • A cron job substitute?
  • Android Studio and gradle
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • Acquiring multiple attributes from .xml file in c#
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal