javascript - キャンバス内の特定の位置を取得する

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;