登录  /  注册
首页 > web前端 > H5教程 > 正文

用H5的WebGL如何在同一个界面做出json和echarts图表

php中世界最好的语言
发布: 2018-01-29 10:14:13
原创
2214人浏览过

这次给大家带来用h5的webgl如何在同一个界面做出json和echarts图表,用h5的webgl在同一个界面做出json和echarts图表的注意事项有哪些,下面就是实战案例,一起来看一下。

突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开。我用HT实现了我的想法,代码一百多行,这么少的代码能实现这种效果我觉得还是牛的。

这个例子最基础的就是最外层的盒子了,所以我们先来看看如何实现它:

var box = new ht.CSGBox();
dataModel.add(box);
登录后复制

用HT可以很轻易地实现这个盒子,在HT中封装了很多基础图元类型,我们经常用到的ht.Node也是其中一个,这样我们可以不用反复地写相同的代码来完成基础的实现。

这个例子中用的封装好的基础图元是ht.CSGBox,一个盒子模型,可以参考HT for Web 建模手册,我们在手册中可以看到,在CSGBox中我们只能操作这个盒子的各个面,如果你想要自己设置一些特殊的功能,只需要操作ht.Style(HT for Web 风格手册)即可。

要想实现在盒子上的一个面上添加贴图,我能想到的只有HT封装的ht.Default.setImage函数了。

这边我实现的方法是参考HT的editor来运作的,重新声明一个graphview组件和一个datamodel数据模型,然后通过ht.Default.xhrLoad方法调用json,在方法中用ht.Default.parse将text转成json格式,然后反序列化将json里面的内容展现成可视化的界面,再设置动画,再立即刷新用到这个json的界面,否则就算设置了动画,画面也不会改变。

ht.Default.xhrLoad('displays/demo/pump.json', function(text){
    const json = ht.Default.parse(text);
    pumpDM.deserialize(json);
    var currentRotation = 0;
    var lastTime = new Date().getTime();
    setInterval(function(){
        var time = new Date().getTime();
        var deltaTime = time - lastTime;
        currentRotation += deltaTime * Math.PI / 180 * 0.3;
        lastTime = time;
        pumpDM.getDataByTag('fan1').setRotation(currentRotation);
        pumpDM.getDataByTag('fan2').setRotation(currentRotation);
        box.iv();
        // g3d.iv();这边也可以刷新g3d,但是局部刷新更省
        pumpGV.validateImpl();
    }, 10);
}, 10);
登录后复制

这个时候我不能把pumpGV和g3d都加到底层div上,并且我的意图是把pumpGV加到g3d中的CSGBox中的一面上,所以为了让pumpGV显示出来 必须设置pumpGV的宽高,而这个宽高必须比我json画出来的图占的面积要大,不然显示不完整。如果想看这个宽高对显示的影响,可以自己改改看来玩玩。

pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示
登录后复制

echarts图表的显示也是很基础的,只要再加上 canvas.dynamic = true,并且实时刷新gv即可。

最后,只需要将这两个回传的canvas传入ht.Default.setImage中即可:

ht.Default.setImage('echart', charts(option));
ht.Default.setImage('pump', pumpGV.getCanvas());
登录后复制

ht.Default.drawImage函数生成新的图实际上就是在canvas上画图,所以我们只要把我们已经画好的canvas传到ht.Default.setImage就可以生成图片了。

有一点需要改进的,我们可以看到盒子上的线段,图形,文字周边都有一圈的锯齿,因为我们在设置字体时,同时设置了半透明,在处于半透明的情况下“blend”样式会被关闭,这个时候我们就没法控制样式了,一般有透明度的时候需要将“all.transparent”设置为true,

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

如何用html的title属性实现鼠标悬停显示文字

怎样使用a标签的href属性与onclick事件

input输入框中的光标大小显示不一致应该怎么解决

以上就是用H5的WebGL如何在同一个界面做出json和echarts图表的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号