基於HTML5 WebGL 將拓撲圖和圖表繪製在 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 就可以生成圖片了。
相關文章
- 將拓撲圖和圖表繪製在 3D 六面體上3D
- 基於 HTML5 WebGL 的 3D 網路拓撲圖HTMLWeb3D
- 基於 WebGL 的 HTML5 3D 網路拓撲圖WebHTML3D
- 基於 WebGL 的 HTML5 網路拓撲結構 3D 圖WebHTML3D
- 基於 WebGL 的 3D Chart 圖表Web3D
- 網路拓撲圖:網路拓撲圖介紹及線上製作
- 基於 HTML5 Canvas 2D 拓撲圖和 3D 機櫃模型的增刪操作HTMLCanvas3D模型
- 基於 HTML5 Canvas 電信網路拓撲圖的快速搭建HTMLCanvas
- 基於 HTML5 的網路拓撲圖之 DataBinding 資料繫結HTML
- WPF基礎:在Canvas上繪製圖形Canvas
- 基於 HTML5 網路拓撲圖的快速開發之入門篇(一)HTML
- 基於 HTML5 網路拓撲圖的快速開發之入門篇(二)HTML
- 基於d3.js的關係拓撲圖JS
- 使用 d3.js 力導佈局繪製資源拓撲圖JS
- 圖論——拓撲排序圖論排序
- 快速建立 HTML5 Canvas 電信網路拓撲圖HTMLCanvas
- (資料科學學習手札133)利用geopandas繪製拓撲著色地圖資料科學地圖
- 快速開發基於 HTML5 網路拓撲圖應用之 DataBinding 資料繫結篇HTML
- 基於 HTML5 WebGL 的 3D 機房HTMLWeb3D
- 基於 HTML5 WebGL 的 3D 挖掘機HTMLWeb3D
- 基於 HTML5 Canvas 的拓撲元件 ToolTip 應用HTMLCanvas元件
- Reward (圖論+拓撲排序)圖論排序
- 基於 HTML5 的 WebGL 3D 隧道監控HTMLWeb3D
- 基於 HTML5 WebGL 的 3D 科幻風機HTMLWeb3D
- 如何使用Python和Plotly繪製3D圖形Python3D
- 使用MAUI繪製圖表UI
- 基於Web的6個完美3D圖形WebGL庫Web3D
- Origin圖表技巧之繪製帶輔助面的3D折線圖3D
- 3D繪圖:18個WebGL開源引擎框架及Web 3D圖形庫3D繪圖Web框架
- 使用Matplotlib繪製3D圖形3D
- 基於chart.js繪製熱力圖JS
- 基於 HTML5 WebGL 的 3D 工控裙房系統HTMLWeb3D
- 基於 HTML5 WebGL 的 3D 模型斜面生成HTMLWeb3D模型
- 基於 WebGL HTML5 的 3D 模型分離控制WebHTML3D模型
- 基於 WebGL 的 HTML5 3D 工控裙房系統WebHTML3D
- 流程圖製作: BPMN流程圖線上繪製流程圖
- Cisco 交換機利用CDP資料自動繪製網路拓撲圖[drawio]-實踐
- 用HTML5繪製圖形在手機上消除模糊顯示HTML