Получение положения мыши в элементе холста, когда z-index=-1

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

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

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

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


javascript canvas css z-index processing.js
person Anon    schedule 12.11.2010    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

person Anon    schedule 15.11.2010

arrow_upward
1
arrow_downward

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

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

person Ilya Volodin    schedule 13.11.2010