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

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

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

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