Comment utiliser H5 Canvas pour implémenter un graphique dynamique 3D

Cette fois, je vais vous montrer comment utiliser H5 Canvas pour réaliser un graphique dynamique 3D. Quelles sont les précautions pour utiliser H5 Canvas pour réaliser un graphique dynamique 3D. est un cas pratique. Jetons un coup d’oeil.

J'ai découvert qu'il existe de nombreux graphiques utilisés dans la gestion de réseaux SCADA industriels ou de télécommunications. Bien que la plupart des gens utilisent des graphiques électroniques pour la production de graphiques, ils sont très faciles à utiliser, mais parfois nous ne pouvons pas appeler d'autres plug-ins. À l’heure actuelle, vous devez écrire vous-même ces magnifiques graphiques, mais les graphiques ne peuvent pas être rendus beaux facilement. . . J'ai vu un graphique en vente sur un site Web et je l'ai trouvé plutôt bien, alors j'ai utilisé HT for Web 3D pour faire un petit exemple C'était assez simple et joli, haha~

Cet exemple a été implémenté en utilisant. HT C'est vraiment simple. Créez d'abord un modèle de données DM de base en HT, puis ajoutez le modèle de données au composant 3D g3d, puis définissez la perspective en 3D et ajoutez le composant 3D à l'élément body :

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

L'étape suivante consiste à créer ces cinq barres de graphique. Mon idée est la suivante : il y a un nœud dans le calque interne, un nœud transparent dans le calque externe et un texte 3D en bas. pour afficher le pourcentage actuel.

Il est très simple de créer des nœuds dans la couche interne. J'utilise directement le ht.Node encapsulé par HT pour créer un nouvel objet nœud, puis je définis le style du nœud via la méthode node.s. :

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);

Ce qui doit être expliqué, c'est le réglage du style 'shape3d':cylinderModel. Tout d'abord, l'attribut shape3d spécifie l'effet d'icône. affiché sous forme de modèle 3D. cylinderModel est utilisé. Pour un modèle 3D personnalisé par HT, veuillez vous référer au manuel de modélisation HT pour Web :

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

Puis un attribut qui change dynamiquement. myHeight est défini. Dans HT, le nœud La méthode .a est réservée aux utilisateurs pour stocker des données commerciales. Nous pouvons ajouter n'importe quel nombre d'attributs ici.

La prochaine chose que nous voulons créer est un nœud transparent externe. Ce nœud est essentiellement construit de la même manière que le nœud interne, sauf qu'il a un paramètre de style un peu plus « transparent » :

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);

Définissez d'abord 'shape3d.transparent' sur true, puis définissez la transparence de 'shape3d.opacity'.

Le dernier est le texte 3D. Pour restituer le texte 3D, vous avez besoin d'une police de caractères au format json, puis utilisez ht.Default.loadFontFace pour charger la police au format json dans la mémoire. Pour plus de détails, veuillez vous référer à. le manuel HT for Web 3D :

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
    });
});

Parce que la police de caractères que nous utilisons est dessinée de manière à ce qu'un mot soit composé d'innombrables triangles , ce qui prendra beaucoup de mémoire, j'ai donc mis La finesse des courbes des graphiques est ajustée plus bas, mais c'est quand même très clair Si vous pouvez trouver une police avec de meilleures performances, vous pouvez l'utiliser et me le faire savoir. . Nous n'avons pas trouvé de police qui occupe moins de mémoire.

Enfin, pour changer dynamiquement le graphique à barres dans le graphique, nous devons définir des animations et mettre à jour les valeurs de la police 3D de manière synchrone :

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);

Ici, mes attributs personnalisés "myHeight" joue un rôle décisif. J'utilise cet attribut pour stocker des variables, et je peux modifier la valeur de la variable à volonté, afin que l'effet de liaison dynamique puisse être obtenu.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

À propos des problèmes d'adaptation des pages HTML5 sur iPhoneX

Comment définir le focus pour les éléments HTML

Comment utiliser l'attribut title du HTML pour afficher du texte au survol de la souris

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!