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

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 感興趣，能夠郵件給terry.tan@servasoft.com。
歡迎關注公衆號「ITman彪叔」。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。在計算機圖形學、WebGL、前端可視化方面有深刻研究。對程序員思惟能力訓練和培訓、程序員職業規劃有濃厚興趣。