Как увидеть mouseReleased() событие за пределами холста с помощью processing.js

У меня есть объект, который я хочу перетащить по экрану с помощью мыши в Processing. Я поставил acquired в true на мыши вниз над объектом, и false на кнопки мыши, таким образом:Как увидеть mouseReleased() событие за пределами холста с помощью processing.js

void mousePressed() { 
    if (overThing()) { 
    acquired = true; 
    } 
} 

void mouseReleased() { 
    acquired = false; 
}

Я тогда запрос acquired в моем update() и перетащите объект, если он true.

void update() { 
    \\ other stuff... 
    if (acquired) { 
    \\ drag thing code ... 
    } 
}

Все это прекрасно работает в области обработки. mouseReleased() получает вызов, освобождаю ли мышь внутри или вне активного окна.

Однако, когда я переместить код в Chrome, используя Processing.js (v1.4.8), mouseReleased()это не называется, если я выпускаю мышь вне холста (будь то мышь еще через веб-страницы , или вне окна браузера). Поэтому, когда я возвращаю (теперь незажаренную) мышь на холст, объект все равно затягивается.

Я попытался включить тест mousePressed в update(), но это также возвращает true в этих обстоятельствах.

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

источник

2015-05-16 Susan Stepney

Я не знаю о том, что касается обработки, но освобождение кнопок мыши вне виджета является распространенной проблемой в разработке графического интерфейса.

Я подозреваю, что у вас нет возможности узнать точное время, когда мышь отпускается за пределами виджета, но у вас есть два варианта:

Set acquired = false в mouseOut(), как предполагает @Kevin.
Я предполагаю, что в обработке есть некоторый тип метода mouseEntered(), а также некоторый способ узнать, нажата ли кнопка мыши (либо глобальная переменная, либо объект события, переданный в mouseEntered()). Вы можете поймать введенное мышью событие, проверить, была ли выпущена мышь, и затем установить acquired = false.

Как так:

void mouseEntered() { 
    if (mouse button is pressed) { 
    acquired = false; 
    } 
}

Edit: Из ваших комментариев, @Susan, похоже, есть ошибка в Processing.js, где mousePressed не установлен в ложь, если мышь кнопка выходит за пределы холста. Одна вещь, указывающая на то, что это ошибка, заключается в том, что the mouse movement example on the processing website также показывает это поведение.

В зависимости от того, сколько у вас контроля над веб-сайт это происходит, и сколько усилий вы хотите идти, вы можете исправить ошибку самостоятельно, написав некоторые JavaScript (отдельно от кода обработки):

Определить событие mouseUp() на странице <body>, чтобы поймать все события выпуска мыши на странице.
В событии mouseUp() проверьте, произошло ли событие из вашего элемента управления Processing. (Вероятно, объект события передан функции mouseUp(), и вам, возможно, придется указать вашему управлению обработкой ID, чтобы идентифицировать его)
Если событие не получено из вашего элемента управления обработкой, тогда запустите событие mouseUp, на элементе управления обработкой. Это должно (надеюсь,!) Запускать событие мыши внутри вашего кода обработки.
Я не уверен, что обработка сделает положение мыши (x, y) вне его контроля, когда оно обрабатывает событие, которое вы его отправляете. Возможно, вы захотите установить флаг объекта события (при условии, что вы можете добавить дополнительные данные к объекту события), чтобы сказать: «Не используйте (x, y) позицию этого события - он находится вне контроля».

Редактировать2: Было легче, чем я думал! Вот код JavaScript для обнаружения мыши, выпущенной за пределами холста обработки и отправки события mouseReleased на холст. Я тестировал его на примере движения мыши с сайта Processing, и он исправляет ошибку. Он использует JQuery (хотя это может быть переписано, чтобы не использовать JQuery), и это предполагает, что ваша обработка холст имеет ID «processingCanvas»:

$(':not(processingCanvas)').mouseup(function(){ 
    Processing.getInstanceById('processingCanvas').mouseReleased(); 
});

Чтобы использовать этот код, включить его в любом месте вашей страницы (в файле JavaScript или в < сценариях >) и убедитесь, что у вас есть библиотека jQuery, включенная до этого кода.

Объект Processing позволяет JavaScript вызывать любые функции, определенные в вашем коде обработки. Здесь я использовал его для вызова функции Обработки, встроенной в функцию mouseReleased(), но если вы хотите вызвать пользовательскую функцию для обработки состояния, выпущенного с внешней стороны мыши, иначе, вы могли бы.

источник

2015-05-18 10:51:21

Спасибо Адаму. Но когда я возвращаю мышь на холст, он говорит 'mousePressed == true', независимо от того, выпущен ли он из холста. Похоже, что базовая система не получает этого события. –

Хорошо. Теперь я понимаю, что это ошибка в processing.js. Я обновил свой ответ с возможным обходным решением для ошибки. –

Edit2 отлично! Благодарю. –

Вы должны использовать функцию mouseOut(), чтобы определить, когда мышь покидает эскиз:

void mouseOut() { 
    acquired = false; 
}

Больше информации в справочнике here.

источник

2015-05-16 13:30:00

Спасибо. Но я хочу установить 'приобретенный' на' false' на 'mouseReleased', а не когда мышь покидает холст. Поэтому, если я не выталкиваю мышь с холста, когда я возвращаю мышь назад на холст, объект продолжает перетаскиваться. Есть ли способ сделать это? (Когда я возвращаю мышь на холст, он говорит 'mousePressed == true', независимо от того, выпущен ли он из холста.) –

Как увидеть mouseReleased() событие за пределами холста с помощью processing.js

ответ

Смежные вопросы