Получение позиции мыши в элементе canvas, когда z-index = -1 - PullRequest
Новая
       23

Получение позиции мыши в элементе canvas, когда z-index = -1

2 голосов
/ 13 ноября 2010

это кажется простой проблемой. У меня есть приложение Canvas, которое я пишу с использованием Processing.js, и я хочу, чтобы оно отображалось на заднем плане веб-страницы. Для этого у меня есть следующий CSS: 

#canvas-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

Где canvas-back - это идентификатор div, который содержит фактический холст. Сам холст должен иметь ширину и высоту элемента HTML. Это правильно для меня (холст на заднем плане, под моим html-содержимым), но я больше не могу захватывать переменные mouseX и mouseY (что используется processing.js для получения координат мыши)

Как я могу исправить эту проблему? Это вопрос другого CSS или есть другой способ получить координаты мыши в processing.js? Спасибо.

Ответы [ 2 ]

3 голосов
/ 15 ноября 2010

Думаю, я опубликую свое решение на случай, если у кого-то возникнет такая же проблема.Так как я использовал jquery, я пошел дальше и установил новые переменные, jmouseX и jmouseY, в положение мыши. 

jQuery(document).ready(function(){
    $(document).mousemove(function(e){
        jmouseX = e.pageX;
        jmouseY = e.pageY;
    }); 
})

Затем, когда мне понадобится mouseX или mouseY в приложении processingjs, я просто использую jmouseX и jmouseY.1004 *

1 голос
/ 13 ноября 2010

Ну, так как вы измените z-index на -1, а ваше тело имеет z-index auto, который в этом случае можно считать 0, вы не сможете регистрировать какие-либо клики на холсте, так какпод телом.Ваше тело получает все щелчки и так далее.В этом случае вы должны зарегистрировать события мыши на самом теле.

Если вам нужно получить клики на холсте, единственное, что я могу предложить, это сделать его z-index = 1 и полностьюпрозрачный.Но в этом случае вы не сможете нажимать какие-либо элементы в теле, такие как кнопки, ссылки и текстовые поля.В противном случае вам придется записывать события в теле и вручную отправлять координаты в библиотеку, которую вы используете.

...