在画布中获取特定位置

时间:2013-02-22 09:32:56

标签: javascript html5 canvas kineticjs

我正在使用Kinetic.js,但我认为这不是Kinetic特有的。问题如下:

我正在画布中加载图像,然后我使用Kinetic旋转此图像。如何获得此图像最左侧点的x和y?

enter image description here

1 个答案:

答案 0 :(得分:0)

尝试手动进行计算:

 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;