mxgraph 根据节点id获取cell
时间: 2023-09-17 13:08:43 浏览: 81
要根据节点 id 获取 cell,可以使用 mxGraph 的 `getModel` 方法获取 dataModel,然后遍历 dataModel 中的所有 cell,通过 cell.id 属性与指定的节点 id 进行比较,匹配成功即可得到对应的 cell。
示例代码如下:
```javascript
function getCellById(graph, id) {
var cells = graph.getModel().cells; // 获取 dataModel 中的所有 cell
for (var key in cells) {
var cell = cells[key];
if (cell.id === id) { // 判断 cell 的 id 是否与指定的 id 相同
return cell; // 返回匹配成功的 cell
}
}
return null; // 匹配失败,返回 null
}
```
其中,`graph` 是 mxGraph 实例,`id` 是指定的节点 id。使用该函数可以方便地根据节点 id 获取对应的 cell。
相关问题
mxgraph 嵌入节点
在 mxGraph 中,可以通过将节点作为子节点嵌入到另一个节点中来实现节点的嵌套。
以下是一个示例,演示如何将一个节点嵌入到另一个节点中:
```javascript
// 创建一个 mxGraph 实例
var graph = new mxGraph(container);
// 创建两个节点
var parent = graph.insertVertex(null, null, 'Parent', 20, 20, 80, 30);
var child = graph.insertVertex(null, null, 'Child', 40, 40, 40, 20);
// 将 child 节点嵌入到 parent 节点中
graph.addCell(child, parent);
```
在这个示例中,我们先创建了两个节点 `parent` 和 `child`。然后,我们通过 `graph.addCell(child, parent)` 方法将 `child` 节点嵌入到 `parent` 节点中。
当我们将一个节点嵌入到另一个节点中时,被嵌入的节点的位置将相对于其父节点而不是相对于整个图形。如果您需要在父节点中定位嵌套的节点,可以使用 `x` 和 `y` 参数来指定其相对于父节点的位置。
另外,需要注意的是,嵌套节点的大小和位置不能超过其父节点的大小和位置,否则将被裁剪或截断。
mxgraph 修改节点鼠标手势
要修改 mxGraph 中节点的鼠标手势,可以使用 mxGraphHandler.prototype.customHandlesEnabled 属性。该属性可以启用或禁用自定义节点手柄,从而更改节点的鼠标手势。例如,以下代码将禁用名为 `cell` 的节点的默认节点手柄,并设置其鼠标手势为手型:
```
// 禁用节点默认手柄
graph.setCellsMovable(false);
// 自定义手型鼠标手势
graph.handler.customHandlesEnabled = true;
graph.handler.customHandles = [
{
image: 'images/hand-cursor.png',
action: 'move',
cursor: 'move'
}
];
```
在上面的代码中,我们首先使用 `mxGraph.setCellsMovable()` 方法禁用了名为 `cell` 的节点的默认节点手柄。然后,我们设置了 `graph.handler.customHandlesEnabled` 属性为 `true`,启用自定义节点手柄。最后,我们定义了一个 `customHandles` 数组,其中包含手型鼠标手势的图像、操作类型和光标样式。
这样,当用户在该节点上移动鼠标时,鼠标手势将变成手型。你可以根据需要修改 `customHandles` 数组来设置不同的鼠标手势。
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)