Vue2.0+AntvX6—基类Cell

最新推荐文章于 2024-05-09 08:50:28 发布
最新推荐文章于 2024-05-09 08:50:28 发布
阅读量2.8k 收藏 7
点赞数
分类专栏： antv-x6 vue2 文章标签： javascript 开发语言 ecmascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZMN0057/article/details/126451126
版权

什么是基类Cell？

在 X6 的 Shape 命名空间中内置了一些基础图形，如 Rect、Edge、Circle 等，这些图形最终都有共同的基类 Cell，定义了节点和边共同属性和方法，
在这里插入图片描述

一、Shape的基本用法

方法一：

step1 :引入shape

import { Graph, Shape } from '@antv/x6'

step2:用构造函数来创建节点/边

使用这些图形的构造函数来创建节点/边，然后调用 graph.addNode 或 graph.addEdge 方法将其添加到画布。

    // 用构造函数来创建节点/边
    graphAddNodeEdge() {
      const rect = new Shape.Rect({
        id: 'node1',
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: 'rect',
        zIndex: 2
      })

      const circle = new Shape.Circle({
        id: 'node2',
        x: 280,
        y: 200,
        width: 60,
        height: 60,
        label: 'circle',
        zIndex: 2
      })

      const edge = new Shape.Edge({
        id: 'edge1',
        source: rect,
        target: circle,
        zIndex: 1
      })
      this.graph.addNode(rect)
      this.graph.addNode(circle)
      this.graph.addEdge(edge)
    }

方法二：

step1 :引入shape

import { Graph, Shape } from '@antv/x6'
const { Rect, Circle, Edge } = Shape

step2:用构造函数来创建节点/边

 // 用构造函数来创建节点/边
    graphAddNodeEdge() {
      const rect = new Rect({
        id: 'node1',
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: 'rect',
        zIndex: 2
      })

      const circle = new Circle({
        id: 'node2',
        x: 280,
        y: 200,
        width: 60,
        height: 60,
        label: 'circle',
        zIndex: 2
      })

      const edge = new Edge({
        id: 'edge1',
        source: rect,
        target: circle,
        zIndex: 1
      })
      this.graph.addNode(rect)
      this.graph.addNode(circle)
      this.graph.addEdge(edge)
    }

在这里插入图片描述

二、Shape的基础选项

选项名类型默认值描述
idStringundefined节点/边的唯一标识，默认使用自动生成的 UUID。
markupMarkupundefined节点/边的 SVG/HTML 片段
attrsObject{ }节点/边属性样式。
shapeStringundefined渲染节点/边的图形。
viewStringundefined渲染节点/边的视图。
zIndexNumberundefined节点/边在画布中的层级，默认根据节点/边添加顺序自动确定。
visibleBooleantrue节点/边是否可见。
parentStringundefined父节点。
childrenStringundefined子节点/边。
dataanyundefined节点/边关联的业务数据。

三、Shape的基础选项详解——markup

markup 指定了渲染节点/边时使用的 SVG/HTML 片段，使用 JSON 格式描述。例如 Shape.Rect 节点的 markup 定义如下。

{
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    }, 
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
}

表示该节点内部包含 和 两个 SVG 元素，渲染到页面之后，节点对应的 SVG 元素看起来像下面这样。 

<g data-cell-id="c2e1dd06-15c6-43a4-987a-712a664b8f85" class="x6-cell x6-node" transform="translate(40,40)">
  <rect fill="#fff" stroke="#000" stroke-width="2" fill-opacity="0.5" width="100" height="40"></rect>
  <text font-size="14" xml:space="preserve" fill="#333" text-anchor="middle" font-family="Arial, helvetica, sans-serif" transform="matrix(1,0,0,1,50,20)">
    <tspan dy="0.3em" class="v-line">rect</tspan>
  </text>
</g>

markup 定义

interface Markup {
tagName: string
ns?: string
selector?: string
groupSelector?: string | string[]
attrs?: { [key: string]: string | number }
style?: { [key: string]: string | number }
className?: string | string[]
textContent?: string
children?: Markup[]
}

tagName: SVG/HTML 元素标签名。
ns:与 tagName 对应的元素命名空间，默认使用 SVG 元素命名空间 “http://www.w3.org/2000/svg”，当 tagName 指定的标签是 HTML 元素时，需要使用 HTML 元素的命名空间 “http://www.w3.org/1999/xhtml”。(官网的解释，本人没有看懂，哪位大神懂了，欢迎评论交流。)

selector：SVG/HTML 元素的唯一标识，通过该唯一标识为该元素指定属性样式。

 // markeup-selector
    testMarkeup() {
      const rect = new Rect({
        id: 'node1',
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        markup: [
          {
            tagName: 'rect', //SVG/HTML 元素标签名
            selector: **'body'**, //用来指定属性样式
          },
          {
            tagName: 'text',
            selector: **'label'**
          }
        ],
        attrs: {
          // 指定 rect 元素的样式
          **body**: {
            stroke: '#000', // 边框颜色
            fill: 'pink' // 填充颜色
          },
          // 指定 text 元素的样式
          **label**: {
            text: 'rect', // 文字
            fill: '#333' // 文字颜色
          },
        }
      })
      this.graph.addNode(rect)
    }

在这里插入图片描述

groupSelector:群组选择器，通过群组选择器可以为该群组对应的多个元素指定样式。

{
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
      groupSelector: 'group1',
    }, 
    {
      tagName: 'rect',
      selector: 'wrap',
      groupSelector: 'group1',
    }, 
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
}

new SomeNode({
  attrs: { 
    group1: {
      fill: '#2ECC71',
    },
  },
})

attrs：该 SVG/HTML 元素的默认属性键值对，用于定义通用属性。
style：该 SVG/HTML 元素的行内样式键值对。
className：该 SVG/HTML 元素的 CSS 样式名。
textContent：该 SVG/HTML 元素的文本内容。
children：嵌套的子元素。

四、Shape的基础选项详解——shape

节点/边的图形，类似 MVC 模式中的 Model，决定了节点/边的数据逻辑，

内置节点

构造函数shape 名称描述
Shape.Rectrect矩形
Shape.Circlecircle圆形
Shape.Ellipseellipse椭圆
Shape.Polygonpolygon多边形
Shape.Polylinepolyline折线
Shape.Pathpath路径
Shape.Imageimage图片
Shape.HTMLhtmlHTML 节点，使用 foreignObject 渲染 HTML 片段
Shape.TextBlocktext-block文本节点，使用 foreignObject 渲染文本
Shape.BorderedImageimage-bordered带边框的图片
Shape.EmbeddedImageimage-embedded内嵌入矩形的图片
Shape.InscribedImageimage-inscribed内嵌入椭圆的图片
Shape.Cylindercylinder圆柱

内置边

构造函数shape名称描
Shape.Edgeedge边
Shape.DoubleEdgedouble-edge双线边
Shape.ShadowEdgeshadow-edge阴影边

五、Shape的基础选项详解——其他

id

id 是节点/边的唯一标识，推荐使用具备业务意义的 ID，默认使用自动生成的 UUID。

attrs

attrs 选项定制节点样式，这是一个复杂对象。

该对象的 Key 是节点中 SVG 元素的选择器(Selector)，对应的值是应用到该 SVG 元素的 SVG 属性值(如 fill 和 stroke)。
选择器(Selector)通过节点的 markup 确定，如上面Selector图解中Rect 节点定义了 ‘body’(代表 元素) 和 ‘label’(代表 元素) 两个选择器。

① 使用 CSS 选择器来指定节点样式：
（使用 CSS 选择器时需要注意，指定的 CSS 选择器可能选中多个元素，这时对应的属性样式将同时应用到多个元素上）

const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  attrs: { 
    rect: { // 使用 rect css 选择器替代预定义的 body 选择器
      fill: '#2ECC71',
      stroke: '#000',
    },
    text: { // 使用 text css 选择器替代预定义的 label 选择器
      text: 'rect',
      fill: '#333',
      fontSize: 13,
    },
  },
})

支持使用小驼峰(camelCase)格式的属性名，如 ‘fontSize’，这就避免了 ‘font-size’ 这种属性名作为对象 Key 时需要加引号的书写麻烦。
② 除了标准的 SVG 属性，在 X6 中还定义了一系列特殊属性，还可以使用 CSS 来定制样式，节点和边渲染到画布后分别有 ‘x6-node’ 和 ‘x6-edge’ 两个样式名

// markeup
    testMarkeup() {
      const rect = new Rect({
        id: 'node1',
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        markup: [
          {
            tagName: 'rect', //SVG/HTML 元素标签名
            selector: 'body', //用来指定属性样式,
          },
          {
            tagName: 'text',
            selector: 'label'
          }
        ],
        attrs: {
          label: {
            text: 'rect', // 文字
            fill: '#333' // 文字颜色
          }
        }
      })
      this.graph.addNode(rect)
    }
。。。
<style scoped>
/deep/ .x6-node rect {
  fill: #2ecc71;
  stroke: #000;
}
</style>

在这里插入图片描述
③ 调用实例上的 attr() 方法来修改节点属性样式。

rect.attr('label/text', 'hello')

// 等同于
rect.attr('label', {
  text: 'hello'
})

// 等同于
rect.attr({
  label: {
    text: 'hello'
  }
})

当传入的属性值为 null 时可以移除该属性

rect.attr('label/text', null)

view

指定渲染节点/边所使用的视图，视图的概念与 MVC 模式中的 View 一致

zIndex

节点/边在画布中的层级，默认根据节点/边添加顺序自动确定。节点/边渲染到画布后可以通过 cell.getZIndex() 和 cell.setZIndex(z: number) 来获取或设置 zIndex 的值，也可以调用 cell.toFront() 和 cell.toBack() 来将其移到最顶层或对底层

visible

节点/边是否可见。

parent

父节点 ID。

children

子节点/边的 ID 数组。

data

与节点/边关联的业务数据。

const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  data: { 
    bizID: 125,
    date: '20200630',
    price: 89.00,
  }
})

六、选项默认值

Shape.Rect.config({
  width: 80,
  height: 40,
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    }, 
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
  attrs: {
    body: {
      fill: '#fff',
      stroke: '#000',
      strokeWidth: 2,
    },
    label: {
      fontSize: 14,
      fill: '#333',
      fontFamily: 'Arial, helvetica, sans-serif',
      textAnchor: 'middle',
      textVerticalAnchor: 'middle',
    }
  },
})

默认选项可以简化我们添加节点的代码，例如，只需要指定矩形节点的位置和文本就可以添加一个矩形到画布。

const rect = graph.addNode({
  x: 100,
  y: 100,
  attrs: {
    label: {
      text: 'rect',
    },
  },
})

每次调用 config(options) 都是与当前预设值进行深度 merge，例如下面代码分别将矩形的边框默认颜色修改为红色和将默认文本颜色修改为蓝色，最终效果是两者的叠加。

// 只修改边框的默认颜色
Shape.Rect.config({
  attrs: {
    body: {
      stroke: 'red',
    },
  },
})

// 只修改默认文本颜色
Shape.Rect.config({
  attrs: {
    label: {
      fill: 'blue',
      // 覆盖上面定义的 red
      stroke: '#000',
    },
  },
})

七、自定义选项

使用了 label 选项来设置矩形的标签文本

const rect = graph.addNode({
  x: 100,
  y: 100,
  label: 'rect',
})

只是在定义矩形时通过定义 propHooks 钩子来消费自定义选项，看下面 label 选项钩子的实现细节。

Shape.Rect.config({
  // 通过钩子将 label 应用到 'attrs/text/text' 属性上
  propHooks(metadata) {
    const { label, ...others } = metadata
    if (label) {
      ObjectExt.setByPath(others, 'attrs/text/text', label)
    }
    return others
  },
})

通过 propHooks 钩子，我们很容易就扩展出一些自定义的选项。例如，我们可以将某些样式定义为节点的选项，这样不仅可以减少嵌套，而且使创建节点的代码语义性更强。
看下面的代码，为矩形定义 rx 和 ry 自定义选项。

Shape.Rect.config({
  propHooks: {
    rx(metadata) { 
      const { rx, ...others } = metadata
      if (rx != null) {
        ObjectExt.setByPath(others, 'attrs/body/rx', rx)
      }
      return others
    },
    ry(metadata) { 
      const { ry, ...others } = metadata
      if (ry != null) {
        ObjectExt.setByPath(others, 'attrs/body/ry', ry)
      }
      return others
    },
  },
})

这样，我们就可以很方便添加圆角矩形。

const rect = graph.addNode({
  x: 100,
  y: 100,
  rx: 5,
  ry: 10,
  label: 'rect',
})
代码caigou~旺旺旺
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2.0+AntvX6
qq_40287084的博客
03-02 5419
Vue2.0+AntvX6
antv-流程图，一个简易的基于antv x6实现的流程图绘制
12-15
antv-流程图，一个简易的基于antv x6实现的流程图绘制
VUE+antv/x6实现拖拽自定义流程图
wang_zhiwei0728的博客
10-26 1万+
最近公司需要做一个流程图， 看了看antv/X6感觉挺合适，就研究了半个月。 网上也没什么资料，又怕自己忘，就自己记录一下用到得一些事件方法，方便以后再用到可以查阅。 一：实现流程图最重要得就是画布了，官网上都有文档可以轻松实现画布。下面放一下我用VUE写得画布代码。 首先最重要得就是下载依赖了， x6在vue中下载得话需要下载两个依赖； npm install @antv/x6 --save npm install @antv/x6-vue-shape 把这两个依赖下载好就可以在vue中使用X6了
antV X6的简要使用教程
最新发布
爱蹦跶的全栈大A阿
05-09 1489
在我们的日常开发工作中，我们经常需要构建复杂的交互式图表。这是一项挑战，因为我们需要处理大量的数据，同时还要保证图表的可读性和用户体验。幸运的是，有一些强大的工具可以帮助我们完成这项任务，antv x6就是其中之一。在这篇博客中，我将向你介绍如何使用antv x6构建交互式图表，并提供一些代码示例。​antv x6还允许我们创建自定义的节点。
AntV X6流程图绘制程序（官方示例纯javascript+html+css）
yao136的专栏
08-09 6413
纯javascript+html+css绘制流程图，使用antv x6
Vue使用AntV X6绘制流程图（组态呈现）
热门推荐
m0_51431448的博客
10-16 2万+
先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。 那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。
初识antvX6
qq_52965813的博客
12-08 2750
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
Vue2.0+ThreeJs写的一个3D粮仓管理系统源码.zip
05-08
Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了3D粮仓管理系统。 Vue2.0+ThreeJs写的一个3D粮仓管理系统源码，该项目基于ThreeJs+Vue2.0+Vue-Element+Admin实现了...
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
10-20
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
本项目基于 Vue.js 3.0 框架构建，采用了 Vue CLI 和 Vite 两种构建工具，结合了 Ant Design Vue 2.0 UI 库，并且利用了 TypeScript 4.0 的强类型特性，打造了一个功能完善的后台管理系统模板。下面将详细介绍这个...
了解AntV/x6
weixin_73416102的博客
03-26 1万+
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
wzy_PROTEIN的博客
02-28 8264
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
React中antv X6 2.0的使用体验（含demo）
m0_65104145的博客
08-15 2846
本次在React中使用antv X6 2.0的功能包括：1、节点右键菜单；2、节点自动布局；3、根据列表动态渲染节点；4、节点之间的连线；5、模版引用时的预览功能；6、使用拖拽组件添加节点（包含2种样式 及群组的添加）；
antvx6基础学习
qq_52685664的博客
05-04 734
【代码】antvx6基础学习。
介绍几种antvX6常用的方法或配置（使用数据渲染节点和连线、图像居中完整展示、节点不可移出画布、节点图片和标签变化）
wzy_PROTEIN的博客
03-01 3639
接本专栏的上一篇antv X6新手教程，补充一些新的需求实现，丰富巩固antv X6的使用。此篇是以上一篇为基础的，如有初学者可以看本专栏的上一篇。将编辑好的拓扑图展示在其他页面、根据节点数据来改变节点的图片和标签等
【前端】AntV X6学习笔记
lcukyNwa的博客
11-16 1653
/ 注册自定义模板节点 'custom-image'width: 62, // 节点宽度height: 62, // 节点高度markup: [selector: 'body', // 节点外部矩形},},},],attrs: {body: {stroke: 'green', // 外部矩形边框颜色fill: 'pink', // 外部矩形填充颜色},image: {refWidth: '100%', // 图片宽度和节点宽度一致。
「AntV」X6图编辑器的应用——流程图实现
这魏先森-forguo
02-02 1万+
「AntV」X6图编辑器的应用——流程图实现
vue2.0+ts 后台模板
10-01
Vue2.0是一款流行的JavaScript框架，用于构建用户界面。它具有良好的模块化和组件化特性，使开发人员能够更高效地开发可重用的前端代码。 而TypeScript（简称TS）则是一种由微软开发的开源编程语言，它是JavaScript...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值