You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
vue-webtopo-svgeditor/README.md

56 lines
1.3 KiB
Markdown

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# vue-webtopo-svgeditor
> 纯vue3实现的svg可视化web组态编辑器。主要用于物联网mqtt实时系统图
这个分支为开发分支之前的版本每个组件都要写一个vue文件项目不仅乱还难以管理今天增加了这个分支首先要改变组件模式调整为动态组件等这个完成之后继续完善之前的代码
## 预览地址
[https://svg.yaolunmao.top](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平台
- 组件旋转
- 画布缩放
- 编辑器撤销、重做
## 截图
![编辑器页面](https://p.130014.xyz/2021/03/19/svgedit.png)
![预览界面](https://p.130014.xyz/2021/03/21/svgview.png)
## License
[MIT](http://opensource.org/licenses/MIT)