HTML5画布上实现3 d动态图图表的案例

　　

HTML5画布上实现3 d动态图图表的案例?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易做不成美丽的…看到有一个网站上在卖的图表,感觉挺好看的,就用HT Web 3 d做了一个小例子,挺简单的,也挺好看的,哈哈~

动态效果图如下:

HTML5画布上实现3 d动态图图表的案例

这个例子用HT实现真的很容易,首先创建一个HT中最基础的dm数据模型,然后将数据模型添加进g3d 3 d组件中,再设置3 d中的视角并把3 d组件添加进身体元素中:

 dm=new ht.DataModel ();
　　g3d=new ht.graph4d.Graph4dView (dm);
　　g3d。setEye (0、185、300);
　　g3d.addToDOM ();
　　.style g3d.getView ()。背景=& # 39;# 000 & # 39;;

接着就是造这五个图表图表条了,我的思路是这样的,里层有一个节点,外层一个透明的节点,底部一个3 d的文字显示当前的百分比。

里层的节点非常容易,我直接用的HT封装的HT。节点创建了一个新的节点对象,然后通过节点。年代方法来设置节点节点的样式:

=new ht.Node var节点();
　　node.s ({
　　& # 39;shape3d& # 39;: cylinderModel,
　　& # 39;shape3d.color& # 39;:颜色,
　　& # 39;3 d.movable& # 39;:假的
　　});
　　node.a ({
　　& # 39;myHeight& # 39;: s3 [1],
　　});
　　节点。s3 p3 ([p3 [0], [1]/2, p3 [2]]);
　　node.s3 (s3);
　　dm.add(节点);

其中要说明的是,& # 39;shape3d& # 39;: cylinderModel这个样式的设置,首先,shape3d属性指定显示为3 d模型的图标效果,cylinderModel是用HT自定义的一个3 d模型,可参考HT Web建模手册:

 cylinderModel=ht.Default。createCylinderModel(1000, 0, 1000,假的,假的,真的,真的),

然后设置了一个动态变化的属性myHeight,在HT中,节点。一方法是预留给用户存储业务数据的,我们可以在这边添加任意多个属性。

接下来我们要创建的是外部的透明节点,这个节点的构造方式基本上与内部节点相同,就是多了一点“透明”的样式设置:

 var cNode=new ht.Node ();
　　cNode.s ({
　　& # 39;shape3d& # 39;: cylinderModel,
　　& # 39;shape3d.transparent& # 39;:没错,
　　& # 39;shape3d.opacity& # 39;: 0.2,
　　& # 39;label.color& # 39;: & # 39; # fff& # 39;
　　& # 39;3 d.movable& # 39;:假的
　　});
　　cNode。现年50岁的p3 ([p3 [0] p3 [2]]);
　　cNode。s3 (100, 20);
　　dm.add (cNode);

要先设置的shape3d。透明的为真,再设置的shape3d。不透明的透明度。

最后是3 d文字,呈现3 d文字需要一个json格式的字体字体,然后通过ht.Default。loadFontFace来加载json格式的字体到内存中,详情请参考HT Web 3 d手册:

ht.Default.loadFontFace (& # 39;。/wenquanyi.json& # 39;,函数(){//? 　　var=new ht.Node文本(); 　　文本。s3 ([5, 5, 5]); 　　text.p3 (cNode.p3 () [0] 5, -10 0); 　　dm.add(文本); 　　类({ 　　& # 39;shape3d& # 39;:& # 39;文本# 39; 　　& # 39;shape3d.text& # 39;: node.a (& # 39; myHeight& # 39;) + & # 39; % & # 39; 　　& # 39;shape3d.text.curveSegments& # 39;: 1, 　　& # 39;3 d.movable& # 39;:假的 　　}); 　　});

因为我们用的字体字体的绘制方式是无数个三角形构成的一个字,会占用很大的内存,所以我把图形的曲线的精细度调得较低,但是还是很清晰,如果你们能找到性能更好的字体,可以使用并且告知我一下,我们目前没找到占用内存小的字体。

最后,要动态的变化图表图表中的柱形图,我们得设置动画,并且将3 d字体也同步更新数值:

setInterval(函数(){ 　　如果(node.a (& # 39; myHeight& # 39;) & lt;100){ 　　node.a (& # 39; myHeight& # 39;, (node.getAttr (& # 39; myHeight& # 39;) + 1)); 　　节点。s3 (20, node.a (& # 39; myHeight& # 39;), 20); 　　节点。p3 (p3 [0] node.a (& # 39; myHeight& # 39;)/2, p3 [2]); 　　其他}{ 　　node.a (& # 39; myHeight& # 39;, 0); 　　节点。s3 ([0, 20]); 　　节点。p3 ([p3 [0] 0 p3 [2]]); 　　} 　　如果(文本)类(& # 39;shape3d.text& # 39;, node.a (& # 39; myHeight& # 39;) + & # 39; % & # 39;); 　　},100)、

HTML5画布上实现3 d动态图图表的案例