从0到1实现流程图应用03-图形篇

最新推荐文章于 2024-05-31 16:12:30 发布

原创

最新推荐文章于 2024-05-31 16:12:30 发布 · 582 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #数据可视化

本文介绍了如何使用X6库创建流程图，包括定义图形如矩形节点，通过attrs和markup定制样式，以及实现图形拖拽功能。X6内置了强大的拖拽和图形功能，支持自定义节点类型以复用公共属性。通过Dnd插件和Stencil组件，可以方便地实现图形的拖放，并在拖拽过程中动态调整节点大小。

开始

在流程图中我们需要通过拖拽交互往画布中添加节点，X6 不仅内置了强大的拖拽功能，还内置了很多常用的图形，接下来我们一起实现基础的流程图图形以及图形拖拽功能。

实现

图形定义

首先来看下一个简单的矩形节点的基础配置：

graph.addNode({
   
   
	shape: 'rect',
  x: 100,
  y: 100,
  width: 80,
  height: 40,
  attrs: {
   
   
    body: {
   
   
      stroke: 'red'
    }
  }
})

在这里插入图片描述

shape：定义图形的形状，X6 内置了 rect、circle、ellipse、polygon、polyline、image、html 等基础形状
x/y：定义图形的左上角坐标
width/height：定义图形的尺寸
看到 attrs 大家可能比较奇怪，这是什么东西？其实可以将 attrs 看做 css 样式集合，其中 body 类似于 css 选择器，body 的值是被选中元素的属性。那 body 又是哪来的呢？这里就要说的另一个重要的配置项markup，markup 表示的是图形的 DOM 结构，内置的 rect 的默认 markup 为：

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

渲染完成后，实际生效的 DOM 为：

<g data-cell-id="ca715562-8faf-4c88-a242-2b18d4ce47a6" data-shape="rect" class="x6-cell x6-node" transform="translate(100,100)">
  <rect fill="#ffffff" stroke="red" stroke-width="2" width="80" height="40"></rect>
  <text font-size="14" fill<