機器人制證系統大屏可視化

0x01項目背景

本項目是一個機器人制證的可視化系統。 其中包括制證設備的顯示和監控，質檢設備的顯示和監控；同時也包括AGV機器人的顯示和監控。 制證設備用於制作證書，質檢設備用於合格檢查，而AGV機器人用於運輸；AGV機器人還需要監控電量和充電情況和行進位置。

0x02設計稿

接到項目之后，大家就開始開心(誰知道呢)得干活了。 首先就是要出設計稿，設計小姐姐在經過和客戶多次的交涉討論之后，交付了一個最終的設計版本。 設計稿是基於2D的應用，大概這個樣子，詳情如下圖：

0x03 任務分解實現

首先確定大的開發思路是使用HTML5的canvas來進行繪制，當然如果從頭開發勢必是比較難的，幸好公司有一個中間件twaver.js，早已經把很多功能都做了很好的封裝，才方便我們開發的進行。

當然，我們的開發過程更加簡單，因為我們用了一個更加高階的工具，可視化編輯工具。
下面的講解，我們會同時介紹下代碼實現的思路和編輯器的實現思路。

首先，我們先對設計圖，做了下任務分解：

• 繪制標題欄
• 繪制牆體
• 繪制圖例
• 繪制設備 機器人等
• 繪制統計圖表

繪制標題欄

標題欄繪制包括日期、顏色塊、標題、標題背景、標題下划線的繪制。

繪制日期

首先講下日期的繪制，日期的繪制主要是對文本的繪制，直接使用canvas的fillText函數即可完成，相關實現思路比較簡單。 中間的小方塊就是一個平行四邊形，平行四邊形可以使用路徑來進行繪制即可，此處就不上代碼了。

接下來就說下，通過我們的編輯器是如何實現呢？ 很簡單，編輯器的組件庫中，有這個日期組件，直接拖拽過來就可以了呀！ 在此感謝編輯器組的開發小哥哥們的辛勤勞動，鼓掌！！

實際上稍微復雜一點，因為這個日期顯示控件中，日期和時間部分中間有一堆平行四邊形，這怎么辦呢？ 其實編輯器實現也很簡單，就是拖拽兩個日期顯示控件，前面一個顯示日期，后面一個顯示時間，然后在中間放幾個平行四邊形。平行四邊形也是編輯器中自帶的組件，操作So easy!

此處要介紹一下編輯器的批量生成功能。 由於有多個平行四邊形，如果每次都從左側的組件庫中拖拽出來，那么每次都要調整尺寸，偏移角度等，而且還要考慮多個平行四邊形之間的上下邊緣對齊和間距相等問題。 如果使用批量生成功能，那就方便很多。如我們先調整好一個平行四邊形，然后使用批量生成功能，生成多個這樣的平行四邊形，並且會按照一定的規律順序排列，本文中相關介紹就是一行等距排列，批量生成功能效果。

例如頁面效果：指定一定的數量，行數，列數，行距，列距等設置，批量生成效果如下圖：

當然設計圖中，還存在多個平行四邊形的顏色是不一樣的，顏色逐漸變淡的效果，這個目前還需要一個個調整，希望編輯器的開發小哥哥們能盡快提供更加快捷的解決方案。

繪制標題

標題部分包括很多種效果，如箭頭、文字、文字背景、文字下划線等。
首先，我們來看箭頭的繪制，如果手寫代碼，這種箭頭其實就是兩個平行四邊形的效果。 只需把兩個平行四邊形的路徑連接起來即可。

使用編輯器怎么實現呢？ 有同學可能已經舉手了，咱編輯器有現成的箭頭組件，直接拖過來就行。 不過我要告訴你，編輯器暫時並沒有現成的箭頭組件。

你也不用覺得遺憾。 編輯器雖然沒有箭頭組件，但有一個組合的功能， 可以把基礎的組件組合，形成復雜組件的能力。就像前面說的，箭頭實際上就是兩個平行四邊形組合形成。

因此可以拖一個平行四邊形，調整其大小尺寸即可。 在此再要介紹下另外兩個特殊技巧：

• 拖拽復制：按住shift鍵，拖動已有的圖元組件，即可復制一個相同的圖元。
• 垂直翻轉： 點擊右鍵，選中垂直翻轉，即可得到垂直的鏡像效果。

把原平行四邊形和鏡像的平行四邊形組合起來，即可得到一個箭頭的效果。
同樣的道理，可以得到右邊的箭頭效果。如下圖所示：

結合前面批量生成的效果，即可得到整個箭頭區域的頁面設計圖效果。

然后來看文字的效果，其實文字的效果比較簡單，用canvas的fillText
就可以完成，設計稿中的文字有陰影效果，所以繪制的時候也加上陰影效果即可：

ctx.shadowColor = 'blue';
ctx.shadowBlur = 12;
...
ctx.fillText('機器人制證系統');

在編輯器中，不僅有現成的文本組件，而且還有豐富的樣式調整功能，包括字體、顏色、陰影效果等。

現在再接着說下文本的下划線如何實現。看設計圖中下划線是中間亮，兩邊暗的效果，而且是中間粗，兩邊細的效果。 看起來有點難度，好像直接用canvas繪制技術不是很好完成。

有人在想實在不行就讓設計小姐姐切圖片唄； 嗯，切圖固然是可以的， 但是技術真的不能解決嘛？

其實是可以的，首先中間亮兩邊暗的效果，其實很容易實現，使用漸變就可以了。 而事實上，用了漸變之后，如果兩邊的顏色是和背景貼近的顏色，就會有一種漸漸隱入背景的效果。此時端點兩邊會看起來比中間細，其實只是看起來這樣，實際上是一樣粗細的， 這是視覺神經的反應效果。當然，我們可視化本來就是給人看的，既然看起來能達到效果，那就不用管真實是什么樣子啦。

下面是一段示例代碼。

 var canvas = document.getElementById('can');
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = 'blue';
      ctx.fillRect(0,0,1000,1000);
      
      var grd=ctx.createRadialGradient(150,100,5,150,100,50);
      grd.addColorStop(0,"red");
      grd.addColorStop(0.3,"red");
      grd.addColorStop(1,"rgba(255,0,0,0.1)");
      ctx.strokeStyle = grd;
      ctx.lineWidth = 3;

      ctx.shadowBlur = 5;
      ctx.shadowColor = 'rgba(255,0,0,0.1)';

      ctx.beginPath();
      ctx.moveTo(100,100);
      ctx.lineTo(200,100);
      ctx.stroke();

最終的顯示效果如下：

在編輯器中，是使用類似的思路來實現的，不過我們用的不是線段，而是使用了矩形，讓矩形的高很小即可。
首先在編輯中，拖入一個矩形，然后設置其屬性，使其不顯示邊框，並設置其填充樣式為徑向的漸變即可。

最終矩形的顯示效果如下：

然后調整矩形的高度，比如把高度調整為1，最終效果如下：

然后就是文本的背景效果，其實背景效果和下划線的實現有着同樣的思路，只是漸變顏色的透明度要調低一點，既然是背景，就不能喧賓奪主，否則會影響文字的顯示。

通過編輯器編輯之后，標題的整體效果如下圖所示：

繪制牆體

牆體的繪制包括兩部分，一個是支撐柱，一個是牆體的路徑。 這兩部分都比較簡單，支撐柱就是一個矩形方塊。 牆體本身就是一個段路徑，路徑可以使用canvas得path功能進行繪制。
比如如下代碼：

ctx.moveTo(x0，y0);
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.strokeStyle = 'blue';
ctx.stroke();

在編輯器中，可以直接通過編輯打點得方式，生成路徑。其中一個輔助功能是：按下ctrl鍵得時候，線條只能走水平，垂直，斜45度三個方向的操作。

繪制圖例

首先看下圖例區的內容：

從圖上可以看出每個圖例左邊是一個圖形，這個后面再說，右邊是文字及其下划線，文字及下划線前面說過了，此處不再多說。

前面的圖形，可以讓設計人員設計出來一張圖片。 其實也可以使用編輯器來做，編輯器里面有個模塊，叫做圖元編輯器，就是制作基本圖形的。 我們看圖例前面的圖形，其實就是一個圓環里面套一個圓形，然后有一條短橫線或者使用圓的扇形繪制屬性代替直線。用圖元編輯很方便實現：

• 首先拖拽一個圓形到編輯區，然后設置其只顯示邊框，不顯示填充，並使用陰影模糊效果。

• 拖拽另外一個圓形到編輯區，設置其不顯示邊框，但顯示填充，並使用陰影模糊效果。同時設置其尺寸比第一個圓形要小。

• 拖拽一條線段（或勾選圓的扇形繪制），連接兩個圓形。

最終編輯出來得圖元效果如下，下面是放大得效果

上述編輯好的圖元，在場景編輯區直接使用即可。 該圖元組件 + 文本組件 + 下划線 就組成了圖例的效果。

繪制統計圖表

首先看下圖表區的內容：

可以把圖表區的內容分成幾個部分：

• 左右括號
• 圓形圖表
• 文字 （包括文字前面的方塊，文字，下划線等）

括號的繪制

前面說過了圖元編輯模塊，其實括號可以通過圖元編輯做成一個圖元。 就是幾條線段的組合即可，如下圖所示：

然后調整線段的粗細顏色和位置，既可以達到設計圖中的效果：

上面圖示的是左括號的效果。對於右括號，我們可以使用同樣的思路創建一個右括號圖元。

也可以在場景編輯的時候直接使用左括號，然后使用水平翻轉的功能，實現鏡像效果。

此處文字的繪制和標題的文字繪制類似，前面已經說過，包括文字前的方塊，文字本身和文字的下划線效果等。 此處不再贅述。

接下來就是要繪制圖表了。 從設計稿中可以看出，圖表主要是由幾個圓形或者扇形的疊加組成的，屬於比較簡單的圖表。

一種思路是通過代碼進行定制。 這是比較簡單的圖表，通過arc函數的多次組合應該可以實現，具體的實現代碼，此處就不詳述了。

另外一種方式當然還是通過圖元編輯的功能，首先在頁面上面拖出來四個圓形，然后分別調整他們的填充顏色，大小，邊框顏色，起始結束角度等，可以得到如下圖形：

其中填充顏色 可以指定位漸變，然后加上陰影效果，就可以得到中間的黑色漸變部分。

然后把這幾個圖形按照一定的順序組織起來，就可以得到相關圖表了，中心點對齊的功能讓調整位置很方便。

有讀者可能會會說，這個是一個固定的圖，不能對接數據，實現動態效果？ 事實上，我們編輯器可以做這塊的數據的對接，數據可以影響圖形的屬性等，以此來實現動態效果。但是數據對接的部分，將會在后續文章講述，本文不做重點講述。 下同。

至此，統計圖表的部分，制作完成了。

繪制設備 機器人

設備和機器人的圖元相對復雜一些，如下圖所示：

可以看出，圖元種既有靜態的圖片部分，也有動態的繪制。

在圖元編輯器種，可以把靜態的圖片和動畫繪制的元素組織到一起。 比如機器人圖元，下面是靜態的圖片，上面是一個文字編號 一個小的動態電池圖表和一個表示百分比的文字。 靜態的圖片很顯然，只能讓設計小姐姐們幫忙了。

下面看看如何通過圖元編輯來做出一個。

首先是編輯線條的部分，這個可以使用連接體編輯線條的部分：

前面在講解括號的繪制的時候，已經講述過了。

此處先編輯出一個與圖元種線段部分類似的形狀，然后設置線段的顯示樣式位虛線，調整虛線的顏色等：

接下來編輯電池的部分。電池的部分可以考慮用三個矩形組成，一個矩形是不填充的，另外兩個是填充的：

適當的組合到一起，即可形成一個電池的圖形：

文本的編輯直接使用文本控件即可，此處不多贅述。

然后是靜態的圖片，圖元編輯器中，有個圖片控件，可以指定一個區域顯示上場到服務器的靜態圖片：

雙擊控件選擇圖片：

最終效果如下圖：

把線條 電池 文字組合在一起，就組成了機器人圖元：

其他質檢設備，執政設備等的圖元制作過程類似，就不贅述了。

0x03 場景生成

前面說了以下內容：

• 繪制標題欄
• 繪制牆體
• 繪制圖例
• 繪制設備 機器人等
• 繪制統計圖表

其中標題欄 和牆體是在場景中生成的，而圖例 設備 機器人 統計圖表等，主要體現了相關的圖元的制作，還未運用到場景中，要運用到場景中，只需要把制作的圖元保存下來。 並在場景編輯這邊直接使用即可，比如下面是保存的部分圖元：

有了相關的圖元，直接在場景編輯器中拖拽生成即可。 下面上一張編輯好的效果圖：

嗯，最終效果還在不斷完善中，主要是相關圖元優化和配色優化。 當然下一步更重要的工作是，要對接數據，實現動態的效果。

如果你對demo 感興趣，可以郵件給[e-mail]。
歡迎關注公眾號“ITman彪叔”。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規划師。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規划有濃厚興趣。