將拓撲圖和圖表繪製在 3D 六面體上

忽然有個想法，若是能把一些用到不一樣的知識點放到同一個界面上，而且放到一個盒子裏，這樣我若是要看什麼東西就能夠很直接顯示出來，並且這個盒子必定要能打開。我用 HT 實現了個人想法，代碼一百多行，這麼少的代碼能實現這種效果我以爲仍是牛的。javascript

先來看看效果圖：這個例子最基礎的就是最外層的盒子了，因此咱們先來看看如何實現它：html

var box = new ht.CSGBox();
dataModel.add(box);

用 HT 能夠很輕易地實現這個盒子，在 HT 中封裝了不少基礎圖元類型，咱們常常用到的 ht.Node 也是其中一個，這樣咱們能夠不用反覆地寫相同的代碼來完成基礎的實現。java

這個例子中用的封裝好的基礎圖元是 ht.CSGBox，一個盒子模型，能夠參考 HT for Web 建模手冊，咱們在手冊中能夠看到，在 CSGBox 中咱們只能操做這個盒子的各個面，若是你想要本身設置一些特殊的功能，只須要操做 ht.Style（HT for Web 風格手冊）便可。json

要想實如今盒子上的一個面上添加貼圖，我能想到的只有 HT 封裝的 ht.Default.setImage 函數了。canvas

我想大家都注意到了盒子上有模型化的水泵，上面有扇葉在旋轉，調用graphView.deserialize(json) 來將 json 文件導出成可視化的 2d 模型並設置 animation 動畫，再當即刷新到這個水泵，不然就算設置了動畫，水泵上的扇葉旋轉也不會生效。echarts

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);

這個時候我不能把水泵的 graphView 和 g3d 都加到底層div上，而且個人意圖是把水泵的 graphView 加到 g3d 中的 CSGBox 中的一面上，因此爲了讓水泵顯示出來必須設置水泵所在的 graphView 的寬高，而這個寬高必須比我 json 畫出來的圖佔的面積要大，否則顯示不完整。若是想看這個寬高對顯示的影響，能夠本身改改看來玩玩。ide

pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true; // 設置這個是爲了讓 canvas 能動態顯示

這邊還要特別說明一個函數 getDataByTag(tagName) 這個函數是獲取標識號，在 HT 中 tag 屬性是惟一標識，雖然 HT 中也有 id，可是 id 是 HT 中 Data 類型對象構造時內部自動被賦予的一個 id 屬性，能夠經過 data.getId() 和 data.setId(id) 獲取和設置，Data 對象添加到 DataModel 以後不容許修改 id 值，能夠經過 dataModel.getDataById(id) 快速查找 Data 對象。函數

通常咱們建議 id 屬性由 HT 自動分配，用戶業務意義的惟一標示可存在於 tag 屬性上，經過 data.setTag(tag) 函數容許任意動態改變 tag 值，經過 dataModel.getDataByTag(tag) 可查找到對應的 Data 對象，並支持經過 dataModel.removeDataByTag(tag) 刪除 Data 對象。動畫

你可能會好奇在代碼中咱們並無提到「fan1」這個 tag 標識，這個標識是在水泵的 json 中設置的，關於扇葉的一個標識，咱們獲取到扇葉，而後設置其旋轉。ui

echarts 圖表的顯示也是很基礎的，可是咱們會發現，在將 echarts 圖表添加進 graphView 中它的動畫效果會不顯示，因此咱們首先要將這個 echarts 圖表所在的圖表的 dynamic 設置爲 true，即將其設置爲動態：

function charts(option){
    var info = {
        canvas: document.createElement('canvas')
    };
    info.canvas.dynamic = true; // 設置 info.canvas 爲動態
    info.chart = echarts.init(info.canvas);
    info.chart.setOption(option);
    return info.canvas;
}

最後，只須要將這兩個回傳的 canvas 傳入 ht.Default.setImage 中便可：

ht.Default.setImage('echart', charts(option));
ht.Default.setImage('pump', pumpGV.getCanvas());

ht.Default.drawImage 函數生成新的圖實際上就是在 canvas 上畫圖，因此咱們只要把咱們已經畫好的 canvas 傳到 ht.Default.setImage 就能夠生成圖片了。