HTML5 анимация, захватить движение мыши без перерыва? - PullRequest
Новая
       17

HTML5 анимация, захватить движение мыши без перерыва?

1 голос
/ 10 февраля 2012

У меня есть небольшая проблема, которую я пытаюсь решить. Когда я начинаю делать анимацию с HTML5 и Canvas, я хочу иметь постоянный поток анимации, а также иметь возможность фиксировать движение мыши без прерывания потока анимации. Это сейчас кажется проблемой. Я принесу некоторый код из моего тестового кода здесь. 

function mainInit()
{
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    ballArray.push(new Ball(30,30,2,4,15,"#EEEEEE"));
    setInterval(drawScene,20);
} 

function drawScene() 
{ 
    // main drawScene function    
    clear(); // clear canvas         
    // draw animated objects        
    for(var i = 0; i < ballArray.length; i++)
    {
    ballArray[i].draw();
    }       
    Event_MouseMove();
}

var messageMousePos = '';    
function Event_MouseMove()
{
    canvas.addEventListener('mousemove', function(evt)
    {
    var mousePos = getMousePos(canvas, evt);
    messageMousePos = "Mouse position: " + mousePos.x + "," + mousePos.y;   
    context.font = '10pt Calibri';
    context.fillStyle = 'black';
    context.fillText(messageMousePos , 5, 15);
    }, false);        
}

Проблема в том, что при перемещении eventListner для движения мыши переопределяет интервал рисования и делает его намного медленнее. Как / где я должен поместить код для события мыши, чтобы он не прерывал этот интервал отрисовки, но по-прежнему рисовал события мыши в соответствии с интервалом?

1 Ответ

1 голос
/ 10 февраля 2012

На первый взгляд кажется, что код будет пытаться добавить прослушиватель событий в каждом кадре ... Хотя JS сбросит дублирующиеся обработчики, это замедлит ваш код. Неясно, пытаетесь ли вы фиксировать движение мыши через каждый интервал или постоянно, потому что ваш код пытается сделать и то и другое. Вот лучшее решение для обоих миров:

Вызовите addEventListener один раз вне цикла, и у функции, которую она вызывает, сохраните положение мыши в messageMousePos. Затем, внутри функции drawScene, поместите ваш код font / fillstyle / filltext, если вы действительно хотите, чтобы текст выводился каждые 20 мс. Это может выглядеть нестабильно по сравнению с тем, насколько плавно изменился бы текст, если бы вы постоянно отображали текст положения мыши.

Вот пример постоянного захвата и отображения положения мыши, как вы, возможно, захотите.

...