Wie erhalte ich Mauskoordinaten relativ zu einem Canvas-Element?

Mauskoordinaten relativ zum Leinwandelement ermitteln

Bei dem Versuch, eine einfache Leinwand-basierte Malanwendung zu erstellen, besteht eine häufige Herausforderung darin, die zu bestimmen Mausposition auf der Leinwand.

Lösung

Ein Ansatz zur Lösung dieses Problems ist die Verwendung der BoundingClientRect-Eigenschaft. Dies kann wie folgt umgesetzt werden:

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  console.log("Left: " + x + " ; Top: " + y + ".");
};</code>

Beispiel

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

Erläuterung

1. Wann die Mausklicks auf das Element clickme, der Onclick-Ereignishandler wird ausgelöst.
2. Die Methode getBoundingClientRect() ruft die Position und Größe des Elements relativ zum Ansichtsfenster ab.
3. Die e.clientX und e.clientY Eigenschaften stellen die absolute Position der Maus innerhalb des Ansichtsfensters dar.
4. Durch Subtrahieren von rect.left und rect.top von diesen absoluten Koordinaten erhalten wir die Position der Maus relativ zur oberen linken Ecke des Elements.

Das obige ist der detaillierte Inhalt vonWie erhalte ich Mauskoordinaten relativ zu einem Canvas-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!