HTML5畫布和Firefox 4 - 獲取點擊座標

我一直在研究一堆HTML5視頻和Canvas演示。直到現在我專注於Chrome，但現在我正試圖優化Firefox和Safari。HTML5畫布和Firefox 4 - 獲取點擊座標

我正在處理的一個現在在畫布上繪製視頻並將視頻移動到鼠標點擊位置。到目前爲止，我在Chrome和Safari中都能使用它，但在Firefox中無法使用。我一直無法找到關於這些主題的更多信息（點擊事件，座標，特定於Firefox等）。我從這裏複製的代碼：

How do I get the coordinates of a mouse click on a canvas element? http://answers.oreilly.com/topic/1929-how-to-use-the-canvas-and-draw-elements-in-html5/

，因爲他們給我的印象，應該在所有的瀏覽器，但Firefox依然拒絕。它所做的只是顯示視頻，它不會對鼠標點擊產生反應。

這是我的代碼（不包括定義的變量）：

function activateVideo(){ 
setTarget(); 
videoElement.play(); 
animate(); 
} 

function setTarget(){ 
targetX=xCoord; 
targetY=yCoord 
moverX=(targetX-currentX)/100; 
moverY=(targetY-currentY)/100; 
} 
canvasElement.addEventListener('click', function(){ 
    /*xCoord = event.clientX - canvasElement.offsetLeft; 
    yCoord = event.clientY - canvasElement.offsetTop; 
    txtCount.value = xCoord + " + " + yCoord;*/ 
    if (event.pageX || event.pageY) { 
     xCoord = event.pageX; 
     yCoord = event.pageY; 
    } else { 
     xCoord = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     yCoord = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    xCoord -= canvasElement.offsetLeft; 
    yCoord -= canvasElement.offsetTop; 
    setTarget(); 
},false); 

function animate(){ 
currentX += moverX; 
currentY += moverY; 
if(dist(currentX,targetX,currentY,targetY)<1) { 
    moverX=0; 
    moverY=0; 
} 
drawVideo(videoElement,context,320,256); 
timer = setTimeout(animate,20); 
} 

function dist(x1,x2,y1,y2){ 
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 
} 

function drawVideo(videoElement,context,w,h) { 
context.clearRect(0,0,1000,600); 
context.drawImage(videoElement,currentX,currentY,w,h); 
} 
playCanvas.addEventListener('click', activateVideo, false);

所以很明顯，我有點失落，如果有人能在正確的方向指向我，我將不勝感激。

來源

2011-04-24 chuls

您需要將事件對象傳遞給處理程序FF（IE工程becuse event是通過window.event可用）

canvasElement.addEventListener('click', function(event){ 
    event = event || window.event; 
    ...

來源

2011-04-24 13:03:59

嗨亞歷克斯，謝謝你的回覆。不幸的是，添加這條線對我來說沒有任何區別 – chuls 2011-04-25 11:54:09

如果使用canvas創建頁面，並且您的addEventListener＆pass事件可以提醒（xCoord +「/」+ yCoord），那麼問題必須在別處？ – 2011-04-25 12:02:08

我無法弄清楚。我在其他瀏覽器中獲得了所有的值和功能。但Firefox不會有反應 – chuls 2011-04-30 08:54:52

我有一個使用jQuery的，這可能是最橫的這一個工作版本瀏覽器的方式做到這一點。它沒有那麼壞。這裏是我的小提琴http://jsfiddle.net/jaredwilli/D3PWN/

代碼

var canvas = $('canvas'); 
canvas.mousemove(function(e){ 
    var pageCrds = '('+ e.pageX +', '+ e.pageY +')', 
     clientCrds = '('+ e.clientX +', '+ e.clientY +')'; 

    $('span:first').text('(e.pageX, e.pageY) - '+ pageCrds);  
    $('span:last').text('(e.clientX, e.clientY) - '+ clientCrds); 

}); 

var arr = []; 
canvas.click(function(e) { 
    arr.unshift($('span.first').text()); 
    console.log(arr); 
});

希望這有助於你一些。 :)

來源

2011-11-16 04:07:18 jaredwilli

HTML5畫布和Firefox 4 - 獲取點擊座標

回答

相關問題