我创建了自定义形状,我拖放它。现在我向任何方向旋转它。遍历图形的 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);
}
}
}
}
}
}
}