如何在移动顶点时看起来不奇怪的同时重新调整mxgraph的边缘?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在移动顶点时看起来不奇怪的同时重新调整mxgraph的边缘?相关的知识,希望对你有一定的参考价值。

我需要允许用户重新排列图形,并且在移动顶点时需要重新调整边缘。现在我还不能很好地做到这一点。

到目前为止,我所拥有的是:

具有奇怪调整边缘的图形:

“带有奇怪调整边缘的图形”“>

但是我希望他们像这样:

图形的边缘调整良好:

第二张图的XML代码是:

<mxGraphModel dx="774" dy="824" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100"> <root> <mxCell id="0"/> <mxCell id="1" parent="0"/> <mxCell id="4" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="2" target="3"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="2" value="Product" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"> <mxGeometry x="80" y="33" width="116" height="26" as="geometry"/> </mxCell> <mxCell id="6" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="3" target="5"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="10" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="3" target="9"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="3" value="Order_line" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"> <mxGeometry x="280" y="216" width="116" height="26" as="geometry"/> </mxCell> <mxCell id="12" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="9" target="11"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="9" value="New_1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"> <mxGeometry x="460" y="190" width="116" height="26" as="geometry"/> </mxCell> <mxCell id="14" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="11" target="13"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="11" value="New_2" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"> <mxGeometry x="530" y="20" width="116" height="26" as="geometry"/> </mxCell> <mxCell id="13" value="New_3" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"> <mxGeometry x="680" y="126" width="116" height="26" as="geometry"/> </mxCell> <mxCell id="8" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="5" target="7"> <mxGeometry relative="1" as="geometry"/> </mxCell> <mxCell id="5" value="Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"> <mxGeometry x="80" y="100" width="116" height="26" as="geometry"/> </mxCell> <mxCell id="7" value="Customer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"> <mxGeometry x="10" y="260" width="116" height="26" as="geometry"/> </mxCell> </root> </mxGraphModel>

但是我无法将其翻译成TS代码:-(

由于我在Angular和TS中使用了它,因此在Plunker中创建一些帮助的技巧有些棘手,但是我拥有的是一个像这样初始化图形的组件:

declare var require: any; const mx = require('mxgraph')( mxImageBasePath: 'assets/mxgraph/images', mxBasePath: 'assets/mxgraph', ); const container = document.getElementById('graphContainer'); this.graph = new mx.mxGraph(container); So I start editing it, as you can see here: try const parent = this.graph.getDefaultParent(); this.graph.getModel().beginUpdate(); const defaultVertexStyle = this.graph.stylesheet.getDefaultVertexStyle(); defaultVertexStyle[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_LABEL; defaultVertexStyle[mx.mxConstants.STYLE_PERIMETER] = mx.mxConstants.PERIMETER_RECTANGLE; defaultVertexStyle[mx.mxConstants.STYLE_FONTSIZE] = 12; defaultVertexStyle[mx.mxConstants.STYLE_FONTFAMILY] = 'Helvetica'; defaultVertexStyle[mx.mxConstants.STYLE_ALIGN] = mx.mxConstants.ALIGN_CENTER; defaultVertexStyle[mx.mxConstants.STYLE_VERTICAL_ALIGN] = mx.mxConstants.ALIGN_MIDDLE; defaultVertexStyle[mx.mxConstants.STYLE_FILLCOLOR] = '#f8b241'; defaultVertexStyle[mx.mxConstants.STYLE_GRADIENTCOLOR] = '#e97704'; defaultVertexStyle[mx.mxConstants.STYLE_STROKECOLOR] = '#ea7703'; defaultVertexStyle[mx.mxConstants.STYLE_FONTCOLOR] = '#ffffff'; defaultVertexStyle[mx.mxConstants.STYLE_FONTSIZE] = 14; defaultVertexStyle[mx.mxConstants.STYLE_ROUNDED] = true; const defaultEdgeStyle = this.graph.stylesheet.getDefaultEdgeStyle(); defaultEdgeStyle[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_CONNECTOR; defaultEdgeStyle[mx.mxConstants.STYLE_FONTSIZE] = 12; defaultEdgeStyle[mx.mxConstants.STYLE_FONTFAMILY] = 'Helvetica'; defaultEdgeStyle[mx.mxConstants.STYLE_ALIGN] = mx.mxConstants.ALIGN_CENTER; defaultEdgeStyle[mx.mxConstants.STYLE_VERTICAL_ALIGN] = mx.mxConstants.ALIGN_MIDDLE; defaultEdgeStyle[mx.mxConstants.STYLE_ROUNDED] = 1; defaultEdgeStyle[mx.mxConstants.STYLE_STARTARROW] = mx.mxConstants.ARROW_CLASSIC; defaultEdgeStyle[mx.mxConstants.STYLE_STARTSIZE] = 8; defaultEdgeStyle[mx.mxConstants.STYLE_ENDARROW] = mx.mxConstants.ARROW_CLASSIC; defaultEdgeStyle[mx.mxConstants.STYLE_ENDSIZE] = 8; defaultEdgeStyle[mx.mxConstants.STYLE_STROKECOLOR] = '#aaaaaa'; let product = graph.insertVertex(parent,'Product','Product',0,0,120,20); let orderLine = graph.insertVertex(parent,'Order_Line','Order_Line',0,0,120,20); let order = graph.insertVertex(parent,'Order','Order',0,0,120,20); let customer = graph.insertVertex(parent,'Customer','Customer',0,0,120,20); let new1 = graph.insertVertex(parent,'new1','new1',0,0,120,20); graph.insertEdge(parent, '1', '', product, orderLine); graph.insertEdge(parent, '2', '', orderLine, order); graph.insertEdge(parent, '3', '', order, customer); graph.insertEdge(parent, '4', '', orderLine, new1); const layout = new mx.mxHierarchicalLayout(this.graph, mx.mxConstants.DIRECTION_NORTH); layout.execute(graph.getDefaultParent()); finally this.graph.getModel().endUpdate();

结果就是您在上面第一张图片中看到的。 (Graph with edges weirdly adjusted

请您帮我实现第二张图片(Graph with edges nicely adjusted)中可以看到的内容吗?

编辑1:

不幸的是,即使我使用与XML文件相同的样式,也没有像演示/展示中那样重新排列边缘,但我已经尝试过了:graph.insertEdge( parent, `$getId()`, '', source, target, 'edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;' );
结果:Even using styles as in XML the result is different

编辑2:

尽管它不适用于我的代码,但在此CodePen上却有效:https://codepen.io/palerique/pen/povEEVY

所以现在我认为我正在调用的布局类可能会更改样式并导致这种不良行为。

是否存在不更改边线样式的布局类?

我需要允许用户重新排列图形,并且在移动顶点时需要重新调整边缘。现在,我还不能很好地做到这一点。到目前为止,我所拥有的是:奇怪地带有边的图...

答案
您应该实现自定义边缘,paintEdgeShape定义了边缘的渲染,您可以使用canvas API来定义该图形。看example

为了解决长路径,我建议创建一个函数来计算点与绘图之间的最近路径。

另一答案
@ PauloRodrigues好笑,但您的决定已经成问题了!

以上是关于如何在移动顶点时看起来不奇怪的同时重新调整mxgraph的边缘?的主要内容,如果未能解决你的问题,请参考以下文章

如何让 chrome 重新渲染 iframe

Facebook评论框移动版未调整大小

OpenGL顶点着色器:奇怪的矩阵转换

如何将三列表格制作成移动两列表格

刚体控制的角色在上坡时移动非常奇怪

Jquery 移动弹出窗口在页面调整大小或滚动时的错误位置重新打开