캔버스 내에서 특정 위치 얻기

Question

저는 이것을 위해 Kinetic.js를 사용하고 있습니다. 그러나 이것은 키네틱 스 특유의 것이 아닙니다. 문제는 다음과 같습니다.

캔버스에 이미지를로드하고 키네틱을 사용하여이 이미지를 회전합니다. 이 이미지의 가장 왼쪽 점과 같은 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;