Absolute Mauspositionen bei der Verarbeitung

Question

Dies ist ein Copy-Paste eines Beitrags, den ich im Processing-Forum gemacht habe (wo ich bisher keine Antwort bekommen habe), und ich dachte, ich könnte es auch hier versuchen.

Processing ist eine sehr coole Art, Dinge zu zeichnen, besonders für Webseiten. Nur als Referenz http://processing.org

Hey, ich bin neu in Processing, ich benutze es, um eine blitzlose Website zu machen, also bin ich ziemlich viel Zeichnung auf einer Leinwand.

Ich habe ein Problem mit der Mausposition, obwohl die Koordinaten beim Zeichnen die obere linke Ecke als Position 0,0 betrachten; die tatsächlichen Mauskoordinaten betrachten 0,0 als die obere linke Ecke des Browserfensters.

Mein Problem ist also, dass die Leinwand auf einer zentrierten Webseite läuft, wenn der Browser die Größe ändert, ändern sich auch die Koordinaten der Maus innerhalb der Leinwand.

Gibt es eine Möglichkeit, die Koordinaten der Maus relativ zur Leinwand zu setzen? So dass ich die Größe meines Browserfensters ändern kann und die linke obere Ecke immer 0,0 für die Mauskoordinaten sein wird?

Also das ist das Problem, ich weiß nicht, wie viele ppl hier in Stackoverflow mit diesem erfahren sind, aber ich hoffe, jemand könnte mir helfen:)

Dank an die Stack-Overflow-Community im Voraus.

Answer 1

Ich kenne mich mit Processing nicht aus, aber kann man nicht einfach die Differenz zwischen der oberen linken Ecke des Browserfensters und der oberen linken Ecke der Leinwand berechnen?
d.h. (unter Verwendung von jquery)

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

Dann können Sie etwas tun wie:

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

Ersetzen Sie #canvas durch einen css-Selektor für Ihren Canvas-Bereich.

Beachten Sie auch, dass window das globale Objekt ist, das ich hier verwende, um mögliche Probleme mit dem Geltungsbereich zu lösen.

Answer 2

Processing ist eigentlich nicht für die Erstellung von Webseiten gedacht. Es ist schlechter als Flash für Websites (Verarbeitungsskizzen sind Java-Applets - Java ist weniger verbreitet, viel ressourcenintensiver und langsam zu laden )

Das heißt, es gibt processing.js , eine Javascript-Portierung von Processing.

Le site Schlangenbeispiel greift auf die Maus zu. Da es sich um Javascript handelt, und die Leinwand ein div Die Koordinaten sollten ein bisschen vernünftiger sein als Java (das in seiner eigenen VM-Welt lebt), aber ich könnte mich irren.

Answer 3

Sie können den Benutzer auffordern, das System vor der Verwendung zu kalibrieren. Das ist keine vollständige Antwort auf die Frage, aber eine Lösung für das Problem.

Zeichnen Sie einfach einen roten Punkt in der Mitte des Bildschirms, oben links und unten rechts. Bitten Sie den Benutzer, darauf zu klicken, und rufen Sie die Koordinaten ab. Dann wissen Sie, wo die Ecken des Bildschirms sind.