mxgraph 用JavaScript写一个修改箭头样式的函数,包括改变箭头方向,双箭头
时间: 2023-07-18 19:21:32 浏览: 189
mxGraph中文文档.md
5星 · 资源好评率100%
以下是一个示例函数,可以修改 mxgraph 中箭头的样式:
```javascript
function changeArrowStyle(graph, cell, direction, double) {
var style = graph.getCellStyle(cell);
var newStyle = mxUtils.clone(style);
if (direction === 'left') { // 改变箭头方向为左
newStyle[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
newStyle[mxConstants.STYLE_ENDSIZE] = '0';
newStyle[mxConstants.STYLE_STARTARROW] = '';
newStyle[mxConstants.STYLE_STARTSIZE] = '0';
} else if (direction === 'right') { // 改变箭头方向为右
newStyle[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC;
newStyle[mxConstants.STYLE_STARTSIZE] = '0';
newStyle[mxConstants.STYLE_ENDARROW] = '';
newStyle[mxConstants.STYLE_ENDSIZE] = '0';
} else if (direction === 'double') { // 添加双箭头
newStyle[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC;
newStyle[mxConstants.STYLE_STARTSIZE] = '0';
newStyle[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
newStyle[mxConstants.STYLE_ENDSIZE] = '0';
}
if (double) { // 改变箭头大小为双倍
newStyle[mxConstants.STYLE_ENDSIZE] = parseInt(style[mxConstants.STYLE_ENDSIZE]) * 2 + '';
newStyle[mxConstants.STYLE_STARTSIZE] = parseInt(style[mxConstants.STYLE_STARTSIZE]) * 2 + '';
}
graph.getModel().setStyle(cell, mxUtils.setStyle(style, newStyle));
}
```
其中,`graph` 代表 mxgraph 实例,`cell` 代表要修改箭头样式的元素,`direction` 代表箭头方向,可选值为 `'left'`、`'right'` 和 `'double'`,`double` 代表是否为双箭头,若为 `true`,则箭头大小会变为原来的两倍。
阅读全文