在画布中获取特定位置

Question

I am using Kinetic.js for this, but I figure this is not Kinetic specific. The problem is as follows:

I am loading an image in a canvas, and I then use Kinetic to rotate this image. How do I get the x and y of, for example, leftmost point of this image?

Answer 1

Try doing the calculations manually:

 var theta = image.getRotation*Math.PI/180.;

 // Find the middle rotating point
 var midX = image.getX() + image.getWidth()/2;
 var midY = image.getY() + image.getHeight()/2;

 // Find all the corners relative to the center
 var cornersX = [image.getX()-midX, image.getX()-midX, image.getX()+image.getWidth()-midX, image.getX()+image.getWidth()-midX];
 var cornersY = [image.getY()-midY, image.getY()+image.getHeight()-midY, midY-image.getY(), image.getY()+image.getHeight()-midY];

 // Find new the minimum corner X and Y by taking the minimum of the bounding box
 var newX = 1e10;
 var newY = 1e10;
 for (var i=0; i<4; i=i+1) {
     newX = min(newX, cornersX[i]*Math.cos(theta) - cornersY[i]*Math.sin(theta) + midX);
     newY = min(newY, cornersX[i]*Math.sin(theta) + cornersY[i]*Math.cos(theta) + midY);
 }

 // new width and height
 newWidth = midX - newX;
 newHeight = midY - newY;