关于数据可视化:从0到1实现流程图02画布篇

45次阅读

共计 1851 个字符，预计需要花费 5 分钟才能阅读完成。

上面咱们开始实现流程图的画布性能，从两个方面着手，第一个是画布的款式，包含网格和背景，第二个是画布的操作，包含平移和缩放。首先来看看两个经典的流程图利用 Drawio 和 BPMN editor。

从上图咱们能够看到两种不同的画布，带滚动条的和不带滚动条的，两种类型画布都有各自的优缺点，比方带滚动条的画布能够依据滚动条地位清晰的理解以后画面处于整个画布的地位，然而滚动条在 windows 下款式不够好看。不带滚动条的画布也能实现和滚动条画布一样的有限拖拽、缩放等成果，然而如果画布上图形较扩散，容易失落视线，比拟难以查找。
X6 同时反对下面两种类型画布，在这里咱们还是看重画布的颜值，所以抉择不带滚动条的，如果须要实现带滚动条的画布，能够参考这里。

首先进入装置步骤，如果再 Vue/React/Angular 等我的项目中应用，能够应用 npm 或者 yarn 进行装置，如果应用 script 标签引入，能够应用 CDN 地址。

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

# cdn
# <script href="https://unpkg.com/@antv/x6/dist/x6.js"></script>

而后咱们在页面上创立一个包容画布的容器：

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

接下来咱们就能够初始化一个画布了：

new Graph({container: document.getElementById('container'),
  width: 800,
  height: 800,
})

X6 能够在 Grpah 中全局配置网格状态与款式，例如上面配置了双线条网格，主网格尺寸为 10px * 10px，主网格线条色彩为 #E7E8EA，宽度为 1px，次网格线条色彩为 #CBCED3，宽度为 1px，次网格线条之间距离 4 个主网格。同样能够在 Graph 中全局配置画布的背景色彩和背景图片，如果须要配置，能够参考官网。

new Graph({
  grid: {
    size: 10,
    visible: true,
    type: 'doubleMesh',
    args: [
      {
        color: '#E7E8EA',
        thickness: 1,
      },
      {
        color: '#CBCED3',
        thickness: 1,
        factor: 4,
      },
    ],
  },
})

画布出现的款式如下图：

画布的拖拽平移与滚轮缩放是高频操作，是画布须要具备的基本功能。首先来看拖拽平移，根本用法：

new Graph({
  // 等价于 panning: true
  panning: {enabled: true,}
})

这样在按下鼠标左键，挪动鼠标就能够拖拽画布，有些用户习惯用右键或者触摸板来进行画布的平移操作，X6 也是反对的, 其中左键挪动和右键挪动有一个小小的区别：在图形上按下左键不会触发画布平移，然而右键能够。

new Graph({
  panning: {
    enabled: true,
    eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
  }
})

在 Graph 上配置 mousewheel 能够实现画布缩放性能，根本用法：

new Graph({
  // 等价于 mousewheel: true
  mousewheel: {enabled: true,}
})

试验后发现三个问题：

缩放和平移抵触，滚动滚轮或者滑动触摸板的时候，画布既会缩放，同时也会平移
画布总是依照画布中心点进行缩放，想要的是依照鼠标地位进行缩放
没法管制缩放的最小和最大级别

浏览官网文档后发现，这些问题 X6 都有思考到，能够用以下形式来解决：

设置润饰键 modifiers 为 ctrl，这样在触摸板上应用双指缩放或者按下 Ctrl 键再滚动鼠标才会触发画布缩放，就不会和拖拽平移抵触
设置 zoomAtMousePosition 为 true，这样画布会以鼠标地位为中心点进行缩放
设置 minScale 和 maxScale 能够管制画布可缩放的最小和最大级别

最终的配置和成果如下：

new Graph({
  // 等价于 mousewheel: true
  mousewheel: {
    enabled: true,
    zoomAtMousePosition: true,
    modifiers: 'ctrl',
    minScale: 0.5,
    maxScale: 3,
  }
})

从下面实现的过程来看，X6 不仅有齐备的性能，而且在每个性能上思考得很粗疏，通过组合一些配置项就能实现根本的性能，体现了 X6 开箱即用的特点。