|
|
|
@ -2,8 +2,6 @@
|
|
|
|
|
|
|
|
|
|
> 基于 vue3.2+ts 实现的 svg 可视化 web 组态编辑器。可直接把 svg 文件和 vue 组件作为编辑器图形库使用,赋予其缩放和旋转等功能,并支持自定义拓展参数,实时控制组件状态等
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
预览地址:[http://svg.yaolm.top/](http://svg.yaolm.top/)
|
|
|
|
|
|
|
|
|
|
`qq`交流群:`209048413`,仅供交流,有问题请提[issue](https://github.com/yaolunmao/vue-webtopo-svgeditor/issues),以便帮助更多有相同问题的人
|
|
|
|
@ -12,7 +10,6 @@
|
|
|
|
|
|
|
|
|
|
## 项目优点
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 组态软件核心功能都具备
|
|
|
|
|
|
|
|
|
|
没有特殊需求,只需要配置好图形库,即可开始您的组态世界
|
|
|
|
@ -37,10 +34,8 @@
|
|
|
|
|
|
|
|
|
|
MIT 开源协议 可商用(自带的`svg`文件除外)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 图形库说明
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 无状态组件
|
|
|
|
|
|
|
|
|
|
无状态组件就是`svg`文件,编辑器已经将节点的拖动,缩放,旋转等功能封装好了,您无需做出额外配置即可使用,若是需要动态的去设置`svg`的颜色边框之类的,需要自行设置`props`,参考`src\config-center\svg-file\stateless`的配置,可以设置的属性为`svg`的公共属性,例如`fill`、`stroke `、`stroke-dasharray`这些,具体属性请参考[MDN-SVG 属性](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute#svg_%E5%B1%9E%E6%80%A7%EF%BC%88%E6%8C%89%E7%B1%BB%E5%88%AB%E5%88%86%E7%B1%BB%EF%BC%89)
|
|
|
|
@ -63,8 +58,6 @@ MIT开源协议 可商用(自带的`svg`文件除外)
|
|
|
|
|
|
|
|
|
|
其实和自定义`svg`相似,都是`vue`的`template`代码片段,但是`svg`标签里面无法渲染`html`的代码,所以在最外层用了`foreignObject`进行了包裹,同样支持缩放旋转等操作。参考`src\config-center\vue`
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 操作说明
|
|
|
|
|
|
|
|
|
|
### 绘画
|
|
|
|
@ -85,8 +78,6 @@ MIT开源协议 可商用(自带的`svg`文件除外)
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 其他说明
|
|
|
|
|
|
|
|
|
|
- 若是组件中心点不是鼠标指针点,请自行在页面设置里匹配`x`轴和`y`轴数据
|
|
|
|
@ -132,7 +123,6 @@ import 'webtopo-svg-edit/dist/style.css'
|
|
|
|
|
|
|
|
|
|
**只接受 github 的 pr,gitee 为 github 镜像库**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 声明
|
|
|
|
|
|
|
|
|
|
**本项目组件库来源均为网络,仅供学习交流使用,请勿将本项目里面的组件用于商业用途**
|
|
|
|
@ -145,8 +135,15 @@ import 'webtopo-svg-edit/dist/style.css'
|
|
|
|
|
|
|
|
|
|
## 常见问题
|
|
|
|
|
|
|
|
|
|
行尾序列问题(error Delete `␍` prettier/prettier)
|
|
|
|
|
`git config --global core.autocrlf false`
|
|
|
|
|
### vue2怎么集成,有vue2的版本吗?
|
|
|
|
|
|
|
|
|
|
vue2建议使用iframe集成,目前没有vue2的版本,如果您接受不了vue2方式集成,也可参考2.1分支进行改造。
|
|
|
|
|
|
|
|
|
|
## 鸣谢
|
|
|
|
|
|
|
|
|
|
吉林省格尺科技有限公司促进该项目诞生
|
|
|
|
|
|
|
|
|
|
[秀英童鞋](https://blog.csdn.net/qq_42862247)对此项目前进的耐心指导
|
|
|
|
|
|
|
|
|
|
## 捐助
|
|
|
|
|
|
|
|
|
|