VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中，并能够将画布保存到缓存中

已于 2022-05-25 11:09:14 修改
阅读量4.1k 收藏 6
点赞数 1
分类专栏： vue.js 文章标签： vue.js javascript 前端
于 2022-05-24 17:39:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54000091/article/details/124951336
版权

直接上代码，参考官网的文档安装完之后可以直接运行。

<template>
  <div class="home">
    <div class="left-dragger-nav" id="left-dragger-nav">

    </div>



    <div id="container"></div>
  </div>
</template>

<script lang="ts" setup>
import { Graph,Addon,Shape} from "@antv/x6";

import { onMounted } from "@vue/runtime-core";
var {Rect,Circle} = Shape
const data = {
  // 节点
  nodes: [
    {
      id: "node1", // String，可选，节点的唯一标识
      x: 40, // Number，必选，节点位置的 x 值
      y: 40, // Number，必选，节点位置的 y 值
      width: 80, // Number，可选，节点大小的 width 值
      height: 40, // Number，可选，节点大小的 height 值
      label: "hello", // String，节点标签
      ports: {
        groups: {
          groupA: {
            
            attrs: {
              circle: {
                r: 6,
                magnet: true,
                stroke: "#31d0c6",
                strokeWidth: 2,
                fill: "#fff",
              },
            },
          },
        },
             items: [
      {
        id: 'port1',
        group: 'groupA', // 指定分组名称
         position: 'left'
      },
      {
        id: 'port2',
        group: 'groupA', // 指定分组名称
           position: 'bottom'
      },
      {
        id: 'port3',
        group: 'groupA', // 指定分组名称
         position: 'top'
      },
    ],
      },
     
    },
    {
      id: "node2", // String，节点的唯一标识
      x: 160, // Number，必选，节点位置的 x 值
      y: 180, // Number，必选，节点位置的 y 值
      width: 80, // Number，可选，节点大小的 width 值
      height: 40, // Number，可选，节点大小的 height 值
      label: "world", // String，节点标签
    },
  ],
  // 边
  edges: [
    {
      source: "node1", // String，必须，起始节点 id
      target: "node2", // String，必须，目标节点 id
    },
  ],
};
onMounted(() => {
  const graph = new Graph({
    container: document.getElementById("container") as HTMLElement,
    width: 800,
    height: 600,
    background: {
      color: "#fffbe6", // 设置画布背景颜色
    },
    grid: {
      size: 10, // 网格大小 10px
      visible: true, // 渲染网格背景
    },
  });
  graph.fromJSON(data);




//创建左侧拖拽导航栏


const stencil = new Addon.Stencil({
  target:graph,
  groups:[{name:'group1'},{name:'group2'}],
   collapsable: true,
  stencilGraphWidth: 200,//模板画布宽度
  stencilGraphHeight: 180,//模板画布高度
 
});



(document.getElementById("left-dragger-nav") as HTMLElement).appendChild(stencil.container)
 
      const r = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })
 
      const c = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })

 const c2 = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#4B4A67', 'stroke-width': 6, stroke: '#FE854F' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })
 
      const r2 = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#4B4A67', stroke: '#31D0C6', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })
 
      const r3 = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })
 
      const c3 = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })



      //向分组模板画布下添加拖动的元素，记住一定要在创建Stencil的时候添加模板画布的宽度和高度，不然将拖动元素添加进去不会显示
      stencil.load([r, c, c2, r2.clone()], 'group1')
      stencil.load([c2.clone(), r2, r3, c3], 'group2')
    


});




</script>

<style scoped lang="scss">
#left-dragger-nav{
  width:300px;
  border: 1px solid red;
}
#container{
  transform: translateY(500px);
}
</style>

2.实现将画布的数据保存在缓存中，下次加载画布时初始化上一次画布保存的数据，直接上代码，这次的代码在上面的功能上做了扩展所以有点重复

<template>
  <div class="home">
     <button @click="getGraphNodes()" class="graphBtn">保存画布</button>
    <div class="left-dragger-nav" id="left-dragger-nav">

    </div>



    <div class="Graph">
      <div id="container"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Graph,Addon,Shape,Model} from "@antv/x6";

import { onMounted } from "@vue/runtime-core";
var {Rect,Circle} = Shape


//存储初始化保存画布上的节点数据
var nodes=[
 
  ]
//初始化保存画布上的边数据
var edges=[]
  if(sessionStorage.getItem('nodes')){
    //拿到之前画布保存时保存在缓存中的节点数据
    nodes=JSON.parse(sessionStorage.getItem('nodes') as string)
  }
  if(sessionStorage.getItem('edges')){
    //拿到之前画布保存时保存在缓存中的边数据
    edges=JSON.parse(sessionStorage.getItem('edges') as string)
  }


//初始化画布的数据
const graphData = {
  // 节点
  nodes:nodes,//将初始化画布的节点数据赋值
  // 边
  edges:edges,//将初始化画布的边数据赋值
};


//创建存储画布对象的变量
var graph=null

//保存画布 
function getGraphNodes(){
  window.sessionStorage.setItem('nodes',JSON.stringify(graph.getNodes())) //graph.getNodes()为返回画布中所有的节点，然后再存储在session中，初始化画布的时候，再从缓存中拿到节点数据添加到画布的节点属性中
   window.sessionStorage.setItem('edges',JSON.stringify(graph.getEdges()))//graph.getEdges()为返回画布中所有边。边也就是箭头线，然后再存储在session中，再从缓存中拿到边数据添加到画布的边属性中
  // console.log(graph.getEdges())
}
onMounted(() => {
   graph = new Graph({
    container: document.getElementById("container") as HTMLElement,
    width: 800,
    height: 600,
    background: {
      color: "#fffbe6", // 设置画布背景颜色
    },
    grid: {
      size: 10, // 网格大小 10px
      visible: true, // 渲染网格背景
    },
  });
  graph.fromJSON(graphData);//加载画布初始化的数据




//创建左侧拖拽导航栏

const stencil = new Addon.Stencil({
  target:graph,
    getDragNode(node) {
      console.log(node,'--')
      var {attrs,position,shape,size}=node.store.data
    // 这里返回一个新的节点作为拖拽节点
    return graph.createNode({
      position:position,
      width: size.width,
      height: size.height,
      shape: shape,
      attrs:attrs,
      ports:{
            groups: {
      // 输入链接桩群组定义
      in: {
        position: 'top',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
      // 输出链接桩群组定义
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
       // 输出链接桩群组定义
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
      // 输出链接桩群组定义
      out: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
    }, items: [
      {
        id: 'port1',
        group: 'in',
      },

      {
        id: 'port3',
        group: 'right',
      },
      {
        id: 'port4',
        group: 'left',
      },
      {
        id: 'port5',
        group: 'out',
      },
    ],
      }
    })
  },
  groups:[{name:'group1'},{name:'group2'}],
   collapsable: true,
  stencilGraphWidth: 200,//模板画布宽度
  stencilGraphHeight: 180,//模板画布高度
 
});




(document.getElementById("left-dragger-nav") as HTMLElement).appendChild(stencil.container)
 
      const r = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })
 
      const c = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })

 const c2 = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#4B4A67', 'stroke-width': 6, stroke: '#FE854F' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })
 
      const r2 = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#4B4A67', stroke: '#31D0C6', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })
 
      const r3 = new Rect({
        width: 70,
        height: 40,
        attrs: {
          rect: { fill: '#31D0C6', stroke: '#4B4A67', strokeWidth: 6 },
          text: { text: 'rect', fill: 'white' },
        },
      })
 
      const c3 = new Circle({
        width: 60,
        height: 60,
        attrs: {
          circle: { fill: '#FE854F', strokeWidth: 6, stroke: '#4B4A67' },
          text: { text: 'ellipse', fill: 'white' },
        },
      })



      //向分组模板画布下添加拖动的元素，记住一定要在创建Stencil的时候添加模板画布的宽度和高度，不然将拖动元素添加进去不会显示
      stencil.load([r, c, c2, r2.clone()], 'group1')
      stencil.load([c2.clone(), r2, r3, c3], 'group2')



});




























</script>

<style scoped lang="scss">
#left-dragger-nav{
  width:100vw;
  height: 800px;
  border: 1px solid red;
  position: relative;
}
.Graph{

 position: relative;
  border: 1px solid red;
  width: 800px;
}
.graphBtn{
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
我是你牛爷爷啊
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于Vue+antd，使用antv/x6，实现流程图绘制
tzz_1122的博客
05-21 431
4 节点支持根据label自动适应宽度或换行。5 支持保存为json，或者json数据转图。项目中需要实现用户可以拖曳自定义绘制流程图。1 支持节点拖曳到画布；2 节点支持拖动改变宽高。3 节点支持修改属性。
vue 使用 AntV X6 绘制流程图
weixin_46328739的博客
06-01 3170
【代码】vue 使用 AntV X6 绘制流程图。
修复vue3项目中，使用 antv x6 dnd拖拽插件在将节点拖动到画布上是报elem.getBoundingClientRect is not a function错误的问题
最新发布
文本魔术
05-13 425
在初始化dnd插件的时候，将dndContainer属性去掉就可以了。估计是我dndContainer取值不对造成的。欢迎关注公众号：清晰编程，获取更多精彩内容。
antv x6 拖拽流程DEMO
04-26
ANTV X6拖拽流程。可自定义节点、设备，设计设备或节点的属性。 可自定义流程任何方向，可动态扩展。 后期开发可自定义任何功能。 参考官网DEMO地址：https://x6.antv.antgroup.com/examples 参考官网文档：https://x6.antv.antgroup.com/tutorial/about 本作品是结合官网DEMO做了扩展功能，可保存数据和导入数据。
Vue使用AntV X6绘制流程图（组态呈现）
热门推荐
m0_51431448的博客
10-16 2万+
先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。 那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。
X6 基于VUE流程编辑器开发
zhangwenwu2的博客
07-10 1597
主要插件X6 x6-vue-shape @antv/x6-plugin-dnd。代码太多没有整理出来。
vue antv X6流程图
不要和代码过不去
09-04 1836
第一 下载2.0插件。
vue中使用antv/x6编写自定义流程
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和...
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作...
在Vue中使用antv的示例代码
10-15
2. **挂载到Vue原型**：为了让Vue组件能够全局访问AntV/G2，我们需要将其挂载到Vue的原型对象上。在`main.js`文件中添加以下代码： ```javascript const G2 = require('@antv/g2'); Vue.prototype.$G2 = G2; ```...
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图...
基于vue2.x+antdesign+antv x6实现的流程图编辑器.zip
05-31
然而，这个项目中并没有直接使用React，而是选择了与Vue2.x兼容的Ant Design Vue，它是Ant Design的一个Vue版本，同样提供了丰富的UI组件，如按钮、表格、表单等，用于构建前端应用的界面。 AntV X6 是阿里云AntV...
x6实现节点新增编辑删除
weixin_44151849的博客
09-03 1326
【代码】x6实现节点新增编辑删除。
vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
wzy_PROTEIN的博客
02-28 7799
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
使用 AntV X6 + vue 实现单线流程图
Big_YiFeng的博客
08-01 5132
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。
Vue实现Antv/X6中的示例，以及一些er图开发场景
weixin_46037781的博客
08-31 2092
Vue实现Antv/X6中的示例，以及一些er图开发场景。 已实现ER、 BPMN、 UML、 思维导图、 自定义功能。
Vue3 + antv/x6 实现流程图
FenceRain的博客
03-11 2143
流程图
vue3+antv x6自定义节点样式
qq_40934617的博客
08-11 4352
vue3+antv x6自定义节点样式
vue antv/x6流程图
qq_40287084的博客
02-28 1773
vue antv/x6流程图
vue3中使用antv x6实现右键菜单功能
06-03
要在Vue3中使用AntV X6实现右键菜单功能，你可以按照以下步骤操作： 1. 安装依赖：在Vue项目中安装AntV X6和ant-design-vue库。 ``` npm install @antv/x6 ant-design-vue --save ``` 2. 创建右键菜单组件：创建一个Vue组件，作为X6图形编辑器右键菜单的容器。 ```vue <template> <a-dropdown :trigger="['contextmenu']" @visible-change="onVisibleChange"> <a-menu slot="overlay" :style="{ width: '120px' }"> <a-menu-item @click="deleteNode">删除节点</a-menu-item> </a-menu> <div class="x6-contextmenu" ref="container"></div> </a-dropdown> </template> <script> import { defineComponent } from 'vue'; import { Dropdown, Menu, message } from 'ant-design-vue'; export default defineComponent({ name: 'X6ContextMenu', components: { Dropdown, Menu, MenuItem: Menu.Item, }, emits: ['deleteNode'], mounted() { this.menu = this.$refs.container; this.menu.addEventListener('contextmenu', (e) => { e.preventDefault(); e.stopPropagation(); }); }, methods: { onVisibleChange(visible) { if (visible) { this.$emit('contextmenu', this.menu); } }, deleteNode() { this.$emit('deleteNode'); }, }, }); </script> ``` 3. 在X6图形编辑器中添加右键菜单：在X6图形编辑器中添加右键菜单功能。 ```vue <template> <div class="x6-editor"> <x6-contextmenu @contextmenu="onContextMenu" @deleteNode="deleteNode"></x6-contextmenu> <div class="x6-graph" ref="container"></div> </div> </template> <script> import { defineComponent } from 'vue'; import { Graph, Node } from '@antv/x6'; import X6ContextMenu from './X6ContextMenu.vue'; export default defineComponent({ name: 'X6Editor', components: { X6ContextMenu, }, data() { return { graph: null, }; }, mounted() { this.graph = new Graph({ container: this.$refs.container, grid: true, // 其他配置 }); // 添加节点 const node = this.graph.addNode({ // 节点配置 }); // 右键菜单事件 this.graph.on('contextmenu', ({ x, y }) => { this.$refs.contextmenu.show(x, y); }); }, methods: { onContextMenu(menu) { // 清空菜单 menu.innerHTML = ''; // 添加菜单项 const deleteMenuItem = document.createElement('a-menu-item'); deleteMenuItem.innerHTML = '删除节点'; deleteMenuItem.addEventListener('click', () => { this.deleteNode(); }); menu.appendChild(deleteMenuItem); }, deleteNode() { // 删除节点 this.graph.removeNode(node); }, }, }); </script> ``` 这样就可以在Vue3中使用AntV X6实现右键菜单功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值