首頁 > web前端 > H5教程 > 用H5的WebGL如何在同一個介面做出json和echarts圖表

用H5的WebGL如何在同一個介面做出json和echarts圖表

php中世界最好的语言
發布: 2018-01-29 10:14:13
原創
2437 人瀏覽過

這次帶給大家用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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板