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都加到底层p上，而且我的用意是把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，
我们可以设定需要显示的面的transparent: true即可。看下完成后的结果图：
H5视频中配景音乐怎样主动播放
以上就是WebGL如何操纵json与echarts图表的细致内容，更多请关注 百分百源码网 其它相干文章！
