基於 HTML5 Canvas 的元素週期表展示

圖撲軟體發表於2020-04-06

前言

之前在網上看到別人寫的有關元素週期表的文章，深深的勾起了一波回憶，記憶裡初中時期背的“氫氦鋰鈹硼，碳氮氧氟氖，鈉鎂鋁矽磷，硫氯氬鉀鈣”、“養（氧）龜（矽）鋁鐵蓋（鈣），哪（鈉）家（鉀）沒（鎂）青（氫）菜（鈦）”，高中時期記的質量守恆、元素守恆、原子守恆、電子守恆，時間過的飛快，轉眼我們都已經這麼大了。

現在我用 HT 來實現它，HT 有 2D 拓撲和 3D 模型場景，兩種形式我都實現了，話不多說，先看效果圖。

介面展示

整個頁面由 HT UI 元件構成，使用 ht.ui.TabLayout 標籤頁佈局元件，進行 23D 介面的分別展示。

2D介面：整體是一個 ht.ui.SplitLayout 分割元件（左右分割），左邊使用 ht.ui.HTView 包裝了 GraphView 拓撲圖元件，右邊是一個 ht.ui.Form 表單元件。

3D介面：整體是一個 ht.ui.SplitLayout 分割元件（上下分割），上邊新增了 ht.ui.HBoxLayout 構成的按鈕組，下邊是使用 ht.ui.HTView 包裝了 Graph3dView 場景。

demo 地址：http://www.hightopo.com/demo/elementTable/index.html

2D 介面程式碼分析

拓撲圖元件

先來說左邊的拓撲圖元件，ht.graph.GraphView 是 HT 框架中 2D 功能最豐富的元件，具有基本圖形的呈現和編輯功能，拓撲節點連線及自動佈局功能，電力和電信等行業預定義物件，具有動畫渲染等特效，因此其應用面很廣泛，可作為監控領域的繪圖工具和人機介面，可作為一般性的圖形化編輯工具，可擴充套件成工作流和組織圖等企業應用。

拓撲圖中展示的 118 個元素，每一個都是 ht.Node 拓撲節點，預設的節點展示是一個小電腦樣式，在這裡我們通過 setImage 設定節點顯示的圖片資訊，如下圖：

向量圖通過點、線和多邊形來描述圖形，因此在無限放大和縮小圖片的情況下依然能保持一致的精確度。上圖就是一張向量圖，由 1 個矩形和 6 個文字組成，任意縮放不失真，大家可以訪問 demo 地址，通過滾輪來縮放拓撲圖進行體驗，具體向量圖的繪製請參考向量手冊。

肯定有人會有疑問，118 種元素，是否要繪製 118 張向量圖，感覺稍微還能接受，如果是成千上萬呢，那麼人會累趴下的。不用怕，HT 幫我們解決了這個問題，對繪製的向量圖進行資料繫結，將繪製內容的屬性繫結到節點的屬性上，應用中通過更新節點對應屬性，圖形介面就會自動重新整理，達到實時顯示資料的效果，比如我的這張向量圖，我將 6 個元素屬性文字內容和字型顏色以及矩形背景色都進行了資料繫結，繫結好之後我只需要通過 node.a('background', '#FEB64D') 就可以修改矩形的背景色（backgrouond 是矩形背景色繫結的屬性），具體資料繫結請參考資料繫結手冊。

既然說到了資料繫結，我們就先看下顯示元素分類的功能，如下圖對比，節點樣式的變化不是通過重新 setImage 設定另一張向量圖，而是修改原向量中繫結的樣式屬性。根據元素所屬類別，修改向量圖的矩形背景色、元素中文名文字顏色。切換狀態的按鈕是 ht.ui.ToggleButton 開關按鈕，擁有“0/1”兩種狀態的切換，通過監聽按鈕是否選中，來切換元素週期表樣式。

 1 toggle.on('p:selected', e => {
 2     if (e.newValue) {
 3         this.htView.legend.s('2d.visible', true); // 顯示類別圖例
 4         this.htView.addClassification(); // 展示分類
 5     }
 6     else {
 7         this.htView.legend.s('2d.visible', false); // 隱藏類別圖例
 8         this.htView.initElements(); // 原始樣式
 9     }
10 });

元素類別圖例也是一個 ht.Node 節點，同樣是繪製的向量，它從一開始就在圖紙中， node.s('2d.visible', false) 設定為不可見，要展示分類時，再設定為 true 顯示。

表單皮膚

右邊的表單皮膚有 6 行，第 2 行為元素週期表展示和輪播展示的單選按鈕，來切換展示效果。

第 3 行就是上邊提到的顯示分類功能，第 4 行是一個文字輸入框，用來獲取元素序數，限制了只能輸入數字，還增加了輸入數的驗證，只能輸入 1~118 。

程式碼如下：

 1 let textField = new ht.ui.TextField();
 2 textField.setFormDataName('textField'); // 設定在表單中的名稱
 3 textField.setPlaceholder('請輸入查詢的元素序數！');
 4 textField.setMaskRe(/\d/); // 限制只能輸入數字
 5 textField.setInstant(true); // 開啟即時模式，值改變就派發屬性改變事件
 6 textField.on('p:value', (e) => { // 監聽值改變事件
 7     let value = e.newValue;
 8     if (value > 118) {
 9         textField.setErrorMessage('只有 1 ~ 118 號元素喲！', {
10             placements: ['top']
11         });
12     }
13     else { textField.setErrorMessage(null); }
14 });

第 5 行是一個文字區域 ht.ui.TextArea，用來展示查詢的元素資訊。

第 6 行是一組按鈕，用來提交查詢資料和重置表單資訊。

3D 介面程式碼分析

按鈕組

上邊是一個 ht.ui.HBoxLayout 橫向佈局器，hbox 中新增了 4 個按鈕，來進行 3D 形態轉換。

按鈕支援圖示和文字，提供 normal、hover、active、disabled 四種狀態，按鈕生成程式碼：

 1 createButton(text) {
 2     let button = new ht.ui.Button();
 3     button.setBorder(null);
 4     button.setHoverBorder(null);
 5     button.setActiveBorder(null);
 6     button.setBackground(new ht.ui.drawable.ColorDrawable('rgba(37,115,194,0.6)', 4)); // normal 背景
 7     button.setHoverBackground(new ht.ui.drawable.ColorDrawable('rgba(10,92,173,0.50)', 4)); // hover 背景
 8     button.setActiveBackground(new ht.ui.drawable.ColorDrawable('rgba(15,132,250,0.6)', 4)); // active 背景
 9     button.setText(text);
10     button.setTextColor('rgb(0, 211, 255)');
11     button.setHoverTextColor('rgb(0, 211, 255)');
12     button.setActiveTextColor('rgb(0, 211, 255)');
13 
14     return button;
15 }

通過 button.on('click', e => { // 切換函式 }) 來監聽點選事件。

3D 場景

下邊是 ht.graph3d.Graph3dView，通過對 WebGL 底層技術的封裝，與 HT 其他元件一樣，基於 HT 統一的 DataModel 資料模型來驅動圖形顯示，極大降低了 3D 圖形技術開發的門檻，在熟悉 HT 資料模型基礎上，一般程式設計師只需要 1 個小時的學習即可上手 3D 圖形開發。

元素在 3D 場景顯示為一個面片，對面片進行 2D 時做好的向量貼圖，同樣通過修改節點屬性，來控制顯示樣式。

1 node.s({
2     'shape3d': 'billboard', // 設定節點型別為‘billboard’公告板
3     'shape3d.image': 'symbols/元素2.json', // 設定面片貼圖
4     'shape3d.reverse.flip': true, // 設定反面是否顯示正面內容
5     'shape3d.image.cache': true, // 進行貼圖快取
6     'shape3d.fixSizeOnScreen': false, // 設定是否固定保持螢幕大小，不隨縮放而變化
7     'select.brightness': 1 // 設定選中亮度為 1
8 });

接下來說幾種旋轉變化，dm 是 DataModel 即繫結的資料容器，datasMap 用來存放元素變化前後的位置資訊，用於動畫驅動時使用。

1. 隨機打亂：設定一組空間範圍值，生成範圍內的（x,y,z）隨機值，用以設定節點位置。

 1 let dm = this.dm,
 2     datasMap = {};
 3 
 4 dm.each(data => {
 5     let x = Math.random() * 2000 - 1000; // 獲取隨機 x
 6     let y = Math.random() * 2000 - 1000; // 獲取隨機 y
 7     let z = Math.random() * 500 - 250; // 獲取隨機 z
 8     
 9     let position = data.getPosition3d(),
10         px = position[0],
11         py = position[1],
12         pz = position[2];
13 
14     datasMap[data] = {
15         x: x,
16         y: y,
17         z: z,
18         px: px,
19         py: py,
20         pz: pz
21     };
22 });

2. 球形環繞：先計算求得球系座標，再根據規則轉化為空間直角座標。

 1 let dm = this.elements,
 2     datasMap = {};
 3 
 4 let r = 500,
 5     phi, theta;
 6 
 7 for (let i = 0; i < 118; i++) { 
 8     let data = dm.get(117 - i);
 9     phi = Math.acos(-1 + (2  * i ) / 118);
10     theta = Math.sqrt(118 * Math.PI) * phi;
11 
12     let z = r * Math.sin(phi) * Math.cos(theta),
13         x = r * Math.sin(phi) * Math.sin(theta),
14         y = r * Math.cos(phi);
15 
16     let position = data.getPosition3d(),
17     px = position[0],
18     py = position[1],
19     pz = position[2];
20 
21     datasMap[data] = {
22         x: x,
23         y: y,
24         z: z,
25         px: px,
26         py: py,
27         pz: pz
28     };
29 }

3. 環形圍繞：設定一個環繞半徑、起始高度，以固定角度旋轉，每次降低節點的設定高度。

 1 let dm = this.dm,
 2     datasMap = {},
 3     datas = dm.getDatas(),
 4     radius = 400,
 5     angle = 18,
 6     num = 360 / angle;
 7 
 8 let y = 300, 
 9     count = 0;
10 for (let i = 0; i < 6; i++) {
11     for (let j = 0; j < num; j++) {
12         let data = datas.get(count),
13             radian = Math.PI / 180 * j * angle;
14 
15         if (!data) break;
16         count++;
17 
18         let x = radius * Math.cos(radian),
19             z = radius * Math.sin(radian); 
20         
21         let position = data.p3(),
22             px = position[0],
23             py = position[1],
24             pz = position[2];
25 
26         datasMap[data] = {
27             x: x,
28             y: y,
29             z: z,
30             px: px,
31             py: py,
32             pz: pz
33         };                
34         y -= 6;
35     }
36 }

4. 復原：根據記錄的元素的行數和列數，計算元素節點的 xy 值，z 值固定。

 1 let dm = this.dm,
 2     datasMap = {};
 3 
 4 dm.each(data => {
 5     let index = data.a('index'),
 6         row = data.a('row'),
 7         col = data.a('col');
 8 
 9     let position = data.getPosition3d(),
10         px = position[0],
11         py = position[1],
12         pz = position[2];
13 
14     datasMap[data] = {
15         index: index,
16         row: row,
17         col: col,
18         px: px,
19         py: py,
20         pz: pz
21     };
22 });

最後有一個元素樣式的切換，右上角是一個 ht.ui.HBoxLayout 橫向佈局器，新增了 3 個 ht.ui.Label 子元件，通過限制 hbox 的寬度和 label 的寬度一致來達到現在的效果，通過監聽滾輪事件下的 label 來改變樣式。