从0到1实现流程图07-工具篇

开始

一个开箱即用的技术框架，一定会有完备的配套工具。X6 提供了大量的图编辑功能，它们基本上都是基于配置式，而且配置参数是经过大量业务实践出来的，开发过程中充分考虑可扩展性以及兼容性，能覆盖到大部分的功能场景。

实现

节点缩放

通过拖拽修改节点的尺寸和旋转角度是常见功能，在 X6 中只需要做简单的配置：

const graph = new Graph({
   
  resizing: true,
  rotating: true,
})

还可以通过 css 来修改操作元素的默认样式：

.x6-widget-transform {
   
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239EDD;
  > div {
   
    border: 1px solid #239EDD;
  }
  > div:hover {
   
    background-color: #3DAFE4