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
Vue implementiert Card-Flip-Karussellanzeige
Karussellanzeige der Vue-Karte beim Umschalten de...
Häufige Probleme und Lösungen beim Erstellen von MySQL MGR
Inhaltsverzeichnis 01 Häufige Fehler 1 02 Häufige...
Installationsschritte und Tutorial zur grundlegenden Verwendung von MySQL 8.0.12 unter Windows
In diesem Artikel werden die Installationsschritt...
Eine vorläufige Studie zu JSBridge in Javascript
Inhaltsverzeichnis Der Ursprung von JSBridge Das ...
Ein kurzer Vortrag über die halbsynchrone MySQL-Replikation
Einführung MySQL erreicht eine hohe Verfügbarkeit...
Beispielcode zur Implementierung des sekundären Verknüpfungseffekts der Dropdown-Box in Vue
1. Ergebnisse erzielen 2. Vom Backend zurückgegeb...
Erstellen Sie eine virtuelle Maschine und installieren Sie das Betriebssystem Redhat Linux auf VMware (grafisches Tutorial)
So erstellen Sie eine virtuelle Maschine auf VMwa...
Vue3 kapselt die Textskelett-Effektkomponente der Seitennavigation
Vue3-Projektkapselung Seitennavigation Textskelet...
MySQL-Limit-Leistungsanalyse und -Optimierung
1. Fazit Syntax: Limit-Offset, Zeilen Schlussfolg...
Installation der Dekomprimierungsversion von MySQL 5.7.21 Installation des Navicat-Datenbankbetriebstools
Installation der MySQL-Dekomprimierungsversion un...
Einführung von ECharts in das Vue-Projekt
Inhaltsverzeichnis 1. Installation 2. Einleitung ...
Der HTML 5-Entwurf wurde kein formeller Standard
<br />Gestern habe ich beim W3C gesehen, das...
Einführung in die CSS-Technologie zur automatischen Farbanpassung von Vordergrund und Hintergrund (Demo)
1. Vorschau des Farbabstimmungseffekts Wie im GIF...
Verwenden Sie CSS3s webkit-box-reflect geschickt, um verschiedene dynamische Effekte zu erzielen
In einem Artikel vor langer Zeit habe ich über di...
So verwenden Sie die Debouce-Anti-Shake-Funktion in Vue
Inhaltsverzeichnis 1. Anti-Shake-Funktion 2. Verw...