2013-12-16 4 views
1

그래서 사각형과 도형을 그릴 수있는 웹 앱이 있습니다. 첫 번째 좌표는 (x1, y1)이고 두 번째 좌표는 (x2, y2)라는 개념에 기초하여 그립니다. 캔버스에서 100 % 확대/축소로 그리면 모든 것이 예상대로 작동합니다. 하지만 (CSS를 통해) 80 %로 확대하면 앱이 (0,0) 캔버스 지점에서 실제 화면 픽셀로 마우스 위치의 좌표를 가져옵니다. 이 점을 기준으로 비율이 조정 된 캔버스에 그립니다. 그러나 비율로 조정됩니다. 이렇게하면 모든 직사각형이 잘못된 좌표로 그려집니다.HTML5 Canvas/CSS scaling

이것은 설명하기가 혼란하기 때문에 캔버스에 사각형을 80 %로 그려주는 간단한 비디오를 보겠습니다. https://dl.dropboxusercontent.com/u/15582820/problem.swf 왜 이것이 작동하지 않는지 알 수 있습니다. 기본적으로 수식이 있어야 스케일 된 좌표를 취할 수 있고 실제 화면 좌표가 확대되는 것을 얻으려면 소수점 (0-100 %)을 기준으로 숫자를 곱할 수 있습니다.

도움을 주시면 감사하겠습니다. 나는 붙어있다.

답변

0

방법은 그것을 할 수 있습니다 :

zoom = [between 0-100...]; 
x1 = 100/zoom 

은 간단 소리 만이 걸리는 전부입니다.