登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
1 Star 1 Fork 343

wqgalex / vue-webtopo-svgeditor

forked from 咬轮猫 / vue-webtopo-svgeditor
关闭
 
代码 Issues 0 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
克隆/下载
分支 4
标签 0
贡献代码
同步代码
创建 Pull Request
了解更多
对比差异 通过 Pull Request 同步
同步更新到分支
通过 Pull Request 同步
将会在向当前分支创建一个 Pull
Request，合入后将完成同步
取消
提示: 由于 Git 不支持空文件夾，创建文件夹后会生成空的 .keep 文件
public
src
.gitignore
LICENSE
README.md
babel.config.js
package-lock.json
package.json
Loading...
README
MIT

vue-webtopo-svgeditor

基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加组件

当前主分支版本为2.1

版本1.0请点此

图片挂了点此

预览地址

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删除当前选中组件
  • 鼠标滚轮放大缩小选中组件

特别说明

vue2想使用动态组件请使用Vue.component()

vue2使用感谢大佬chj2020指导

举例 src\components\SvgComponents.vue

<template>
  <component :is="component_prop"
             :prop_data=component_prop></component>
</template>
<script>
import Vue from 'vue'
export default {
  props: ['svgInfoData', 'component_prop'],
  data () {
    return {
      componentTag: ''
    }
  },
  created () {
    this.svgInfoData.forEach(f => {
      let componentInfo = {
        template: f.template,
        props: f.props
      }
      Vue.component(f.type, componentInfo)
    })
  }
}
</script>
<style scoped>
</style>

vue2如何支持多节点

首先安装vue-fragment

npm install vue-fragment

引用vue-fragment

//main.js
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)

然后在json文件的template属性值里面最外层使用标签

<fragment></fragment>

例如

<fragment><path :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path></fragment>

注意

当前为了演示可动态添加组件，注册组件写在了通用组件的created生命周期，获取组件定义json的时候写在了Edit和Preview页面，此写法有一个弊端就是每次拖拽组件都会访问SvgComponents.vue的created生命周期进行组件注册，此步可以移到main.js里面使用app.component()进行组件全局注册，传递组件是通过is控制显示组件，提升运行效率

todo

  • vuecli移除改为使用vite构建
  • options写法改为composition写法
  • 画板标尺功能

动态添加组件

可使用任意生成svg代码的工具，我这里使用在线编译器进行模拟

点击这里进行svg图像绘制，我这里以心形为例

绘制心形图片

将svg代码复制下来，双引号进行转义，删除无用属性（比如id），你也可以直接使用我下面的代码

<path fill=\"#FF0000\" stroke=\"#000000\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\"></path>

将拓展字段进行双向绑定 我目前只做了颜色

<path :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path>

修改项目文件夹pubilc下的模拟接口返回的json，新增一项：

{
	"type": "TestAddSvg",
	"title": "测试新增组件",
	"panel_class": "draggable",
	"template": "<path :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path>",
	"props": ["prop_data"],
	"default_attr": {
		"color": "#FF0000"
	},
	"create_type": "draggable",
	"priview_img": "https://svg.yaolunmao.top/test.png"
}

修改json

启动项目，就可以看到刚才添加的组件了

预览界面

也支持直接引入图片，只不过放大有失真，将下面的代码替换上面json文件的template值

<image x=\"-33\" y=\"-33\" width=\"66\" height=\"66\" xlink:href=\"https://svg.yaolunmao.top/test.png\" />

ps：目前中心辅助线的坐标取决于svg组件的中心坐标，请自行添加transform属性调整svg组件中心坐标

截图

绘制组件

绘制图表

编辑器页面

预览界面

License

MIT

MIT License Copyright (c) 2021 咬轮猫 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Starred
1
Star
1
Fork
343

简介

基于vue3实现的svg可视化web组态编辑器，可无需修改代码动态添加svg组件，主要用于物联网mqtt实时系统图 展开 收起
暂无标签
https://svg.yaolunmao.top
MIT
使用 MIT 开源许可协议
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/wqgalex/vue-webtopo-svgeditor.git
git@gitee.com:wqgalex/vue-webtopo-svgeditor.git
wqgalex
vue-webtopo-svgeditor
vue-webtopo-svgeditor
main
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部