CSS Polarkoordinaten Beispielcode
VorwortDas Projekt stellt Anforderungen an Karten, darunter auch Grafiken zur Satellitenpositionierung, die die Erstellung von Polarkoordinaten erfordern, um die aktuelle Satellitenverteilung auf der Nord- oder Südhalbkugel anzuzeigen. Das Erste, was mir in den Sinn kam, waren die Polarkoordinaten von Echarts. Ich fand ein Beispiel, das einige der Anforderungen erfüllte, aber die Polarkoordinaten wurden mit Canvas gezeichnet und die Satelliten hatten ihre eigenen Nummern, sodass es schwierig war, die Satellitennummer zu erkennen, die jedem Punkt entsprach. Also dachte ich daran, CSS zu verwenden, um Polarkoordinaten zu zeichnen Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden 1. BeispielDas obige Beispiel, das Echarts-Beispiel unten
2. Entwurfsschritte1. Breitengrad Mehrere Divs, abgerundete Ecken setzen 2. Längengrad Mehrere 0,5px-Ränder, erreicht durch Rotation
Zeilen: [
{
ID: 1,
transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)",
Rahmenstil: "durchgezogen",
Rahmenfarbe: "#333",
},
{
ID: 2,
transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)",
Rahmenstil: "gestrichelt",
Rahmenfarbe: "#91cc75",
},
{
ID: 3,
transform: "translateX(-50%) rotateZ(90deg) scaleX(0.4)",
Rahmenstil: "durchgezogen",
Rahmenfarbe: "#333",
},
{
ID: 4,
transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)",
Rahmenstil: "gestrichelt",
Rahmenfarbe: "#91cc75",
},
],
3. Satellit (Punkt) Die Hintergrunddaten enthalten nur Längen- und Breitengrad. Der Breitengrad lässt sich einfach bestimmen und im Verhältnis 90° positionieren. Der Längengrad wird zur Drehung verwendet. Beachten Sie, dass er nicht direkt am Punkt gedreht wird, da sonst nur die Box gedreht wird. Sie müssen zur Drehung ein Div außerhalb des Punkts platzieren. Wenn Sie es verschönern möchten, können Sie den Punkt in die entgegengesetzte Richtung drehen, um einen positiven Nummerierungseffekt zu erzielen. 3. Code-ImplementierungDer Code ist in Vue-Komponenten geschrieben und Satelliten sind die Datenschnittstelle der Polarkoordinaten.
<Vorlage>
<div Klasse="polar">
<div Klasse="polar-main">
<div Klasse="polar-1">
<div Klasse="polar-2">
<div Klasse="polar-3">
<p
v-for="Artikel in Breitengraden"
:Schlüssel="Artikel-ID"
Klasse = "Breitengrad"
:Stil="{
oben: item.location.top,
transformieren: item.location.transform,
}"
>
{{ Artikel.Wert }}
</p>
<div Klasse="Polarzentrum">
<div class="Satelliten">
<div v-for="Artikel in Satelliten" :key="Artikel.name">
<p
v-for="Element in Artikel.Verteilung"
:Schlüssel="ele.id"
Klasse = "Satelliten-Box"
:Stil="{
transformieren: drehen(ele.long),
}"
>
<el-tooltip
Klasse="Artikel"
Effekt="dunkel"
:content="`Längengrad: ${ele.long} Breitengrad: ${ele.lati}`"
Platzierung="Top-Start"
>
<span
Klasse="Satellit"
:Stil="{
Hintergrundfarbe:ele.color,
oben: oben (ele.lati),
transformieren: drehen(-1 * ele.long),
}"
>{{ele.id}}</span>
>
</el-tooltip>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<p
v-for="Element in Zeilen"
:Schlüssel="Artikel-ID"
Klasse="Zeile"
:Stil="{
transformieren: Element.transformieren,
Rahmenstil: Element.Rahmenstil,
Rahmenfarbe: Element.Rahmenfarbe,
}"
></p>
<p
v-for="Element in Längengraden"
:Schlüssel="Artikel-ID"
Klasse = "Längengrad"
:Stil="{
oben: item.location.top,
links: item.location.left,
transformieren: item.location.transform,
}"
>
{{ Artikel.Wert }}
</p>
</div>
<div Klasse="Satellitenname"></div>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Daten() {
zurückkehren {
Zeilen: [
{
ID: 1,
transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)",
Rahmenstil: "durchgezogen",
Rahmenfarbe: "#333",
},
{
ID: 2,
transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)",
Rahmenstil: "gestrichelt",
Rahmenfarbe: "#91cc75",
},
{
ID: 3,
transform: "translateX(-50%) rotateZ(90deg) scaleX(0.4)",
Rahmenstil: "durchgezogen",
Rahmenfarbe: "#333",
},
{
ID: 4,
transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)",
Rahmenstil: "gestrichelt",
Rahmenfarbe: "#91cc75",
},
],
Längengrade:
{
ID: 5,
Wert: "90°",
Standort: {
oben: "50%",
links: "100%",
transform: "translateY(-50%)",
},
},
{
ID: 6,
Wert: "180°",
Standort: {
oben: "100%",
links: "50%",
transform: "übersetzeX(-50%)",
},
},
{
Ich würde: 7,
Wert: "270°",
Standort: {
oben: "50%",
links: "0",
transform: "übersetzeX(-100%) übersetzeY(-50%)",
},
},
{
ID: 8,
Wert: "360°",
Standort: {
oben: "0",
links: "50%",
transform: "übersetzeX(-50%) übersetzeY(-100%)",
},
},
],
Breitengrade:
{
ID: 1,
Wert: "90°",
Standort: {
oben: "50%",
links: "0",
transform: "übersetzeY(-50%) übersetzeX(50%)",
},
},
{
ID: 2,
Wert: "60°",
Standort: {
oben: "0",
links: "0",
transform: "übersetzeY(-50%) übersetzeX(50%)",
},
},
{
ID: 3,
Wert: "30°",
Standort: {
oben: "-50%",
links: "0",
transform: "übersetzeY(-50%) übersetzeX(50%)",
},
},
],
Satelliten:
{
Name: "Unter der Maske",
Verteilung: [
{
ID: "10",
lang: 46.397128,
Breite: 56.397128,
Farbe: "#409eff",
},
{
ID: "08",
lang: 76.397128,
Breite: 32.916527,
Farbe: "#409eff",
},
],
},
{
Name: "Ungesund",
Verteilung: [
{
ID: "25",
lang: 156.397128,
Breite: 62.916527,
Farbe: "#f56c6c",
},
{
ID: "25",
lang: 316.397128,
Breite: 12,916527,
Farbe: "#f56c6c",
},
],
},
{
Name: "Vermisst",
Verteilung: [
{
ID: "07",
lang: 256.397128,
Breite: 22.916527,
Farbe: "#118452",
},
{
ID: "18",
lang: 56.397128,
Breite: 27,916527,
Farbe: "#118452",
},
{
ID: "12",
lang: 66.397128,
Breite: 27,916527,
Farbe: "#118452",
},
{
ID: "16",
lang: 196.397128,
Breite: 67.916527,
Farbe: "#118452",
},
],
},
],
};
},
Methoden: {
oben (lati) {
return ((90 - Breite) / 90) * -90 - 10 + "px";
},
drehen(lang) {
sei z = (lang / 360) * 360;
gibt `rotateZ(${z}deg)` zurück;
},
},
// Filter: {},
};
</Skript>
<Stil scoped lang='scss'>
$polarPiameter: 180px;
.polar-main {
Breite: $polarPiameter;
Höhe: $polarPiameter;
Position: relativ;
P {
Rand: 0;
}
.polar-1 {
Breite: $polarPiameter;
Höhe: $polarPiameter;
Rahmenstil: durchgezogen;
.polar-2 {
Breite: $polarPiameter * 2/3;
Höhe: $polarPiameter * 2/3;
Rahmenstil: gestrichelt;
.polar-3 {
Breite: $polarPiameter/3;
Höhe: $polarPiameter/3;
Rahmenstil: gestrichelt;
.polar-center {
Breite: 1px;
Höhe: 1px;
Hintergrundfarbe: #333;
}
}
}
}
.Linie {
Höhe: $polarPiameter;
Rahmenfarbe rechts: #333;
Breite des rechten Rahmens: 1px;
Rahmen-rechts-Stil: durchgezogen;
Position: absolut;
links: 50%;
Cursor: Zeiger;
}
.Länge,
.Breitengrad {
Höhe: 14px;
Zeilenhöhe: 14px;
Schriftgröße: 12px;
Farbe: #868585;
Position: absolut;
Cursor: Zeiger;
}
}
.polar-1,
.polar-2,
.polar-3,
.polar-center {
Randradius: 50 %;
Position: absolut;
oben: 0;
links: 0;
rechts: 0;
unten: 0;
Rand: automatisch;
Rahmenfarbe: #91cc75;
Rahmenbreite: 1px;
Box-Größe: Rahmenbox;
Cursor: Zeiger;
}
.polar-1:hover {
Rahmenbreite: 2px;
}
.polar-2:hover{
Rahmenbreite: 2px;
}
.Satellitenbox {
Position: absolut;
Breite: 1px;
Höhe: 1px;
Randradius: 50 %;
Hintergrundfarbe: transparent;
.Satellit {
Position: absolut;
links: -10px;
Breite: 20px;
Höhe: 20px;
Zeilenhöhe: 20px;
Textausrichtung: zentriert;
Randradius: 50 %;
Schriftgröße: 14px;
Farbe: #fff;
Cursor: Zeiger;
Z-Index: 999;
Deckkraft: 0,6;
Übergang: 0,6 s;
}
.satellite:hover {
Hintergrundfarbe: #333 !wichtig;
}
}
</Stil>
ZusammenfassenBeispielbild:
Dies ist das Ende dieses Artikels über den Beispielcode für CSS-Polarkoordinaten. Weitere relevante Inhalte zu CSS-Polarkoordinaten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel
>>: HTML+CSS zum Erstellen eines Menüs in der oberen Navigationsleiste
Artikel empfehlen
So stellen Sie Oracle mit Docker auf dem Mac bereit
So stellen Sie Oracle mit Docker auf dem Mac bere...
Detaillierte Erklärung und Zusammenfassung der URL zur Datenbankverbindung
Detaillierte Erklärung und Zusammenfassung der UR...
MySQL-Datenbank-Grundlagen SQL-Fensterfunktion Beispielanalyse-Tutorial
Inhaltsverzeichnis Einführung Einführung Aggregat...
Manuelle Implementierung der Instanceof-Methode in JavaScript
1. Verwendung von instanceof Mit instanceof wird ...
Das WeChat-Applet realisiert eine Links-Rechts-Verknüpfung
In diesem Artikel wird der spezifische Code für d...
Detaillierte Erläuterung der MySQL-Multitabellen-Joinabfrage
Inhaltsverzeichnis Abfrage zum Verbinden mehrerer...
So verwenden Sie vs2019 für die Linux-Remote-Entwicklung
Normalerweise gibt es bei der Entwicklung von Lin...
Implementieren eines Webplayers mit JavaScript
Heute zeige ich Ihnen, wie Sie mit JavaScript ein...
Implementierung der Breakpoint-Wiederaufnahme im Vue-Video-Player
In einem aktuellen Projekt musste ich die Funktio...
JavaScript-Implementierung des Verifizierungscode-Falls
In diesem Artikel wird der spezifische Code für J...
So starten Sie ein Vue-Projekt mit dem M1 Pro-Chip
Inhaltsverzeichnis Einführung Homebrew installier...
So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage
Inhaltsverzeichnis Vorwort 1. Ereignisse und Zwis...
Tutorial zur HTML-Tabellenauszeichnung (16): Attribut für horizontale Titelausrichtung ALIGN
Standardmäßig ist der Tabellentitel horizontal ze...
Zusammenfassung der Dateninteraktion zwischen Docker-Container und Host
Vorwort Beim Einsatz von Docker in einer Produkti...
Detaillierte Erläuterung der Anwendung von Meta-Tags bei der Entwicklung mobiler Plattformen
Jeder kennt das Meta-Tag im Weblayout von Desktop...