从0到1实现流程图02-画布篇_流程画布用什么技术

开始

下面我们开始实现流程图的画布功能，从两个方面着手，第一个是画布的样式，包括网格和背景，第二个是画布的操作，包括平移和缩放。首先来看看两个经典的流程图应用 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>
1
2
3
4
5
6
7
8

然后我们在页面上创建一个容纳画布的容器：

<div id