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
Inhaltsverzeichnis Was ist Vuex? Fünf Eigenschaft...
Manche Leute sagen, dass Werbung machen wie ein Me...
Legen Sie den Stil der Tabelle fest: „table-layout...
Inhaltsverzeichnis Vorwort Was ist VueUse Einfach...
Überblick Was ist Hafen? Das englische Wort bedeu...
Die Anzeige ohne Effektbild ist nur leeres Gerede...
Inhaltsverzeichnis Installieren: 1. Grundlegende ...
Im vorherigen Artikel haben wir über MySQL-Transa...
Vorwort Der Ursprung ist Frage 1: Wenn Ihre Umask...
Häufig gestellte Fragen zu benutzerdefinierten Bi...
In diesem Artikel wird der spezifische Code der m...
Einführung in CentOS CentOS ist eine Linux-Distri...
Problembeschreibung Da wir uns nicht lange bei Za...
Fügen Sie der Webseite ein HTML-Steuerelement für...
Was ist eine Webseite? Die Seite, die nach dem HT...