Абсолютные позиции мыши при обработке

Question

Это копия вставленного мной сообщения на форуме по обработке (где я до сих пор не получил ответа), подумал, что можно попробовать и здесь.

Обработка - это очень крутой способ рисовать вещи, особенно для веб-страниц. Просто для справки http://processing.org

Эй, я новичок в обработке, я использую его для создания веб-сайта без флеш-памяти, поэтому я в значительной степени рисую на холсте.

У меня проблема с положением мыши, хотя координаты при рисовании считают верхний левый угол позицией 0,0; фактические координаты мыши учитывают 0,0 как верхний левый угол окна браузера.

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

Есть ли способ сделать координаты мыши относительно холста? Чтобы я мог изменить размер окна моего браузера, а верхний левый угол всегда будет 0,0 для координат мыши?

Так вот в чем проблема, я не знаю, сколько людей здесь в stackoverflow испытывают с этим, но я надеюсь, что кто-то может мне помочь:)

благодаря сообществу переполнения стека.

Answer 1

Я не знаком с обработкой, но вы не можете просто рассчитать разницу между верхним левым углом окна браузера и верхним левым углом холста?
т.е. (используя jquery)

$(window).onresize = function() {
 //offset return position realive to the document.
 var offset = $('#canvas').offset();
 window.canvasLeft = offset.left;
 window.canvasTop = offset.top;
}

Тогда вы можете сделать что-то вроде:

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

Вы должны заменить #canvas селектором css для вашей области холста.

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

Answer 2

Обработка действительно не предназначена для создания веб-страниц. Это хуже , чем Flash для сайтов (обработка эскизов - это апплеты Java - Java менее распространена, гораздо более ресурсоемка и медленна для загрузки ..)

Тем не менее, существует processing.js , порт обработки Javascript.

Пример змея обращается к мыши. Поскольку это Javascript, а canvas - div, координаты должны быть немного более нормальными, чем Java (который живет в своем собственном мире виртуальных машин), но я могу ошибаться ..

Answer 3

Вы можете попросить пользователя откалибровать систему перед использованием. Это не полностью ответ на вопрос, но решение проблемы.

Просто нарисуйте красную точку в центре экрана, вверху слева и внизу справа. Попросите пользователя нажать на них и получить координаты. Затем вы знаете, где находятся углы экрана.