So verwenden Sie H5 Canvas zum Implementieren eines dynamischen 3D-Diagramms

Dieses Mal zeige ich Ihnen, wie Sie H5 Canvas verwenden, um ein dynamisches 3D-Diagramm zu erstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von H5 Canvas, um ein dynamisches 3D-Diagramm zu erstellen? ist ein praktischer Fall.

Ich habe festgestellt, dass in der industriellen SCADA- oder Telekommunikationsnetzwerkverwaltung viele Diagramme verwendet werden. Obwohl die meisten Leute Echarts für die Diagrammerstellung verwenden, ist es wirklich einfach zu verwenden, aber manchmal können wir andere Plug-Ins nicht aufrufen. Zu diesem Zeitpunkt müssen Sie diese schönen Diagramme selbst schreiben, aber Diagramme können nicht einfach schön gemacht werden. . . Ich habe auf einer Website ein Diagramm zum Verkauf gesehen und fand es ziemlich gut, also habe ich HT für Web 3D verwendet, um ein kleines Beispiel zu erstellen, haha~

Dieses Beispiel wurde mit implementiert HT Es ist wirklich einfach. Erstellen Sie zunächst ein grundlegendes DM-Datenmodell in HT, fügen Sie dann das Datenmodell zur g3d-3D-Komponente hinzu, legen Sie dann die Perspektive in 3D fest und fügen Sie die 3D-Komponente zum Körperelement hinzu:

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
g3d.setEye(0, 185, 300);
g3d.addToDOM();
g3d.getView().style.background = '#000';

Der nächste Schritt besteht darin, diese fünf Diagrammbalken zu erstellen: Es gibt einen Knoten in der inneren Ebene, einen transparenten Knoten in der äußeren Ebene und einen 3D-Text am unteren Rand um den aktuellen Prozentsatz anzuzeigen.

Es ist sehr einfach, Knoten in der inneren Ebene zu erstellen. Ich verwende den von HT gekapselten ht.Node direkt, um ein neues Knotenobjekt zu erstellen, und lege dann den Stil des Knotenknotens über die Methode node.s fest :

var node = new ht.Node();
node.s({
    'shape3d': cylinderModel,
    'shape3d.color': color,
    '3d.movable': false
});
node.a({
    'myHeight': s3[1],
});
node.p3([p3[0], s3[1]/2, p3[2]]);
node.s3(s3);
dm.add(node);

Was erklärt werden sollte, ist die Einstellung des Stils „shape3d“:zylinderModell Zunächst gibt das Shape3d-Attribut den Symboleffekt an Wird als 3D-Modell angezeigt. Für ein von HT angepasstes 3D-Modell lesen Sie bitte das HT-Handbuch zur Webmodellierung:

cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);

Dann ein sich dynamisch änderndes Attribut In HT ist die Methode „.a“ ​​für Benutzer zum Speichern von Geschäftsdaten reserviert. Wir können hier eine beliebige Anzahl von Attributen hinzufügen.

Als nächstes wollen wir einen externen transparenten Knoten erstellen. Dieser Knoten ist grundsätzlich auf die gleiche Weise aufgebaut wie der interne Knoten, außer dass er eine etwas „transparentere“ Stileinstellung hat:

var cNode = new ht.Node();
cNode.s({
    'shape3d': cylinderModel,
    'shape3d.transparent': true,
    'shape3d.opacity': 0.2,   
    'label.color': '#fff',
    '3d.movable': false
});
cNode.p3([p3[0], 50, p3[2]]);
cNode.s3(20, 100, 20);
dm.add(cNode);

Setzen Sie zuerst „shape3d.transparent“ auf „true“ und dann die Transparenz von „shape3d.opacity“.

Um 3D-Text darzustellen, benötigen Sie eine Schriftart im JSON-Format und verwenden dann ht.Default.loadFontFace, um die Schriftart im JSON-Format in den Speicher zu laden das HT for Web 3D-Handbuch:

ht.Default.loadFontFace('./wenquanyi.json', function(){
    //......
    var text = new ht.Node();
    text.s3([5, 5, 5]);
    text.p3(cNode.p3()[0]-5, -10, 0);
    dm.add(text);
    text.s({
        'shape3d' : 'text',
    'shape3d.text': node.a('myHeight')+'%',
    'shape3d.text.curveSegments': 1,
    '3d.movable': false
    });
});

Weil die von uns verwendete Schriftart so gezeichnet ist, dass ein Wort aus unzähligen Dreiecken besteht , was viel Speicher beanspruchen wird, also habe ich die Feinheit der Kurven der Grafik verringert, aber es ist immer noch sehr klar. Wenn Sie eine Schriftart mit besserer Leistung finden, können Sie sie verwenden und mir Bescheid geben . Wir haben keine Schriftart gefunden, die weniger Speicher beansprucht.

Um schließlich das Säulendiagramm im Diagramm dynamisch zu ändern, müssen wir Animationen festlegen und die 3D-Schriftwerte synchron aktualisieren:

setInterval(function(){
    if(node.a(&#39;myHeight&#39;) < 100){
        node.a(&#39;myHeight&#39;, (node.getAttr(&#39;myHeight&#39;)+1));
    node.s3(20, node.a(&#39;myHeight&#39;), 20);
    node.p3(p3[0], node.a(&#39;myHeight&#39;)/2, p3[2]);
    }else{
        node.a(&#39;myHeight&#39;, 0);
    node.s3([20, 0, 20]);
    node.p3([p3[0], 0, p3[2]]);
    }
    if (text) text.s(&#39;shape3d.text&#39;, node.a(&#39;myHeight&#39;)+&#39;%&#39;);
}, 100);

Hier meine benutzerdefinierten Attribute „myHeight“ Ich verwende dieses Attribut zum Speichern von Variablen und kann den Wert der Variablen nach Belieben ändern, sodass der Effekt der dynamischen Bindung erzielt werden kann.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Über die Anpassung von HTML5-Seiten auf dem iPhoneX

So legen Sie den Fokus für HTML-Elemente fest

So verwenden Sie das Titelattribut von HTML, um Text beim Bewegen der Maus anzuzeigen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie H5 Canvas zum Implementieren eines dynamischen 3D-Diagramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!