基于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