mxgraph 在右击边的时候给边的svg path通过setAttribute方法设置了class属性也使用了graph.refresh()方法但是还是不能让在渲染的时候class属性保留
时间: 2024-03-20 09:44:25 浏览: 100
mxGraph 是一个基于 JavaScript 的图形编辑框架,mxGraph 在渲染的时候会生成一些 SVG 元素,这些元素可以通过 setAttribute 方法设置属性,但是在 mxGraph 渲染的过程中可能会导致 setAttribute 方法设置的属性被覆盖或者丢失。
对于你的问题,可能是因为在 mxGraph 渲染的过程中,mxGraph 会重新生成 SVG 元素,覆盖了你设置的 class 属性。可以尝试在 mxGraph 渲染完成后,再次设置 class 属性,具体可以参考以下代码:
```javascript
// 获取边的 SVG 元素
var edge = graph.view.getState(cell);
var path = edge.shape.node.getElementsByTagName('path')[0];
// 设置 class 属性
path.setAttribute('class', 'your-class');
// 在 mxGraph 渲染完成后,再次设置 class 属性
graph.addListener(mxEvent.RENDER, function() {
path.setAttribute('class', 'your-class');
});
```
这样做的原理是在 mxGraph 渲染完成后,重新设置 class 属性,保证 class 属性不会被覆盖。
相关问题
mxgraph 在右击边的时候给边的svg path设置class属性并在渲染后一直保留
要在右击 mxgraph 中的边时给边的 SVG 路径设置 class 属性并在渲染后一直保留,可以通过 mxgraph 的事件机制来实现。
首先,可以通过 mxGraph.addListener() 方法来添加一个 rightClick 事件监听器,该监听器可以获取到右击的边的 cell 对象。然后,可以通过 mxGraph.view.getState() 方法来获取该边的状态对象,并从该状态对象中获取该边的 SVG 路径元素。接着,可以通过设置元素的 className 属性来给该路径元素设置 class 属性,从而实现设置 class 属性的目的。最后,可以通过 mxGraph.refresh() 方法来刷新 mxgraph,使得该 class 属性一直保留。
示例代码如下:
```javascript
graph.addListener(mxEvent.RIGHT_CLICK, function(sender, evt) {
var cell = evt.getProperty('cell');
if (cell != null && graph.getModel().isEdge(cell)) {
var state = graph.view.getState(cell);
var path = state.shape.node.getElementsByTagName('path')[0];
path.setAttribute('class', 'my-class');
graph.refresh();
}
});
```
其中,`my-class` 是你要设置的 class 名称。
mxGraph的setAttribute方法给cell添加上class属性但是在画布渲染时候会被重置怎么解决
mxGraph在渲染时会根据cell的style来设置节点的样式,因此在setAttribute方法中设置的class属性会在渲染时被重置。如果需要在渲染时保留设置的class属性,可以通过修改cell的style来实现。具体来说,可以在setAttribute方法中将class属性添加到cell的style中,示例代码如下:
```
var graph = new mxGraph(container);
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 30);
var cell = vertex.cell;
var state = graph.view.getState(cell);
var newStyle = state.style + ';class=my-class';
graph.getModel().setStyle(cell, newStyle);
} finally {
graph.getModel().endUpdate();
}
```
在这个示例中,我们通过getModel方法获取了cell的模型,并使用setStyle方法将class属性添加到了cell的style中。现在,当mxGraph渲染节点时,它会将cell的style设置为节点的样式,因此设置的class属性会保留下来。
需要注意的是,如果cell的style中已经存在class属性,那么我们需要先将它从style中移除,再添加新的class属性。可以使用mxUtils.removeFromNode方法将属性从style中移除,示例代码如下:
```
var graph = new mxGraph(container);
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 30);
var cell = vertex.cell;
var state = graph.view.getState(cell);
var newStyle = mxUtils.setStyle(state.style, 'class', 'my-class');
graph.getModel().setStyle(cell, newStyle);
} finally {
graph.getModel().endUpdate();
}
```
在这个示例中,我们使用mxUtils.setStyle方法将class属性添加到cell的style中。如果style中已经存在class属性,该方法会先将它从style中移除,然后再添加新的class属性。
阅读全文