2014-12-13 1 views
0

나는 사용자가 업로드 한 그림을 표시하는 캔버스를 가지고 있습니다. 내가하고 싶은 것은 클라이언트에게 두 점 사이의 너비와 높이를 알려주는 것입니다. 그녀는 캔버스에서 cm 단위로 선택했습니다. 예를 들어, 클라이언트는 캔버스의 왼쪽 상단을 클릭 한 다음 오른쪽 상단을 선택합니다. 그러면 두 지점 사이의 너비를 입력해야합니다. 어떻게해야합니까?캔버스에서 선택한 두 점의 너비/높이 가져 오기

나쁜 영어로 죄송합니다.

감사합니다.

답변

0

두 점의 좌표를 구하십시오.

첫 번째 지점을 A이라고하고 두 번째 지점을 B이라고 가정하겠습니다. 그래서 자신의 좌표는 다음과 같습니다

A = (xa, ya) 
B = (xb, xb) 

그래서 AB 사이의 수평 거리가 될 것이다, |xa-xb| 1. 그리고 그들 사이의 수직 거리는 |ya-yb| 이 될 것입니다. 우리가 A과의 B 같은 대각선 반대 포인트를 사용하여 사각형을 그리면

는, 그 사각형의 폭은 |xa-xb| 것, 그리고 높이가 |ya-yb|을 것 그것입니다.


  1. ||

    는 "절대 값"을 나타냅니다. http://en.wikipedia.org/wiki/Absolute_value을 참조하십시오.
+0

예를 들어 실제로 사진은 사용자가 업로드 한 공간에서 가져온 것입니다.이 두 점 사이의 너비를 cm로 지정하고 싶습니다. 사용자가 나를 입력해야합니다. 그래서 사용자가 필요합니다. 두 점을 선택한 후 입력하십시오. – omid

+0

그러면 캔버스에서 클릭 이벤트를 잡아보고 두 번째 클릭인지 확인해야합니다. 그럴 경우 너비를 입력 할 수있는 텍스트 상자를 사용자에게 제시하십시오. 그럼 당신은 다음과 같은 자바 스크립트 객체의 모든 세부 사항을 저장할 수 있습니다 { X :. 귀하의 X 좌표, Y를 : 귀하의 y 좌표, 승 :. 사용자가 입력 한 폭. } – budhajeewa

+0

사진에서 사용자의 첫 번째 클릭 이후에 그림자 또는 무언가를 추가하는 방법, 그래서 그는 HE/그녀가 크기 조정과 같은 다른 지점을 선택해야한다는 것을 알고 있습니까? – omid

관련 문제