vue-webtopo-svgeditor

基于vue3.2+ts实现的svg可视化web组态编辑器。可直接把svg文件和vue组件作为编辑器图形库使用，赋予其缩放和旋转等功能，并支持自定义拓展参数，实时控制组件状态等

qq交流群：209048413

项目优点

组态软件核心功能都具备

没有特殊需求，只需要配置好图形库，即可开始您的组态世界

优越的性能

使用了svg的symbol技术，use方式加载svg图形，同样的svg图形不管数量多少，只会渲染一次

学习成本极低

svg文件即组件，引入之后无需进行额外配置，编辑器会自适应解析加载组件，添加自定义组件和传统html无差，前端er零学习成本上手

易拓展

配置文件采用开放式结构，属性支持自定义拓展。图形库支持添加svg文件或者vue组件，定制开发将变得容易

易于集成

项目已经编写好了库模式脚本，组件已经发布到npm，支持外部传入自定义组件，支持组件事件订阅等

免费开源

MIT开源协议 可商用

项目说明

组件库

编写中，敬请期待

工具栏

编写中，敬请期待

画布

编写中，敬请期待

属性面板

编写中，敬请期待

图形库说明

有状态组件

编写中，敬请期待

无状态组件

编写中，敬请期待

自带动画组件

编写中，敬请期待

自定义svg

编写中，敬请期待

vue组件

编写中，敬请期待

集成到已有项目

# 创建项目(已有项目跳过此步骤)
npm init vite@latest

# 进入项目目录
cd projectname

# 安装插件
pnpm i webtopo-svg-edit

# 安装pinia
pnpm i pinia

# 修改main.ts 注册pinia
import { createPinia } from 'pinia';
const app = createApp(App);
app.use(createPinia());
app.mount('#app')

#引入插件
import { WebtopoSvgEdit,WebtopoSvgPreview } from 'webtopo-svg-edit';
import 'webtopo-svg-edit/dist/style.css'

如果集成有问题请参考示例项目vue-webtopo-svgeditor-example

请注意：插件方式引入会导致左侧工具栏的icon图标无法正确显示，请自行寻找您项目构建工具的svg加载器，将icon图标转换成symbol，并将名字命名为‘svg-xxx’即可正常显示

贡献代码

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

只接受github的pr，gitee为github镜像库

声明

本项目组件库来源均为网络，仅供学习交流使用，请勿将本项目里面的组件用于商业用途

君子协议

开源版使用时请保留底部的版权声明，感谢支持

常见问题

行尾序列问题（error Delete ␍ prettier/prettier） git config --global core.autocrlf false

捐助

如果这个项目对您有所帮助，请扫下方二维码打赏一杯咖啡。

感谢以下小伙伴为此项目做出的贡献