diff --git a/README.md b/README.md
index b22c785..836a403 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,12 @@
# vue-webtopo-svgeditor
-> 纯vue3实现的svg可视化web组态编辑器。主要用于物联网mqtt实时系统图
+> 纯vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加组件
-这个分支为开发分支，之前的版本每个组件都要写一个vue文件，项目不仅乱还难以管理，今天增加了这个分支首先要改变组件模式，调整为动态组件，等这个完成之后继续完善之前的代码
+当前主分支版本为2.0
+## [版本1.0请点此](https://svgv1.yaolunmao.top)
+
+## [图片挂了点此](https://www.cnblogs.com/Hero-/p/14784744.html)
## 预览地址
[https://svg.yaolunmao.top](https://svg.yaolunmao.top)
@@ -37,20 +40,59 @@ yarn serve
- deleted删除当前选中组件
- 鼠标滚轮放大缩小选中组件
-## Todo
+## 动态添加组件
+
+可使用任意生成svg代码的工具，我这里使用在线编译器进行模拟
+
+点击[这里](https://svgedit.yaolunmao.top/)进行svg图像绘制，我这里以心形为例
+
+
+
+将svg代码复制下来，双引号进行转义，删除无用属性（比如id），你也可以直接使用我下面的代码
+
+```
+
+```
+
+将拓展字段进行双向绑定 我目前只做了颜色
+
+```
+
+```
+
+修改项目文件夹pubilc下的模拟接口返回的json，新增一项：
+
+```
+{
+ "type": "TestAddSvg",
+ "title": "测试新增组件",
+ "template": "",
+ "props": ["svg_color"],
+ "default_color":"#FF0000",
+ "priview_img":"https://svg.yaolunmao.top/test.png"
+}
+```
+
+
+
+启动项目，就可以看到刚才添加的组件了
+
+
+
+也支持直接引入图片，只不过放大有失真，将下面的代码替换上面json文件的template值
+
+```
+
+```
-- 鼠标框选批量选中
-- 画布绑定mqtt平台
-- 组件旋转
-- 画布缩放
-- 编辑器撤销、重做
+ps：目前中心辅助线的坐标取决于svg组件的中心坐标，请自行添加transform属性调整svg组件中心坐标
## 截图
-
+
-
+
## License
-[MIT](http://opensource.org/licenses/MIT)
\ No newline at end of file
+[MIT](http://opensource.org/licenses/MIT)
diff --git a/src/views/CircuitEdit.vue b/src/views/CircuitEdit.vue
index 379843c..6e0e48a 100644
--- a/src/views/CircuitEdit.vue
+++ b/src/views/CircuitEdit.vue
@@ -5,12 +5,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
预览
+
+
+ 添加组件
+
+
1.0版本
@@ -23,6 +56,10 @@
href="https://github.com/yaolunmao/vue-webtopo-svgeditor">
帮助
+
+ 导出svg
+
+ height="100%"
+ id="svgCanvas">
",
+ props: ["svg_color"],
+ default_color: "#FF0000",
+ priview_img: "https://svg.yaolunmao.top/test.png"
+ },
+ addSvgVisible: false,
svgInfoData: [],//接口获取到的组件数据
shrink: true,//收缩状态 true收缩 false展开
svgLists: [],//svg列表
@@ -120,6 +167,18 @@ export default {
}
},
methods: {
+ showAddSvgModal () {
+ this.addSvgVisible = true;
+ },
+ addSvgHandleOk () {
+ this.svgInfoData.push(this.testAddSvg);
+ this.addSvgVisible = false;
+ },
+ exportSvg () {
+ var exportStr = document.querySelector("#svgCanvas").outerHTML;
+ console.log(exportStr);
+ alert("请使用F12查看consolo面板");
+ },
MouseMove (e) {
let _this = this;
@@ -180,9 +239,9 @@ export default {
}
}, 1);
},
- MousedownCanvas () {
+ MousedownCanvas (e) {
//console.log('点击了画布');
-
+ console.log('当前鼠标位置',e.clientX,e.clientY)
},
MousedownSvg (id, index, pointX, pointY, e) {
window.CurrentlySelectedToolBar.Type = '';
@@ -191,8 +250,8 @@ export default {
this.selectSvg.ID = id;
this.selectSvg.Index = index;
this.selectSvg.mouseStatus = 1;
- this.selectSvg.mPositionX = e.clientX;
- this.selectSvg.mPositionY = e.clientY;
+ this.selectSvg.mPositionX = e.offsetX;
+ this.selectSvg.mPositionY = e.offsetY;
this.selectSvg.pointX = pointX;
this.selectSvg.pointY = pointY;
this.selectSvgInfo = this.svgLists[index];
@@ -217,7 +276,6 @@ export default {
e.preventDefault();
//判断滚轮方向 -100是往上滑 100是下滑
let svgZoom = e.deltaY < 0 ? 0.1 : -0.1;
- console.log(e.deltaY);
selectSvgInfo.size += svgZoom;
selectSvgInfo.size = parseFloat(selectSvgInfo.size.toFixed(1));
if (selectSvgInfo.size < 1) {