내가 중앙에서 다음과 같이 그래프에 상자를 확장하고 축척 비율

Question

있는 점 그래프로 :

var x1 = (this.width - (this.image.width * this.scale))/2 + this.origin.x; 
var y1 = (this.height - (this.image.height * this.scale))/2 + this.origin.y; 
var x2 = (this.image.width * this.scale); 
var y2 = (this.image.height * this.scale); 
context.drawImage(this.image, x1, y1, x2, y2); 

지금 내가 그 그래프의 단일 지점을 확장 할 수 있어야합니다. 점의 원점 x/y, 점 x/y 및 현재 수준의 배율 인수 (this.scale)가 있습니다. 이 스케일 팩터를 주어진 스케일로 상자의 점으로 어떻게 변환 할 수 있습니까?

Answer 1

당신의 질문은 - 좌표가 x,y이고, 새로운 x와 y 좌표가 a, b이 될 필요가 있다고 생각합니다. 그래서 전체 그래프에서와 마찬가지로 크기가 조정 된 상자 내의 같은 위치에 나타납니다. .

점은 원점에서 수평으로 x 단위 떨어져 있으며 새 원점에서 x/scale 단위가되어야합니다.

그래서, 유사

을 (새로운 원점 x1, y1 좌표를 가지고 있기 때문에) a = x/scale + x1는 점은 y 단위 원점으로부터 수직 방향으로, 당신은 새로운 원점에서 y/scale 단위해야합니다.

및 b = y/scale + y1

나는 새로운 기원이 어디 내가 오해가있을 수 있습니다 생각 (상자의 왼쪽 모서리가,하지만 난 다음 경우 단순히 새로운 원점의 좌표와 x1 및 y1 교체)