Absolute Mouse Positionen über die Verarbeitung

Question

Dies ist eine Kopie Paste eines Post i über die Verarbeitung Forum gemacht (wo ich keine Antwort bisher bekommen haben) dachte, ich könnte genauso gut versuchen hier.

Die Verarbeitung ist eine sehr coole Art, Sachen zu zeichnen, die speziell für die Web-Seiten. Nur als Referenz http://processing.org

Hey, ich auf die Verarbeitung bin neu, ich bin mit ihm eine gratloses Website zu machen, also bin ich so ziemlich auf einer Leinwand zu ziehen.

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

Also mein Problem ist, das ist die Leinwand auf einer zentrierten Web-Seite betrieben wird, sobald der Browser Größe verändert, so auch die Koordinaten der Maus innerhalb der Leinwand.

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

Damit ist das Problem, ich weiß nicht, wie viele ppl hier in Stackoverflow mit erlebt, aber ich hoffe, dass mir jemand helfen könnte:)

dank der Stapelüberlauf-Community im Voraus.

Answer 1

Ich bin mit der Verarbeitung nicht vertraut, kann aber nicht einfach den Unterschied zwischen der linken oberen Ecke des Browser-Fensters und der oberen linken Ecke der Leinwand berechnen?
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 so etwas wie:

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

Sie sollten #canvas mit einem CSS-Selektor für die Leinwand Bereich ersetzen.

Beachten Sie auch, dass Fenster das globale Objekt ist, wie ich es hier verwenden, um mit möglichem Umfang Problemen zu befassen.

Answer 2

Die Verarbeitung ist wirklich nicht für die Web-Seiten zu schaffen .. Es ist schlechter als Blitz für Websites (Verarbeitung Skizzen sind Java-Applets - Java weniger verbreitet zu sein, weit mehr ressourcenintensiv und langsam zu laden .. )

Das heißt, es ist processing.js , ein Javascript-Port der Verarbeitung.

Das Schlange Beispiel greift auf die Maus. Da es Javascript ist, und die Leinwand ist ein div, sollten die Koordinaten ein bisschen mehr gesund als Java (was in einem eigenen VM Welt lebt), aber ich könnte falsch sein ..

Answer 3

Sie können den Benutzer auffordern, das System zu kalibrieren, vor dem Gebrauch. Es ist nicht vollständig eine Antwort auf die Frage, sondern eine sollution für das Problem.

Sie einfach einen roten Punkt in der Mitte des Bildschirms, links oben ziehen und bottem rechts. Bitten Sie den Benutzer auf sie klicken, und die Koordinaten abzurufen. Dann wissen Sie, wo die Ecken des Bildschirms sind.