antv/X6拖拽节点变成圆形

颜笑·

已于 2023-05-16 14:49:11 修改

阅读量768

点赞数

文章标签：前端 npm

于 2023-05-16 14:35:23 首次发布

本文链接：https://blog.csdn.net/init_yanxiao/article/details/130705121

版权

文章讲述了如何利用AntVX6库中的Shape.Circle.define方法创建并定义圆形节点，包括设置节点的样式和文本信息。在实现拖拽功能时，通过记录节点坐标并在拖拽时调用node.position方法更新坐标，从而达到拖动效果。示例代码创建了一个可拖动的圆形节点并演示了修改节点样式的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们调用 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',
  },
});