antv/X6拖拽节点变成圆形

我们调用 Shape.Circle.define() 方法创建了一个圆形节点。Shape.Circle 是定义圆形的一个工厂方法，它返回一个对象，包含 Shape.Circle.define() 方法生成的图形的形状信息。它的 attrs 属性用来定义节点的样式，attrs.circle 表示绘制的圆形的样式信息，可以设置圆心位置和半径等属性。attrs.text 用来定义节点上的文本信息。

在实现拖拽功能时，可以在 Shape.Circle.define() 方法内部添加一些逻辑，比如记录节点的坐标等信息。然后，可以在进行节点拖拽时，调用 node.position(x, y) 方法来修改节点的坐标信息，从而实现节点拖拽的功能。

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

const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
});

// 创建一个圆形节点
const circle = Shape.Circle.define({
  shape: 'circle',
  width: 60,
  height: 60,
  attrs: {
    circle: {
      cx: 30,
      cy: 30,
      r: 30,
      fill: '#777',
    },
    text: {
      textWrap: {
        text: 'Circle',
      },
    },
  },
});

// 添加节点到画布上
const node = graph.addNode({
  x: 100,
  y: 100,
  shape: circle,
});

// 可以修改节点的样式
node.attr({
  circle: {
    fill: '#ff0',
  },
});