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

突然有個想法，如果能把一些用到不同的知識點放到同一個界面上，並且放到一個盒子裏，這樣我如果要看什麼東西就可以很直接顯示出來，而且這個盒子一定要能打開。我用 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 函數了。

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

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 畫出來的圖佔的面積要大，不然顯示不完整。如果想看這個寬高對顯示的影響，可以自己改改看來玩玩。

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 中設置的，關於扇葉的一個標識，我們獲取到扇葉，然後設置其旋轉。

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 就可以生成圖片了。