vue就是邊做這個項目邊學的 代碼可能有點亂 還望各位大神勿噴
如果代碼對您有幫助 麻煩辛苦幫我點個star
預覽地址
如何使用
# 克隆項目
git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git
# 進入項目目錄
cd vue-webtopo-svgeditor
# 安裝依賴
yarn install
# 啟動服務
yarn serve
操作
點擊載入模板 進入預覽頁點擊模擬硬件 等待兩秒鍾即可看到動態效果
- 鼠標左鍵選中組件 按住可拖動至畫布
- 鼠標雙擊畫布取消選中組件
- 右側工具欄調整選中組件樣式
- 鍵盤↑↓←→可移動選中組件
- ctrl+c復制當前選中組件
- deleted刪除當前選中組件
- 鼠標滾輪放大縮小選中組件
Todo
- 鼠標框選批量選中
- 畫布綁定mqtt平台
- 組件旋轉
- 畫布縮放
- 編輯器撤銷、重做
截圖
畫圖頁:
預覽頁: