HTML5 Canvas и Firefox 4 - Получение координат клика - PullRequest
Новая
       33

HTML5 Canvas и Firefox 4 - Получение координат клика

1 голос
/ 24 апреля 2011

Я работал над кучей демонстраций HTML5 Video и Canvas.До сих пор я сосредоточился на Chrome, но теперь я пытаюсь оптимизировать их и для Firefox и Safari.

Тот, над которым я сейчас работаю, рисует видео в Canvas и перемещает видео в позиции щелчка мышью,То, что у меня есть, работает в Chrome и Safari, но не в Firefox.Я не смог найти много информации по этим темам (события кликов, координаты, специфичные для Firefox и т. Д.).Я скопировал код отсюда:

Как получить координаты щелчка мышью на элементе canvas? 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);

Так что, очевидно, янемного потерян, если бы кто-нибудь мог указать мне правильное направление, я был бы признателен.

Ответы [ 2 ]

1 голос
/ 16 ноября 2011

У меня есть рабочая версия, которая использует 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);
});

Надеюсь, это поможет вам.:)

0 голосов
/ 24 апреля 2011

Вам необходимо передать объект события обработчику для FF (IE работает, потому что event доступно через window.event) 

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