基於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平台
  • 組件旋轉
  • 畫布縮放
  • 編輯器撤銷、重做

截圖

畫圖頁:
畫圖頁

預覽頁:
預覽頁

License

MIT


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM