我们总是希望能够在一个界面上看到所有的信息，就像在一个盒子里装满了我们需要的东西。最近，我尝试用H5的WebGL技术实现了一个这样的界面，不仅展示了JSON数据，还能显示ECharts图表。这个项目让我感到非常兴奋，因为它不仅实现了我的一个小梦想，还让我学到了很多关于WebGL的知识。
实现基础：最外层的盒子
首先，我们需要一个最外层的盒子来承载所有的内容。在HT（一个WebGL框架）中，我使用了ht.CSGBox，这是一个非常基础的盒子模型。通过参考HTforWeb的建模手册，我了解到如何在CSGBox中操作各个面。这让我可以自由地在这个盒子上添加我想要的任何功能，比如通过ht.Style来设置样式，或者使用ht.Default.setImage函数来添加贴图。
JSON数据的加载与显示
接下来，我开始处理JSON数据的加载和显示。我参考了HT的editor，重新声明了一个graphview组件和一个datamodel数据模型。然后，我通过ht.Default.xhrLoad方法调用JSON文件，并用ht.Default.parse将文本转换成JSON格式。这样，我就可以将JSON数据反序列化并显示在界面上。为了确保数据的实时更新，我还设置了动画并立即刷新界面。
var box = new ht.CSGBox(); dataModel.add(box);
ECharts图表的集成
在JSON数据的基础上，我进一步集成了ECharts图表。这其实并不复杂，只需要在canvas上设置canvas.dynamic=true，并实时刷新gv即可。通过ht.Default.drawImage函数，我可以在canvas上绘制新的图表，并将绘制好的canvas传递给ht.Default.setImage，从而生成图片。
界面美化的挑战
在实现这些功能的过程中，我也遇到了一些挑战。比如，我发现盒子上的线段、图形和文字周围都有一圈锯齿。经过一番研究，我发现这是因为我在设置字体时同时设置了半透明，导致“blend”样式被关闭。为了解决这个问题，我需要将“all.transparent”设置为true。
代码的简洁与高效
虽然这个项目涉及到了很多复杂的技术，但我只用了100多行代码就实现了所有功能。这让我感到非常自豪，因为这意味着我的代码既简洁又高效。通过这个项目，我更加深刻地理解了如何用最少的代码实现最复杂的功能。
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.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示
最后，我认为用户交互是这个项目中非常重要的一部分。为了让用户能够更好地理解和使用这个界面，我特意设计了一些交互功能，比如点击盒子上的某个面可以展开详细信息。这些交互功能不仅提升了用户体验，也让整个界面更加生动和有趣。
总结与展望
通过这个项目，我不仅实现了在同一个界面上展示JSON和ECharts图表的目标，还学到了很多关于WebGL和用户交互的知识。虽然这个项目已经非常成功，但我相信未来还有更多的可能性等待我去探索。
在结束这篇文章之前，我想问大家一个问题：你们有没有想过在自己的项目中集成类似的多功能界面？你们会如何设计这样的界面？欢迎在评论区分享你们的想法，也别忘了点赞和分享这篇文章！
ht.Default.setImage('echart', charts(option));
ht.Default.setImage('pump', pumpGV.getCanvas());
评论0