Butterfly项目Canvas组件详解：构建交互式可视化画布-优快云博客

Butterfly项目Canvas组件详解：构建交互式可视化画布

【免费下载链接】butterfly 🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件) 项目地址: https://gitcode.com/gh_mirrors/butt/butterfly

什么是Butterfly Canvas组件

Butterfly的Canvas组件是一个功能强大的可视化画布系统，专为构建复杂的节点-边关系图而设计。它提供了丰富的交互能力和高度可定制的可视化效果，适用于流程图、拓扑图、脑图等多种场景。

核心功能特性

1. 基础配置

Canvas组件通过配置对象初始化，主要参数包括：

let canvas = new Canvas({
  root: domElement,       // 必须，画布容器DOM
  zoomable: true,         // 可缩放
  moveable: true,         // 可平移
  draggable: true,        // 节点可拖动
  linkable: true,         // 可连接边
  disLinkable: true,      // 可断开连接
  theme: { /* 主题配置 */ },
  global: { /* 全局配置 */ }
});

2. 主题系统

Canvas提供了完善的主题配置系统，可以自定义各类元素的样式和行为：

边(Edge)配置

shapeType: 支持多种边类型：
- Bezier: 贝塞尔曲线
- Flow: 折线
- Straight: 直线
- Manhattan: 曼哈顿线（直角线）
- AdvancedBezier: 改进型贝塞尔曲线
arrow: 是否显示箭头
label: 边标签
defaultAnimate: 是否启用默认动画

端点(Endpoint)配置

linkableHighlight: 连接时高亮
limitNum: 限制连接数
expandArea: 扩展连接热区

组(Group)配置

type: normal(可拖入拖出)或inner(仅可拖入)
includeGroups: 是否允许包含子组

3. 数据渲染

Canvas提供两种渲染方式：

// 初始渲染
canvas.draw({
  groups: [...],
  nodes: [...],
  edges: [...]
});

// 重新渲染（会清除现有内容）
canvas.redraw({...});

核心API详解

节点操作

// 添加单个节点
canvas.addNode(nodeConfig);

// 添加多个节点
canvas.addNodes([nodeConfig1, nodeConfig2]);

// 获取节点
const node = canvas.getNode(nodeId);

// 删除节点
canvas.removeNode(nodeId);

边操作

// 添加边
canvas.addEdge(edgeConfig);

// 获取相邻边
const edges = canvas.getNeighborEdges(nodeId);

// 设置边层级
canvas.setEdgeZIndex(edges, zIndex);

布局控制

// 自动布局
canvas.autoLayout('ForceLayout', {rankdir: 'TB'});

// 聚焦节点（带动画）
canvas.focusNodeWithAnimate(nodeId, 'node', {offset: [0,0]});

画布控制

// 缩放控制
canvas.setZoomable(true);
canvas.zoom(0.8);  // 缩放到80%

// 平移控制
canvas.setMoveable(true);
canvas.move([x, y]);

// 撤销/重做
canvas.undo();
canvas.redo();

高级功能

1. 多级关联查询

// 查询节点的N级关联节点和边
const result = canvas.getNeighborNodesAndEdgesByLevel({
  node: startNode,
  type: 'all',  // all|in|out
  level: 3      // 查询层级
});

2. 自动扩展画布

当节点被拖拽到画布边缘时，可以自动扩展画布：

theme: {
  autoFixCanvas: {
    enable: true,
    autoMovePadding: [20, 20, 20, 20]  // 触发扩展的内边距
  }
}

3. 曼哈顿线配置

theme: {
  edge: {
    shapeType: 'Manhattan',
    hasRadius: true  // 是否显示圆角
  }
}

最佳实践

性能优化：对于大规模数据，建议使用redraw而非多次addNode/addEdge
交互体验：合理配置expandArea可以显著提升连接体验
动画效果：启用defaultAnimate可以为边添加流动动画效果
层级管理：通过setEdgeZIndex控制边的显示层级

Butterfly的Canvas组件通过丰富的配置和API，为开发者提供了构建复杂可视化应用的强大工具。无论是简单的流程图还是复杂的拓扑关系图，都能通过合理的配置实现出色的可视化效果。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考