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
Aktivierungscode und KMS-Installationsschlüssel für Windows Server 2019 (Volume License Edition, GVLK)
Ich habe vor, die internen Dokumente des Unterneh...
JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion
In diesem Artikel wird der spezifische JavaScript...
Webdesign-Tutorial (7): Verbesserung der Webdesign-Effizienz
<br />Vorheriger Artikel: Webdesign-Tutorial...
Detaillierte Erklärung des Unterschieds zwischen temporärer MySQL-Tabelle und Partitionstabelle
Temporäre Tabellen und Speichertabellen Eine Spei...
So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage
Dieses Mal verwenden wir HTML+CSS-Layout, um eine...
Lösung für das Problem, dass Mixin in SCSS nicht funktioniert (der Browser kann es nicht kompilieren)
Mixin-Methode: Der Browser kann nicht kompilieren...
Eine kurze Analyse der MySQL PHP-Syntax
Schauen wir uns zunächst die grundlegende Syntax ...
ICO-Spiegelcode zu HTML hinzufügen (favicon.ico wird im Stammverzeichnis abgelegt)
Code: Code kopieren Der Code lautet wie folgt: <...
Verwenden einer MySQL-Datenbank im Docker, um LAN-Zugriff zu erhalten
1. Holen Sie sich das MySQL-Image Docker-Pull MyS...
Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL
Inhaltsverzeichnis 1.1Tinyint-Typbeschreibung 1.2...
MySQL slow_log-Tabelle kann nicht in InnoDB-Engine geändert werden – detaillierte Erklärung
Hintergrund Das Abrufen des langsamen Abfrageprot...
Installieren Sie .NET 6.0 im CentOS-System mithilfe eines Cloud-Servers
.NET SDK-Download-Link https://dotnet.microsoft.c...
Zusammenfassung des Wissens zu MySQL-Sperren
Sperren in MySQL Sperren sind ein Mittel, um Ress...
Detaillierte Erläuterung von drei Beziehungsbeispielen für MySQL-Fremdschlüssel
Dieser Artikel beschreibt anhand von Beispielen d...
Informationen zur Verarbeitung des adaptiven Layouts (mit Float und negativem Rand)
Adaptives Layout wird in praktischen Anwendungen i...