獲取鼠標移動的圖像座標

我有一種情況，我在圖像上的某個位置（如x1，y1）點擊（鼠標向下），並在某個其他位置移動鼠標並釋放鼠標（鼠標向上） x2，y2）。獲取鼠標移動的圖像座標

我需要捕獲這些起始和結束座標。

我試着用mouseup和mousedown事件，但它不工作。當我在目的地進行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; 
}

來源

2013-05-03 rpg

請，首先表現出一定的代碼。 – dfsq 2013-05-03 12:48:25

請包括您的代碼。 – MarioDS 2013-05-03 12:48:31

無代碼全部答案有偏見 – Zo72 2013-05-03 12:51:58

您可以使用jCrop得到這個

<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

來源

2013-05-03 12:49:53 PSR

在簡單的JavaScript任何其他方式解決？ – rpg 2013-05-03 13:09:06

對不起，我不知道，但它是更好的方式來做到這一點 – PSR 2013-05-03 13:09:50

我會建議你做這樣的事情：

$(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); 
})

}）;

在「鼠標按下」你可以捕捉thge起點，在「鼠標鬆開」，你可以調用回調..

來源

2013-05-03 13:12:56 Christian

使用jQuery：

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

來源

2013-05-03 17:23:10

我希望這將是你想要的。

HTML：

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

的Javascript

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

來源

2013-05-03 18:05:42

獲取鼠標移動的圖像座標

回答

相關問題