Koordinatensysteme
Wenn der Standort eines Pixels in einem Grafik-Kontext angegeben wird (ähnlich wie bei der Angabe von Koordinatensystemen in der Algebra), wird seine Position relativ zu einem festen Punkt im Kontext definiert. Dieser feste Punkt wird der Ursprung genannt. Die Position wird als Anzahl der Pixel angegeben, die vom Ursprung entlang jeder Dimension des Kontextes versetzt sind.
Dieser Leitfaden beschreibt die standardmäßigen Koordinatensysteme, die vom CSS-Objektmodell verwendet werden. Diese unterscheiden sich im Allgemeinen nur darin, wo sich ihr Ursprung befindet.
Dimensionen
In den Koordinatensystemen, die von Webtechnologien verwendet werden, wird der horizontale Versatz als x-Koordinate bezeichnet, wobei ein negativer Wert eine Position links vom Ursprung und ein positiver Wert eine Position rechts vom Ursprung anzeigt. Die y-Koordinate gibt den vertikalen Versatz an, wobei ein negativer Wert oberhalb des Ursprungs und ein positiver Wert unterhalb des Ursprungs liegt.
Im Web ist der Standardursprung die obere-linke Ecke eines bestimmten Kontextes (wobei positive y-Koordinatenwerte unterhalb des Ursprungs liegen). Beachten Sie, dass dies im Gegensatz zu den meisten mathematischen Modellen steht, bei denen der Ursprung in der unteren-linken Ecke liegt, wobei positive y-Koordinatenwerte oberhalb des Ursprungs liegen.
Bei der Verwendung der dritten Dimension zur Schichtung von Objekten von vorne nach hinten verwenden wir die z-Achse. Die z-Achse verläuft vom Betrachter zur Oberfläche des Bildschirms. Der CSS-Wert der Eigenschaft z-index beeinflusst, wo positionierte Elemente auf dieser Achse sitzen, was den Effekt hat, sich vom Betrachter weg oder auf ihn zu zu bewegen.
Hinweis:
Es ist möglich, die Definitionen und Orientierungen dieser Koordinatensysteme mithilfe von CSS-Eigenschaften wie transform zu ändern. Für den Moment sprechen wir jedoch nur über das standardmäßige Koordinatensystem.
Standard CSSOM-Koordinatensysteme
Es gibt vier standardmäßige Koordinatensysteme, die vom CSS-Objektmodell verwendet werden. Um die Hauptsysteme zu visualisieren, zeigt das folgende Diagramm einen Monitor mit einem Browser-Fenster, das Inhalte enthält, die außerhalb des Viewports gescrollt wurden. Seitliche Inhalte, die außerhalb des Viewports gescrollt sind, werden als halbtransparent über dem Browser-Fenster angezeigt, um zu zeigen, wo der Ursprung für "Seiten"-Koordinaten wäre. Die Ursprünge der Koordinatensysteme "client", "page" und "viewport" sind hervorgehoben.
Offset
Koordinaten, die mit dem "Offset"-Modell angegeben werden, verwenden die obere linke Ecke des zu untersuchenden Elements oder auf dem ein Ereignis stattgefunden hat.
Zum Beispiel, wenn ein Mausereignis auftritt, wird die Position der Maus, wie sie in den offsetX und offsetY-Eigenschaften des Ereignisses angegeben ist, relativ zur oberen linken Ecke des Knotens angegeben, an den das Ereignis geliefert wurde. Der Ursprung ist um den Paddingrand, den Rand zwischen dem Paddingbereich und dem Randbereich, eingerückt.
Viewport
Das "Viewport" (oder "Client")-Koordinatensystem verwendet als seinen Ursprung die obere linke Ecke des Viewports oder des Browsing-Kontextes, in dem das Ereignis aufgetreten ist. Dies ist der gesamte Sichtbereich, in dem das Dokument präsentiert wird.
Auf einem Desktop-Computer geben beispielsweise die MouseEvent.clientX und MouseEvent.clientY-Eigenschaften die Position des Mauszeigers in dem Moment an, in dem das Ereignis aufgetreten ist, relativ zur oberen linken Ecke des window an. Bei Verwendung eines Stifts oder Zeigers beziehen sich die Touch.clientX und Touch.clientY-Koordinaten in einem Touch-Ereignis auf denselben Ursprung.
Die obere linke Ecke des Fensters ist immer (0, 0), unabhängig vom Inhalt des Dokuments oder jeglichem Scrollen, das möglicherweise durchgeführt wurde. Mit anderen Worten, das Scrollen des Dokuments ändert die Viewport-Koordinaten einer gegebenen Position innerhalb des Dokuments.
Page
Das "Seiten"-Koordinatensystem gibt die Position eines Pixels relativ zur oberen linken Ecke des gesamten gerenderten Document an. Das bedeutet, dass ein Punkt in einem Element innerhalb des Dokuments dieselben Koordinaten hat, nachdem der Benutzer horizontal oder vertikal im Dokument gescrollt hat, es sei denn, das Element bewegt sich durch Layoutänderungen.
Die pageX und pageY-Eigenschaften von Mausereignissen bieten die Position der Maus zum Zeitpunkt, als das Ereignis erzeugt wurde, relativ zur oberen linken Ecke des Dokuments. Die Touch.pageX und Touch.pageY-Koordinaten in einem Touch-Ereignis sind relativ zu demselben Ursprung.
Screen
Schließlich kommen wir zum "Bildschirm"-Modell, wobei der Ursprung die obere linke Ecke des Benutzerbildschirms ist. Jeder Punkt in diesem Koordinatensystem repräsentiert ein einzelnes logisches Pixel, und daher erhöhen und verringern sich die Werte um ganzzahlige Werte entlang jeder Achse. Die Position eines bestimmten Punkts innerhalb eines Dokuments ändert sich, wenn z. B. das umgebende Fenster verschoben wird oder wenn sich die Bildschirmgeometrie des Benutzers ändert (durch Ändern der Bildschirmauflösung oder durch Hinzufügen oder Entfernen von Monitoren zu ihrem System).
Die MouseEvent.screenX und MouseEvent.screenY-Eigenschaften geben die Koordinaten der Position eines Mausereignisses relativ zum Ursprung des Bildschirms an. Die Touch.screenX und Touch.screenY-Koordinaten in einem Touch-Ereignis sind relativ zu demselben Ursprung.
Beispiel
Schauen wir uns ein Beispiel an, das Mauskoordinaten in einem Element protokolliert. Jedes Mal, wenn die Maus das innere Feld betritt, sich darin bewegt oder es verlässt, werden die Ereignisse protokolliert, indem die aktuellen Mauskoordinaten in jedem der vier verfügbaren Systeme aufgezeichnet werden.
JavaScript
Für das JavaScript richtet der Code die Ereignis-Handler im inneren Feld ein, indem addEventListener() für jeden der Typen mouseenter, mousemove und mouseleave aufgerufen wird. Für jedes der Ereignisse rufen wir die Funktion setCoords() auf, die den inneren Text des <p>-Elements mit den Koordinaten für jedes System festlegt.
const log = document.querySelector(".log");
const inner = document.querySelector(".inner");
function setCoords(e) {
log.innerText = `
Offset X/Y: ${e.offsetX}, ${e.offsetY}
Viewport X/Y: ${e.clientX}, ${e.clientY}
Page X/Y: ${e.pageX}, ${e.pageY}
Screen X/Y: ${e.screenX}, ${e.screenY}`;
}
inner.addEventListener("mousemove", setCoords);
inner.addEventListener("mouseenter", setCoords);
inner.addEventListener("mouseleave", setCoords);
HTML
Das HTML enthält ein <p> mit der Klasse "log", das die Daten aus den Mausereignissen anzeigt.
<div class="outer">
<div class="inner">
<p class="log">Mouse over this section to view coordinates</p>
</div>
</div>
CSS
Die Klasse "outer" für das umgebende Feld ist absichtlich zu breit, um die Effekte der Mauskoordinaten zu sehen, wenn der Inhalt gescrollt wird. Der "inner"-Absatz ist, wo Mausereignisse verfolgt und protokolliert werden.
.outer {
width: 1000px;
}
.inner {
font-family: monospace;
position: relative;
width: 500px;
height: 150px;
top: 25px;
left: 100px;
background-color: darkblue;
color: white;
cursor: crosshair;
user-select: none;
}
.log {
position: relative;
width: 100%;
text-align: center;
}
Resultat
Hier können Sie die Ergebnisse in Aktion sehen. Während Sie mit der Maus in der Nähe des blauen Kastens navigieren, beobachten Sie, wie sich die Werte der X- und Y-Koordinaten der Maus in den verschiedenen Koordinatensystemen ändern.
Siehe auch
-
Verwendung von CSS-Transformationen: wie man ein Koordinatensystem ändert
-
Koordinaten eines
MouseEvent: -
Koordinaten eines
Touch: