天天看點

純vue3實作的svg可視化web組态編輯器。主要用于物聯網mqtt實時系統圖

vue就是邊做這個項目邊學的 代碼可能有點亂 還望各位大神勿噴

如果代碼對您有幫助 麻煩辛苦幫我點個star

預覽位址

https://svg.yaolunmao.top

如何使用

# 克隆項目
git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git

# 進入項目目錄
cd vue-webtopo-svgeditor

# 安裝依賴
yarn install

# 啟動服務
yarn serve

           

操作

點選載入模闆 進入預覽頁點選模拟硬體 等待兩秒鐘即可看到動态效果

  • 滑鼠左鍵選中元件 按住可拖動至畫布
  • 滑鼠輕按兩下畫布取消選中元件
  • 右側工具欄調整選中元件樣式
  • 鍵盤↑↓←→可移動選中元件
  • ctrl+c複制目前選中元件
  • deleted删除目前選中元件
  • 滑鼠滾輪放大縮小選中元件

Todo

  • 滑鼠框選批量選中
  • 畫布綁定mqtt平台
  • 元件旋轉
  • 畫布縮放
  • 編輯器撤銷、重做

截圖

畫圖頁:

純vue3實作的svg可視化web組态編輯器。主要用于物聯網mqtt實時系統圖

預覽頁:

純vue3實作的svg可視化web組态編輯器。主要用于物聯網mqtt實時系統圖

License

MIT

繼續閱讀