获取画布中的特定位置

Question

我为此使用 Kinetic.js，但我认为这不是 Kinetic 特定的。问题如下：

我在画布中加载图像，然后使用 Kinetic 旋转该图像。例如，如何获取此图像最左边的点的 x 和 y？

Answer 1

尝试手动计算：

 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;