将边连接到 mxgraph 中顶点的锚点

Question

我正在使用mxGraph（javascript版本）绘制图形，我需要使用径向树布局来进行图形布局。看看这个pen

我设法重新定义了每个顶点的连接点（锚点），您可以通过将鼠标悬停在任何顶点上来查看。我假设径向树布局会将边连接到顶点的锚点，但这并没有发生。知道如何使边连接到顶点的锚点吗？

下面也提供了 Pen 中的相同代码。

<html>
<head>
    <title>Anchors example for mxGraph</title>

<script type="text/javascript">
        mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
    </script>

    <!-- Loads and initializes the library -->
    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js">
    </script>
  
    <!-- Example code -->
    <script type="text/javascript">
    
        // Overridden to define per-shape connection points
        mxGraph.prototype.getAllConnectionConstraints = function(terminal, source)
        {
            if (terminal != null && terminal.shape != null)
            {
                if (terminal.shape.stencil != null)
                {
                    if (terminal.shape.stencil.constraints != null)
                    {
                        return terminal.shape.stencil.constraints;
                    }
                }
                else if (terminal.shape.constraints != null)
                {
                    return terminal.shape.constraints;
                }
            }
    
            return null;
        };
    
        // Defines the default constraints for all shapes
        mxShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
                                         new mxConnectionConstraint(new mxPoint(0.5, 0), true),
                                         new mxConnectionConstraint(new mxPoint(0.75, 0), true),
                                         new mxConnectionConstraint(new mxPoint(0, 0.25), true),
                                         new mxConnectionConstraint(new mxPoint(0, 0.5), true),
                                         new mxConnectionConstraint(new mxPoint(0, 0.75), true),
                                         new mxConnectionConstraint(new mxPoint(1, 0.25), true),
                                         new mxConnectionConstraint(new mxPoint(1, 0.5), true),
                                         new mxConnectionConstraint(new mxPoint(1, 0.75), true),
                                         new mxConnectionConstraint(new mxPoint(0.25, 1), true),
                                         new mxConnectionConstraint(new mxPoint(0.5, 1), true),
                                         new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
        
        // Edges have no connection points
        mxPolyline.prototype.constraints = null;

        // Program starts here. Creates a sample graph in the
        // DOM node with the specified ID. This function is invoked
        // from the onLoad event handler of the document (see below).
        function main(container)
        {
            // Checks if the browser is supported
            if (!mxClient.isBrowserSupported())
            {
                // Displays an error message if the browser is not supported.
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else
            {
                // Disables the built-in context menu
                mxEvent.disableContextMenu(container);

                // Creates the graph inside the given container
                var graph = new mxGraph(container);
                graph.setConnectable(true);
                
                // Enables connect preview for the default edge style
                graph.connectionHandler.createEdgeState = function(me)
                {
                    var edge = graph.createEdge(null, null, null, null, null);
                    
                    return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
                };
                
                // Specifies the default edge style
                //graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
                graph.getStylesheet().getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] = mxEdgeStyle.scalePointArray;

                // Enables rubberband selection
                new mxRubberband(graph);
                
                // Gets the default parent for inserting new cells. This
                // is normally the first child of the root (ie. layer 0).
                var parent = graph.getDefaultParent();
                                
                // Adds cells to the model in a single step
                graph.getModel().beginUpdate();
                try
                {
                    var v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
                    var v2 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
                    var v3 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
                    var v4 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
                    var v5 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
                    var v6 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
                    var v7 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);

                    var e1 = graph.insertEdge(parent, null, '', v1, v2);
                    var e2 = graph.insertEdge(parent, null, '', v1, v3);
                    var e3 = graph.insertEdge(parent, null, '', v1, v4);
                    var e4 = graph.insertEdge(parent, null, '', v1, v5);
                    var e5 = graph.insertEdge(parent, null, '', v1, v6);
                    var e6 = graph.insertEdge(parent, null, '', v1, v7);
                }
                finally
                {
                    var radialLayout = new mxRadialTreeLayout(graph);
                    radialLayout.execute(parent);
                    // Updates the display
                    graph.getModel().endUpdate();
                }
                console.log(v1.geometry);
                    console.log(v2.geometry);

            }
        };
    </script>
</head>

<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">

    <!-- Creates a container for the graph with a grid wallpaper -->
    <div id="graphContainer"
        style="position:relative;overflow:hidden;width:621px;height:641px;background:url('editors/images/grid.gif');cursor:default;">
    </div>
</body>
</html>

Answer 1

您可以通过在添加边缘样式时设置约束来做到这一点：

var e1 = graph.insertEdge(parent, null, '',v1,v2, "entryX=0.25;entryY=0");

这样你也可以指定边的起点：

var e1 = graph.insertEdge(parent, null, '',v1,v2, "entryX=0.25;entryY=0;exitX=1;exitY=1");

或者在插入边后你可以用特定的约束连接它：

var e2 = graph.insertEdge(parent, null, '', v1, v3);
graph.connectCell(e2,v3,false, mxShape.prototype.constraints[0]);

将边连接到 mxgraph 中顶点的锚点

Connect edges to anchor points of vertices in mxgraph

javascript

mxgraph