在 Cytoscape.js 中，使用edgehandles 插件，用于通过拖拽交互创建边（连线）。它允许用户从一个节点拖拽到另一个节点来创建边。以下是 edgehandles 插件的使用方法和详细说明。
- 安装 edgehandles 插件
首先，确保你已经安装了 edgehandles 插件。如果未安装，可以通过以下方式安装：
使用 npm 安装
bash
npm install cytoscape-edgehandles
通过 CDN 引入
html
<script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles@3.5.3/cytoscape-edgehandles.min.js"></script>
运行 HTML
2. 注册插件
在使用 edgehandles 插件之前，需要将其注册到 Cytoscape.js 中。
示例代码
javascript
import cytoscape from 'cytoscape';
import edgehandles from 'cytoscape-edgehandles';// 注册插件
cytoscape.use(edgehandles);
- 初始化 edgehandles
在 Cytoscape 实例初始化后，可以通过 cy.edgehandles() 方法启用 edgehandles 插件。
示例代码
javascript
const cy = cytoscape({container: document.getElementById('cy'),elements: [{ data: { id: 'a' } },{ data: { id: 'b' } },{ data: { id: 'c' } },],style: [{selector: 'node',style: {'label': 'data(id)','width': 50,'height': 50,'background-color': '#666',},},{selector: 'edge',style: {'width': 3,'line-color': '#999',},},],
});// 初始化 edgehandles
const eh = cy.edgehandles({snap: false, // 禁用自动吸附
});
- edgehandles 的配置选项
edgehandles 插件支持多种配置选项，以下是一些常用选项：
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| snap | boolean | true | 是否启用自动吸附到节点 |
| snapFrequency | number | 15 | 自动吸附的灵敏度（像素） |
| snapThreshold | number | 10 | 自动吸附的阈值（像素） |
| handleSize | number | 10 | 拖拽手柄的大小（像素） |
| handleColor | string | #ff0000 | 拖拽手柄的颜色 |
| handleLineWidth | number | 1 | 拖拽手柄的线宽（像素） |
| handleOutlineColor | string | #000000 | 拖拽手柄的轮廓颜色 |
| handleOutlineWidth | number | 1 | 拖拽手柄的轮廓线宽（像素） |
| edgeType | string | ‘flat’ | 边的类型（‘flat’ 或 ‘node’） |
| loopAllowed | boolean | true | 自环边的偏移量（像素） |
| nodeLoopOffset | number | -50 | 是否启用自动吸附到节点 |
| edgeParams | function | null | 自定义边参数的函数 |
| complete | function | null | 拖拽完成时的回调函数 |
| stop | function | null | 拖拽停止时的回调函数 |
- 启用和禁用 edgehandles
你可以通过以下方法动态启用或禁用 edgehandles：
启用
javascript
eh.enable();
禁用
javascript
eh.disable();
- 事件回调
edgehandles 插件提供了多个事件回调函数，可以在不同阶段执行自定义逻辑。
示例代码
javascript
const eh = cy.edgehandles({snap: false,complete: (sourceNode, targetNode, addedEdge) => {console.log('连线完成', sourceNode.id(), targetNode.id(), addedEdge.id());},stop: () => {console.log('连线停止');},
});
- 完整示例
以下是一个完整的示例，展示如何使用 edgehandles 插件：
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cytoscape.js Edgehandles 示例</title><style>#cy {width: 100%;height: 100vh;border: 1px solid #ccc;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script><script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles@3.5.3/cytoscape-edgehandles.min.js"></script>
</head>
<body><div id="cy"></div><script>// 注册插件cytoscape.use(edgehandles);const cy = cytoscape({container: document.getElementById('cy'),elements: [{ data: { id: 'a' } },{ data: { id: 'b' } },{ data: { id: 'c' } },],style: [{selector: 'node',style: {'label': 'data(id)','width': 50,'height': 50,'background-color': '#666',},},{selector: 'edge',style: {'width': 3,'line-color': '#999',},},],});// 初始化 edgehandlesconst eh = cy.edgehandles({snap: false, // 禁用自动吸附complete: (sourceNode, targetNode, addedEdge) => {console.log('连线完成', sourceNode.id(), targetNode.id(), addedEdge.id());},stop: () => {console.log('连线停止');},});// 启用 edgehandleseh.enable();</script>
</body>
</html>
运行 HTML
- 总结
安装插件：通过 npm 或 CDN 引入 edgehandles 插件。
注册插件：使用 cytoscape.use(edgehandles) 注册插件。
初始化插件：通过 cy.edgehandles() 启用插件。
配置选项：根据需求配置 edgehandles 的行为。
事件回调：使用 complete 和 stop 回调函数处理连线完成和停止事件。
通过以上步骤，你可以在 Cytoscape.js 中使用 edgehandles 插件实现拖拽创建连线的功能。
以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！
