摘要：示例： 节点属性vue页面 <el-drawer :title="title" :visible.sync="drawer"> <!-- {{ cellType }} --> <el-form :model="form" ref="form" label-width="90px" label-pos 阅读全文

摘要：1: 创建节点时初始化 data（基础） // 初始化画布 const graph = new Graph({ container: document.getElementById('container') }); // 创建节点时设置初始 data const node = graph.addNo 阅读全文

摘要：鼠标事件 graph.on('cell:click', ({ e, x, y, cell, view }) => {}) graph.on('node:click', ({ e, x, y, node, view }) => {}) graph.on('edge:click', ({ e, x, y 阅读全文

摘要：示例： 注册节点： Graph.registerNode( "custom-node-with-port", { inherit: "rect", width: 100, height: 40, attrs: { body: { stroke: "#8f8f8f", strokeWidth: 1, 阅读全文

摘要：示例： 注册图片节点 Graph.registerNode( "custom-image", { inherit:'image', width: 200, height:200, ports: { ...this.ports }, markup:[ { tagName: "image", selec 阅读全文

摘要：实现效果 * 在左侧拖拽到右侧绘制流程图 * 相关基本操作 ） 页面布局创建： 左右两部分 vue部分 给每个拖拽区域绑定 @mousedown="handleDragEnd <template> <div class="conatainer"> <div class="left"> <!-- 图形 阅读全文

摘要：ps： 基于antv x6. 3.0版本 ，具体在文档 可以参考官网 安装依赖 ，默认会安装最新版本 v3, 如果想使用v2版本 指定版本号安装，本示例安装最新版本： npm install @antv/x6 --save 初始化画布 vue2 <template> <div class="cona 阅读全文

摘要：实现效果~，主要使用,注意 结构解析值 ！！！ ,当前节点没有node属性 如果： node.on('change:data', ({ node }) => {}) 错！！！ ，为了少掉几个头发。。。。。。 打印看看~ this.curNode.on('change:data', (current) 阅读全文

摘要：使用antv x6 vue组件创建节点信息-当节点过于复杂可以考虑，避免使用markup\attr过于复杂 官网 antv -vue组件 示例1 、 使用inject 接收父组件传值 import { Graph } from '@antv/x6' import { register } from 阅读全文

摘要：注册节点 Graph.registerNode( 'custom-node-width-port', { inherit: 'rect', width: 100, height: 40, attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill 阅读全文

摘要：1、画布大小 画布自适应当前窗体大小 在实例化 Graph 对象的时候，可以通过设置 width 和 height 固定画布大小，如果不设置，就会以画布容器大小初始化画布。 在项目实践中，经常会遇到下面两种场景： 画布容器还没有渲染完成（此时尺寸为 0），就实例化画布对象，导致画布元素显示异常。 页 阅读全文

摘要：安装 # npm npm install @antv/x6 --save # yarn yarn add @antv/x6 1. 初始化画布 <div id="container"></div> import { Graph } from '@antv/x6' const graph = new G 阅读全文