So zeichnen Sie in CocosCreator ein cooles Radardiagramm

Vorwort

Radardiagramm wird auch Netzwerkdiagramm, Sternendiagramm oder Spinnennetzdiagramm genannt.

Es handelt sich um eine grafische Methode zur Anzeige multivariater Daten in Form eines zweidimensionalen Diagramms mit drei oder mehr quantitativen Variablen, die auf Achsen dargestellt werden, die vom selben Punkt ausgehen.

Gilt für Variablen, die drei oder mehr Dimensionen anzeigen.

Radardiagramme werden häufig für Datenstatistiken oder -vergleiche verwendet. Sie sind nützlich, um zu sehen, welche Variablen ähnliche Werte haben und ob es Ausreißer zwischen Variablen gibt.

Gleichzeitig werden in vielen Spielen Radardiagramme verwendet, mit denen einige Daten sehr intuitiv angezeigt und verglichen werden können.

Beispielsweise werden die Kampfdaten in King of Glory verwendet:

In diesem Artikel erklärt Pipi, wie man mit der Grafikkomponente in Cocos Creator coole Radardiagramme zeichnet.

Der Originalcode wird gekürzt, um das Leseerlebnis zu gewährleisten.

Radardiagrammkomponente: https://gitee.com/ifaswind/eazax-ccc/blob/master/components/RadarChart.ts

Vorschau

Schauen wir uns zuerst die Wirkung an ~

Online-Vorschau: https://ifaswind.gitee.io/eazax-cases/?case=radarChart

Zwei Daten

Daten vereinfachen

Schnickschnack

Kunst ist Explosion

Allmählich vom Thema abweichen

Text

Grafikkomponente

Bevor wir mit der Erstellung des Radardiagramms beginnen, werfen wir einen Blick auf die Grafikkomponente in der Cocos Creator-Engine.

Die Grafikkomponente erbt von cc.RenderComponent . Mit dieser Komponente können wir Funktionen wie Zeichenbretter und Tabellen implementieren.

Eigenschaften

Dies sind die Eigenschaften, die wir dieses Mal verwenden werden:

• lineCap : Legt den Stil beider Enden einer Linie fest oder gibt ihn zurück (keine, runde Enden oder eckige Enden).
• lineJoin : Legt den Eckenstil (abgeschrägt, abgerundet oder spitz) fest oder gibt ihn zurück, wenn sich zwei Linien schneiden.
• lineWidth : Legt die Dicke des aktuellen Pinsels fest oder gibt sie zurück (die Breite der Linie).
• strokeColor : Legt die aktuelle Pinselfarbe fest oder gibt sie zurück
• fillColor : Legt die Füllfarbe (Farbeimer) fest oder gibt sie zurück

Funktionen

Hier sind die Funktionen, die wir dieses Mal verwenden werden:

• moveTo(x, y) : hebt den Stift an und bewegt ihn an die angegebene Position (erstellt keine Linie)
• lineTo(x, y) : Lege den Stift ab und zeichne eine gerade Linie zur angegebenen Position
• circle(cx, cy, r) : Zeichnet einen Kreis an der angegebenen Position (Kreismittelpunkt)
• close() : Schließt die erstellte Linie (entspricht lineTo(起點) )
• stroke() : Zeichnet eine Linie, die erstellt (aber nicht gezeichnet) wurde (stellen Sie sich die Linie standardmäßig als transparent vor, dieses Verhalten verleiht der Linie eine Farbe)
• fill() : Füllt den Bereich, der von der aktuellen Linie umschlossen wird (wenn die Linie nicht geschlossen ist, wird versucht, das Schließen der Start- und Endpunkte zu „simulieren“)
• clear() : Alles auf dem aktuellen Zeichenbrett löschen

Dokumentation zur Grafikkomponente: http://docs.cocos.com/creator/manual/zh/components/graphics.html?h=graphics

Zeichnen Sie ein Raster

Schauen wir uns zunächst die Merkmale eines Standard-Radardiagramms an:

Hast du es gefunden? Die Grundfunktionen des Radardiagramms sind wie folgt:

• Es gibt 3 oder mehr Achsen
• Die Winkel zwischen den Achsen sind gleich
• Jede Achse sollte neben dem Mittelpunkt mindestens einen Skalenstrich haben.
• Der gleiche Maßstab auf jeder Achse
• Der Abstand zwischen den Skalen ist ebenfalls gleich
• Die Skalen zwischen den Achsen sind zu Gitterlinien verbunden

Achsenwinkel berechnen

Berechnen Sie zuerst den Winkel zwischen den Achsen [ 360 ÷ 軸數], dann berechnen Sie die Winkel aller Achsen:

diese.Winkel = [];
// Winkel zwischen den Achsen const iAngle = 360 / this.axes;
für (lass i = 0; i < this.axes; i++) {
    // Konstanten Winkel berechnen = iAngle * i;
    dies.angles.push(Winkel);
}

Maßstabskoordinaten berechnen

Ein Radardiagramm hat mindestens drei Achsen und jede Achse sollte eine oder mehrere Skalen haben (außer dem Mittelpunkt) :

Daher müssen wir ein zweidimensionales Array verwenden, um die Koordinaten aller Skalen zu speichern, beginnend mit der äußersten Skala (also dem Ende der Achse), damit wir sie beim Zeichnen lesen können:

// Erstellen Sie ein zweidimensionales Array let scalesSet: cc.Vec2[][] = [];
für (sei i = 0; i < Anzahl der Skalen auf der Achse; i++) {
    // Wird verwendet, um die Maßstabskoordinaten auf der aktuellen Ebene zu speichern let scales = [];
    // Position der Skala auf der Achse berechnen const length = Achsenlänge - (Achsenlänge / Anzahl der Skalen auf der Achse * i);
    für (sei j = 0; j < diese.Winkel.Länge; j++) {
        // Winkel in Bogenmaß umrechnen const radian = (Math.PI / 180) * this.angles[j];
        // Berechnen Sie die Koordinaten der Skala relativ zum Mittelpunkt (0, 0) gemäß der trigonometrischen Formel const pos = cc.v2(Länge * Math.cos(Radiant), Länge * Math.sin(Radiant));
        //Array pushen scales.push(pos);
    }
    // Pushen Sie das zweidimensionale Array scalesSet.push(scales);
}

Zeichnen von Achsenlinien und äußeren Gitternetzlinien

Achse

Der Maßstab, der den Mittelpunkt (0, 0) und die äußersten scalesSet[0] verbindet, ist die Achse:

// Alle äußersten Skalen durchlaufen for (let i = 0; i < scalesSet[0].length; i++) {
    // Bewegen Sie den Pinsel zum Mittelpunkt this.graphics.moveTo(0, 0);
    // Eine Linie erstellen this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}

Äußere Gitternetzlinien

Das Verbinden der äußersten scalesSet[0] Skalen auf allen Achsen bildet die äußeren Gitterlinien:

// Bewege den Pinsel zum ersten Punkt this.graphics.moveTo(scalesSet[0][0].x, scalesSet[0][0].y);
für (sei i = 1; i < scalesSet[0].length; i++) {
    // Eine Linie erstellen this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}
// Aktuelle Zeile schließen (äußere Gitternetzlinie)
diese.Grafik.schließen();

Füllen und zeichnen

Hierbei ist zu beachten , dass zuerst die Farbe ausgefüllt und dann die Linien gezeichnet werden , da sonst die Achsen- und Gitternetzlinien blockiert werden:

// Den leeren, von Linien umgebenen Bereich füllen this.graphics.fill();
// Zeichne die erstellten Linien (Achsenlinien und äußere Gitternetzlinien)
dies.graphics.stroke();

Jetzt haben wir also so etwas:

Zeichnen Sie innere Gitterlinien

Wenn die Anzahl der Skalen größer als 1 ist, müssen die inneren Gitterlinien beginnend beim Index 1 des Skalenkoordinatensatzes gezeichnet werden:

// Innere Gitternetzlinien nur zeichnen, wenn die Anzahl der Skalen größer als 1 ist if (scalesSet.length > 1) {
    // Beginnen Sie bei der unteren 1 (der Index 0 ist die äußere Gitterlinie)
    für (lass i = 1; i < scalesSet.length; i++) {
        // Bewege den Pinsel zum ersten Punkt this.graphics.moveTo(scalesSet[i][0].x, scalesSet[i][0].y);
        für (sei j = 1; j < scalesSet[i].length; j++) {
            // Eine Linie erstellen this.graphics.lineTo(scalesSet[i][j].x, scalesSet[i][j].y);
        }
        // Aktuelle Zeile schließen (innere Gitterlinie)
        diese.Grafik.schließen();
    }
    // Zeichne die erstellten Linien (innere Gitterlinien)
    dies.graphics.stroke();
}

Auf diese Weise wird die Basis unseres Radardiagramms gezeichnet:

Zeichnungsdaten

Bevor wir die Logik zum Zeichnen der Linien schreiben, legen wir zunächst die benötigte Datenstruktur fest:

• Numerisches Array (erforderlich, Verhältnis in Dezimalform, mindestens 3 Werte)
• Linienbreite (optional, wenn nicht angegeben, wird der Standardwert verwendet)
• Linienfarbe (optional, wenn nicht angegeben, wird der Standardwert verwendet)
• Füllfarbe (optional, wenn nicht angegeben, wird der Standardwert verwendet)
• Knotenfarbe (optional, wenn nicht angegeben, wird der Standardwert verwendet)

Die spezifische Datenstruktur ist wie folgt (der Exporttyp ist für die externe Verwendung praktisch):

/**
 * Radardiagrammdaten */
Schnittstelle RadarChartData exportieren {

    /** Wert */
    Werte: Zahl[];

    /** Zeilenbreite */
    Linienbreite?: Zahl;

    /** Linienfarbe */
    Linienfarbe?: cc.Farbe;

    /** Füllfarbe */
    Füllfarbe?: cc.Farbe;

    /** Knotenfarbe */
    Farbe verbinden?: cc.Farbe;

}

Plotten der Daten

Das Plotten von Daten ist relativ einfach. Wir müssen nur herausfinden, wo sich die Datenpunkte im Diagramm befinden und die Daten verbinden.

In der draw erhalten wir ein oder mehrere Radardiagrammdaten und zeichnen sie der Reihe nach (⚠️ Warnung vor langem Code):

/**
 * Zeichnungsdaten * @param Daten Daten */
öffentliche Zeichnung(Daten: RadarChartData | RadarChartData[]) {
    // Daten verarbeiten const datas = Array.isArray(data) ? data : [data];

    // Beginne mit dem Zeichnen der Daten für (let i = 0; i < datas.length; i++) {
        // Farbe laden this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
        this.graphics.fillColor = datas[i].fillColor || defaultOptions.fillColor;
        this.graphics.lineWidth = datas[i].lineWidth || defaultOptions.lineWidth;

        // Knotenkoordinaten berechnen let coords = [];
        für (let j = 0; j < this.axes; j++) {
            const Wert = Daten[i].Werte[j] > 1 ? 1 : Daten[i].Werte[j];
            const Länge = Wert * this.Achsenlänge;
            const Radiant = (Math.PI / 180) * dieser.Winkel[j];
            const pos = cc.v2(Länge * Math.cos(Radiant), Länge * Math.sin(Radiant))
            Koordinaten.push(pos);
        }

        // Eine Zeile erstellen this.graphics.moveTo(coords[0].x, coords[0].y);
        für (let j = 1; j < Koordinatenlänge; j++) {
            this.graphics.lineTo(Koordinaten[j].x, Koordinaten[j].y);
        }
        this.graphics.close(); // Zeile schließen // Umschlossenen Bereich füllen this.graphics.fill();
        // Eine Linie zeichnen this.graphics.stroke();

        // Datenknoten zeichnen für (let j = 0; j < coords.length; j++) {
            // Großer Kreis this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
            this.graphics.circle(Koordinaten[j].x, Koordinaten[j].y, 2);
            dies.graphics.stroke();
            // kleiner Kreis this.graphics.strokeColor = datas[i].joinColor || defaultOptions.joinColor;
            this.graphics.circle(Koordinaten[j].x, Koordinaten[j].y, .65);
            dies.graphics.stroke();
        }

    }
}

Bisher ist es uns gelungen, ein brauchbares Radardiagramm zu erstellen:

Aber! Unsere Reise geht zum Sternenmeer! Muss einige Zutaten hinzufügen!

Ein komplett statisches Radardiagramm ist zu langweilig und gewöhnlich. Wir müssen uns etwas einfallen lassen, um es animiert zu gestalten!

Die Werte unserer Radardiagrammdaten liegen in Arrayform vor. Haben Sie darüber nachgedacht, wie Sie diese Werte verschieben können?

Dank des Tween-Easing-Systems von Cocos Creator ist es sehr einfach, komplexe Daten zu animieren!

Wir müssen nur dies, dies und dann das tun. Ist das nicht einfach?

cc.tween unterstützt die Erleichterung aller Eigenschaften aller Objekte

Easing-System: http://docs.cocos.com/creator/manual/zh/scripting/tween.html

Darüber hinaus habe ich auch das Easing-System in „An All-Round Hole Digging Shader“ verwendet, um die Grabbewegung auszuführen ~

Online-Vorschau: https://ifaswind.gitee.io/eazax-cases/?case=newGuide

Meine Idee ist:

1. Speichert die aktuellen Daten in this.curDatas der aktuellen Instanz
2. Wenn neue Daten empfangen werden, verwenden Sie cc.tween um die Eigenschaften von this.curData zu vereinfachen
3. Rufen Sie die draw im update auf, um die Daten in this.curDatas in jedem Frame neu zu zeichnen.

Aktualisiere jeden Frame

// Aktuelle Radardiagrammdaten private curDatas: RadarChartData[] = [];

geschütztes Update() {
    wenn (!this.keepUpdating) return;
    // Aktuelle Daten zeichnen this.draw(this.curDatas);
}

Daten vereinfachen

/**
 * Zeitlupenzeichnung* @param data Zieldaten* @param duration Dauer der Animation*/
öffentlich zu (Daten: RadarChartData | RadarChartData[], Dauer: Zahl) {
    // Wiederholte Anrufe verarbeiten this.unscheduleAllCallbacks();
    
    // Ein einzelnes Datenstück packen const datas = Array.isArray(data) ? data : [data];

    // Bei jedem Frame-Update einschalten this.keepUpdating = true;

    // Bewegen!
    für (lass i = 0; i < Daten.Länge; i++) {
        // Die Werte animieren!
        // Durchlaufe alle Werte in den Daten und verschiebe sie einzeln!
        für (let j = 0; j < this.curDatas[i].values.length; j++) {
            // Begrenzen Sie den Maximalwert auf 1 (also 100 %)
            const Wert = Daten[i].Werte[j] > 1 ? 1 : Daten[i].Werte[j];
            cc.tween(diese.curDatas[i].values)
                .to(Dauer, { [j]: Wert })
                .Start();
        }
        // Stil in Bewegung!
        // Wenn nicht angegeben, wird der Originalstil verwendet!
        cc.tween(diese.curDatas[i])
            .to(Dauer, {
                Zeilenbreite: datas[i].lineWidth || this.curDatas[i].lineWidth,
                Zeilenfarbe: datas[i].lineColor || this.curDatas[i].lineColor,
                Füllfarbe: datas[i].fillColor || this.curDatas[i].fillColor,
                JoinColor: Daten[i].JoinColor || diese.curDatas[i].JoinColor
            })
            .Start();
    }

    this.scheduleOnce(() => {
        // Jedes Frame-Update deaktivieren this.keepUpdating = false;
    }, Dauer);
}

Sowohl der Wert als auch der Stil sind animiert:

Radardiagrammkomponente: https://gitee.com/ifaswind/eazax-ccc/blob/master/components/RadarChart.ts

Oben finden Sie Einzelheiten zum Zeichnen eines coolen Radardiagramms in CocosCreator. Weitere Informationen zum Zeichnen eines Radardiagramms in CocosCreator finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!