mxgraph - 自定义形状xml(模板)

时间:2015-12-17 23:21:28

标签: jgraph mxgraph

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

0 个答案:

没有答案