我创建了自定义形状,我将其拖拽并垂下。现在我向任何方向旋转它。遍历图形的xml时,我可以旋转该自定义形状。我将遍历图表并通过创建'< shape>'创建新形状XML。我不知道如何在新形状内旋转自定义形状。
源XML:
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="" style="shape=Half Circle;rotation=45;" vertex="1" parent="1">
<mxGeometry x="250" y="120" width="98" height="49" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
目标示例XML :(需要旋转半圆形状)
<shape name="rotatedhalfCircle" h="59" w="108" aspect="fixed" strokewidth="inherit">
<connections></connections>
<background></background>
<foreground>
<fillstroke/>
<include-shape name="Half Circle" x="10" y="10" w="98" h="49"></include-shape>
<stroke/>
</foreground>
</shape>
代码:
var graphModel = editor.graph.getModel();
for (var key in graphModel.cells) {
var cell = graphModel.getCell(key);
var geometry = graphModel.getGeometry(cell);
var styleAttribute = graphModel.getStyle(cell);
if (graphModel.isVertex(cell)) {
if (styleAttribute) {
let styles = styleAttribute.split(';');
for (let i = 0; i < styles.length; i++) {
let shapeAttribute = getStyle('shape', styles[i]);
if (shapeAttribute) {
shapeAttribute = getShape(shapeAttribute);
if (geometry != null) {
let subShape = document.createElement("include-shape");
subShape.setAttribute("name", shapeAttribute);
if (styleAttribute.indexOf("rotation") > 0) {
let rotation = styles[1].split('=')[1];
// TODO: rotate the subShape and get x, y coordinates
}
else {
subShape.setAttribute("x", geometry.x);
subShape.setAttribute("y", geometry.y);
subShape.setAttribute('w', geometry.width);
subShape.setAttribute('h', geometry.height);
}
}
}
}
}
}
}