JS/Jquery

Question

다양한 화면 크기의 이미지에서 마우스 클릭 위치 감지 이전에이 질문을했고 답변을 통해 내가해야 할 필요가 있음을 알았지 만 예를 제공하지 않았으므로 피난처가되었습니다. 아직 해결책을 찾지 못했습니다.

오클라호마지도의 height:100% width:100% 이미지 인 '컨테이너'라는 초기 div가 있습니다. 아이디어는 사용자가지도의 특정 섹션 (이 예에서는 팬 핸들)을 클릭하면 div가 팬 핸들 이미지 인 div로 토글됩니다. 클릭 할 때 마우스의 픽셀 위치를 알면 사용자가 클릭하는 위치를 결정합니다.

문제는 크기가 다른 화면에 따라 픽셀 값이 달라진다는 점입니다. 사용자가 화면 크기를 기준으로 클릭하는 위치에 대한 계산을 확장하려면 다음을 수행해야한다고 말했었습니다. 비교하기 전에 모든 값을 축척 한 후

값을 입력해야합니다. 모든 x를 정규 너비로 곱하고 실제 너비로 나누고 y 및 height와 동일하게 수행하십시오.

모든 x를 표준 너비로 곱하고 실제 너비로 나누면 혼란 스럽습니다. 나는 어쨌든 스케일링을 시도했다. 나는 팬 핸들의 첫 번째 가장자리가 화면의 왼쪽에서 3.1 % 떨어져 있고 가장 먼 가장자리는 화면의 왼쪽에서 35.7 % 떨어져 있음을 발견했습니다. 나는 다음과 같은 코드가 있습니다 :

$("#container").click(function(e) 
    { 
     var x = event.pageX; 
     var y = event.pageY; 

     // Variables for area of pan handle 
     /* These variables do not seem to work yet */ 
     var xScale1 = 0.031*x; 
     var xScale2 = 0.357*x; 

     if(x >= xScale1 && x "less-than"= xScale2) 
     { 
     alert("You clicked the panhandle!"); 
     } 
    } 

나는 구걸의 수평 confinements 내에서 클릭 할 때이 경고를-팝업해야하지만, 아무것도 발생하지 않습니다. 나는 나의 가치를 "실제 너비"로 나누지 않는다는 것을 주목한다. 누군가가 "모든 x를 표준 너비만큼 곱하고 실제 너비로 나눕니다"라는 예제를 제공해 주시겠습니까?

Answer 1

Canonical 너비가 의미하는 바는 '보통'너비입니다.이 경우 너비는 이미지의 기본 크기입니다.

지도에 사용하는 이미지가 일반적으로 1280 x 1600 픽셀 (인수 만) 인 경우 표준 높이가 1600 픽셀이고 표준 너비가 1280 픽셀이라고 가정 해 보겠습니다.

크기가 800 x 600 픽셀이고 높이가 600 픽셀 인 화면에서 이미지를 보는 경우 높이를 800/1600 = 0.5 배 작게 조정해야합니다 , 600/1250 = 너비가 0.48 배 작습니다.

마찬가지로 화면 왼쪽에서 400 번째 픽셀을 클릭하고 실제 화면 상단에서 200 번째 픽셀을 클릭하면 이전에 설정된 비율로 나눈 '표준'위치를 얻을 수 있습니다. 그래서 (400, 200) => (800, 416.7).

그런 다음 정규화 된 값을 사용하여 클릭 한 이미지의 부분을 찾을 수 있습니다.

그런 말을 모두 가지고있는 것이 좋습니다. html 이미지 맵을 사용하는 완벽한 경우는 http://htmldog.com/reference/htmltags/map/입니다. 확인 해봐!

희망이 도움이됩니다.

Answer 2

나는이 원뿔형 물건에 대해 모른다. 그러나 수학적으로 나는 매우 간단한 방법으로 당신의 문제를 본다. 지도가 이미지이고 이미지의 크기가 일정한 것 같습니다. 지도가 100x100이라고 가정 해 봅니다. 화면 크기가 200x200 인 경우 화면이지도보다 2 배 큰 것입니다.

xScreen = 2*xMap; 
yScreen = 2*yMap; 

그래서 화면에 사용 된 모든 값은 실제지도에 사용 된 값의 2 배입니다. 사용자가 200x200 화면에서 50,50 픽셀을 클릭하면 이것을 100x100지도에서 25,25로 나누는 2 (비율)로 나눠야합니다. 핵심은 화면의 전체 크기와지도의 전체 크기를 나누어서 비율을 찾는 것입니다. 이 경우 :

var xScreen = screen.width; 
var yScreen = screen.height; 
var xProportion = xScreen/xSizeOfYourMap; 
var yProportion = yScreen/ySizeOfYourMap; 
$("#container").click(function(e) 
{ 
    var x1 = event.pageX; 
    var y1 = event.pageY; 

    var x2 = x1/xProportion; 
    var y2 = y1/yProportion; 

    alert("x of screen:"+x1+" - x of map:"+x2); 
}); 

은 이제 사용자가 당신이 원하는 지역을 클릭 한 경우 계산할 수 있습니다지도에서 클릭의 값을 가질 :

xScreen/xMap = 2;//200/100 = 2; 
yScreen/yMap = 2;//200/100 = 2; 

여기 비율을 찾기 위해 코드입니다. 모든 계산에 대해 숫자는 비율을 통과해야합니다.