마우스 움직임의 이미지 좌표 가져 오기

Question

이미지의 일부 위치 (예 : x1, y1)를 클릭 (마우스를 아래쪽으로)하고 마우스를 움직여 다른 위치에서 마우스를 놓은 상태 (x2, y2)를 계산합니다.

이 시작 및 종료 좌표를 캡처해야합니다.

mouseup 및 mousedown 이벤트로 시도했지만 작동하지 않습니다. 목적지에서 마우스 클릭을하면 아무 것도 반환하지 않습니다.

var startX, startY; 
var endX, endY; 
if (!document.all) 
    document.captureEvents(Event.MOUSEUP); 
document.onmouseup = endPos; 

if (!document.all) 
    document.captureEvents(Event.MOUSEDOWN); 
document.onmousedown = startPos; 

function startPos (event) 
{ 
    startX = event.offsetX?(event.offsetX):event.pageX - img1.offsetLeft; 
    startY = event.offsetY?(event.offsetY):event.pageY - img1.offsetTop; 
} 

function endPos (event) 
{ 
    endX = event.offsetX?(event.offsetX):event.pageX - img1.offsetLeft; 
    endY = event.offsetY?(event.offsetY):event.pageY - img1.offsetTop; 
} 

Answer 1

당신이

<script type="text/javascript"> 

jQuery(function($){ 

    $('#target').Jcrop({ 
    onChange: showCoords, 
    onSelect: showCoords 
    }); 

}); 

// Simple event handler, called from onChange and onSelect 
// event handlers, as per the Jcrop invocation above 
function showCoords(c) 
{ 
    alert('x='+ c.x +' y='+ c.y +' x2='+ c.x2 +' y2='+ x.y2) 
    alert('w='+c.w +' h='+ c.h) 
}; 

</script> 

SEE HERE

Answer 2

를 얻을 수 jCrop을 사용할 수 있습니다 난 당신이 같은 것을 할 제안 :

$(function(){ 

var positionRequester = function(element, callback){ 
     var startX = 0, 
      startY = 0, 
      endX = 0, 
      endY = 0; 

     $(element).unbind("mousedown").on("mousedown",function(e){ 
      console.log(e); 
     }); 

     $(element).unbind("mouseup").on("mouseup",function(e){ 
      callback(startX,startY,endX,endY); 
     }); 

}; 

positionRequester("div",function(startX,startY,endX,endY){ 
    console.log(startX,startY,endX,endY); 
}) 

}); 에서

"mousedown"당신이 jQuery를 사용하여 ..

Answer 3

"와 mouseUp"당신이 부를 수있는 콜백에서, thge 시작점을 캡처 할 수 있습니다 :

$(document).ready(function(e) { 
    $("div").html("CLICK ME"); 
    $(".box").bind("mousemove",function(e){ 
     $("div").html("X="+e.pageX +"px"+'<br/>' +"Y ="+e.pageY +"px"); 
    }); 
}); 

Answer 4

을 나는 이것이 당신이 원하는 것을 할 수 있기를 바랍니다.

HTML :

<div id="result"></div> 

자바 스크립트

var elem = document.getElementById('result'); 
var startPosX = 0, startPosY = 0, endPosX = 0, endPosY = 0; 
function startPos(e) { 
    var eve = (e) ? e : window.event; 
    var x = (eve.layerX) ? eve.layerX : eve.offsetX; 
    var y = (eve.layerX) ? eve.layerY : eve.offsetY; 
    startPosX = x, startPosY = y; 
} 
function endPos(e) { 
    var eve = (e) ? e : window.event; 
    var x = (eve.layerX) ? eve.layerX : eve.offsetX; 
    var y = (eve.layerX) ? eve.layerY : eve.offsetY; 
    endPosX = x, endPosY = y; 
elem.innerHTML = 'startPos(X)= ' + startPosX + ' | startPos(Y)= ' + startPosY + '<br/> endPos(X)= ' + endPosX + ' | endPos(Y)= ' + endPosY; 
} 

document.onmousedown = startPos; 
document.onmouseup = endPos; 

Online demo Here