logo

X6

  • 文档
  • API
  • 图表示例
  • 常见问题
  • 更新日志
  • XFlow
  • 所有产品antv logo arrow
  • 2.x
  • 简介
  • 快速上手
  • 基础
    • 画布
    • 节点
    • 边
    • 连接桩
    • 交互
    • 事件
    • 数据
  • 进阶
    • 连接点
    • 工具
    • 群组
    • React 节点
    • Vue 节点
    • Angular 节点
    • HTML 节点
  • 插件
    • 图形变换
    • 对齐线
    • 复制粘贴
    • 快捷键
    • 撤销重做
    • 框选
    • 滚动画布
    • 小地图
    • Dnd
    • Stencil
    • 导出
  • 升级到 2.x 版本
  • 开发者工具

工具

上一篇
连接点
下一篇
群组

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

在本章节中主要介绍工具相关的知识,通过阅读,你可以了解到

  • 如何为节点或边增加工具
  • X6 默认内置哪些常用工具

使用工具

创建节点/边时可以通过 tools 选项来添加小工具:

graph.addNode({
tools: [
{
name: 'button-remove', // 工具名称
args: {
// 工具对应的参数
x: 10,
y: 10,
},
},
],
})
// 如果参数为空,可以简写为:
graph.addNode({
tools: ['button-remove'],
})
graph.addEdge({
source,
target,
vertices: [
{
x: 90,
y: 160,
},
{
x: 210,
y: 160,
},
],
tools: ['vertices', 'segments'],
})

节点/边创建后可以调用 hasTool(name)、addTools(...)、removeTools() 等方法来添加或删除工具。

内置工具

工具是渲染在节点/边上的小部件,用于增强节点/边的交互能力,我们分别为节点和边提供了以下内置工具:

节点:

  • button 在指定位置处渲染一个按钮,支持自定义按钮的点击交互。
  • button-remove 在指定的位置处,渲染一个删除按钮,点击时删除对应的节点。
  • boundary 根据节点的包围盒渲染一个包围节点的矩形。注意,该工具仅仅渲染一个矩形,不带任何交互。

边:

  • vertices 路径点工具,在路径点位置渲染一个小圆点,拖动小圆点修改路径点位置,双击小圆点删除路径点,在边上单击添加路径点。
  • segments 线段工具。在边的每条线段的中心渲染一个工具条,可以拖动工具条调整线段两端的路径点的位置。
  • boundary 根据边的包围盒渲染一个包围边的矩形。注意,该工具仅仅渲染一个矩形,不带任何交互。
  • button 在指定位置处渲染一个按钮,支持自定义按钮的点击交互。
  • button-remove 在指定的位置处,渲染一个删除按钮,点击时删除对应的边。
  • source-arrowhead 和 target-arrowhead 在边的起点或终点渲染一个图形(默认是箭头),拖动该图形来修改边的起点或终点。