?成果展示：by組態[web組態插件]

一、技術選擇

目前只有兩種選擇，canvas和svg

Canvas: 是一個基于像素的渲染引擎，使用JavaScript API在畫布上繪制圖像，它的優點包括：

• Canvas渲染速度快，適合處理大量圖像和高度動態的圖像。
• 可以直接操作像素，能夠創建高質量、流暢的動畫效果。
• Canvas可用于實現復雜的游戲、3D效果等。

SVG: 是一種基于矢量的圖形格式，可以使用XML和JavaScript API在瀏覽器中繪制圖像，它的優點包括：

• SVG是基于矢量的圖形格式，圖像可以無限放大而不失真。
• 可以為SVG圖像添加事件處理器，實現交互效果。
• 可以通過CSS進行樣式控制，使得SVG圖像更加靈活。
• SVG圖像可以直接嵌入到HTML文檔中，不需要另外下載。

但它也存在一些缺點：

• SVG渲染速度較慢，適合處理少量圖像和少量動態的圖像。
• SVG圖像在處理復雜圖形時可能會導致性能問題。
• 由于SVG是基于矢量的圖形格式，它的復雜度比較高，可能會導致文件大小較大。

????????根據個人喜好選擇，一般來說canvas的性能要不svg好的多，對于組態畫面，實時性要求要高，我們選擇canvas。對canvas的開發，都需要選擇一款框架，底層開發太難了，選擇框架一定要選擇文檔全面，例子多的，konva.js是非常不錯的。

ui框架自行選擇，都行。

二、 konva.js簡介

????????konva 是一個對 canvas API 做了封裝增強的 JavaScript 庫。

????????HTML 原生的 canva 提供的 API 比較底層，用法上像是操縱一支畫筆進行各種操作，畫完就結束了。

????????canvas 本身不維護圖形樹，你也無法操作修改已被繪制的圖形。

????????而 konva 能夠像我們操作 DOM 樹一樣去繪制和維護元素，它會額外維護圖形構成的樹，并能在繪制后，對特定圖形進行樣式的修改。

????????你還可以在上面添加事件，比如鼠標滑入某圖形時，圖形變大一點。此外還支持方便的變形、動畫、拖拽等高級能力。

????????konvas提供商了所有組態的基礎功能，如，點，線，面，拖拽，變化，放大縮小，事件等等，只要你想到的，他都有，我們要做的就是一點一點的吧這些功能堆起來，形成一個完整的組態工具。技術上并不難，就是花點時間。

三、 組態功能

????????我們做一個最簡單的功能，其他的功能自己慢慢堆，下面是功能列表

????????組態圖元： 變量組件（可根據后臺推送的數據顯示到畫布上），屬性（文字顏色）

????????后臺通訊：websocket

????????畫面保存：畫面要能以字符串的形式保存到后臺數據庫，或者生成文件，查看畫面的時候在字符串拿出來，在還原為畫面

????????實時數據渲染：后臺來數據后要及時呈現到畫布上

四、 需求分析

????????我們做的組件是一個一個的，組件要方便存儲，這樣后續才能方便添加，一個組件里面包含該組件所有的屬性。這是最重要的，否則后面擴展及其困難

????????konva可以將單個的組件，序列化為字符串。這樣就方便了我們做一個一個組件。

五、成功案例
?