Question

我是MXGraph用法的新手（通过javascript），我正在尝试从工具栏拖放图像（png）。

从toolbar.html示例开始，我能够在工具栏中添加一个新图标，但是我无法在图形中添加自定义图像。谁能告诉我我该怎么做？

Answer 1

这是在边栏中添加图标/图像并创建拖放源的代码示例。

调用函数来设置图像源和标签/ HTML。

        // Adds sidebar icons.
        //
        // NOTE: For non-HTML labels a simple string as the third argument
        // and the alternative style as shown in configureStylesheet should
        // be used. For example, the first call to addSidebar icon would
        // be as follows:
        // addSidebarIcon(graph, sidebar, 'Website', 'images/icons48/earth.png');
        addSidebarIcon(graph, sidebar,
            '<h1 style="margin:0px;">Website</h1><br>'+
            '<img src="images/icons48/earth.png" width="48" height="48">'+
            '<br>'+
            '<a href="http://www.jgraph.com" target="_blank">Browse</a>',
            'images/icons48/earth.png');
        addSidebarIcon(graph, sidebar,
            '<h1 style="margin:0px;">Process</h1><br>'+
            '<img src="images/icons48/gear.png" width="48" height="48">'+
            '<br><select><option>Value1</option><option>Value2</option></select><br>',
            'images/icons48/gear.png');
        addSidebarIcon(graph, sidebar,
            '<h1 style="margin:0px;">Keys</h1><br>'+
            '<img src="images/icons48/keys.png" width="48" height="48">'+
            '<br>'+
            '<button onclick="mxUtils.alert(\'generate\');">Generate</button>',
            'images/icons48/keys.png');
        addSidebarIcon(graph, sidebar,
            '<h1 style="margin:0px;">New Mail</h1><br>'+
            '<img src="images/icons48/mail_new.png" width="48" height="48">'+
            '<br><input type="checkbox"/>CC Archive',
            'images/icons48/mail_new.png');
        addSidebarIcon(graph, sidebar,
            '<h1 style="margin:0px;">Server</h1><br>'+
            '<img src="images/icons48/server.png" width="48" height="48">'+
            '<br>'+
            '<input type="text" size="12" value="127.0.0.1"/>',
            'images/icons48/server.png');

在侧边栏中添加图像，拖放源的功能

function addSidebarIcon(graph, sidebar, label, image)
{
    // Function that is executed when the image is dropped on
    // the graph. The cell argument points to the cell under
    // the mousepointer if there is one.
    var funct = function(graph, evt, cell, x, y)
    {
        var parent = graph.getDefaultParent();
        var model = graph.getModel();

        var v1 = null;

        model.beginUpdate();
        try
        {
            // NOTE: For non-HTML labels the image must be displayed via the style
            // rather than the label markup, so use 'image=' + image for the style.
            // as follows: v1 = graph.insertVertex(parent, null, label,
            // pt.x, pt.y, 120, 120, 'image=' + image);
            v1 = graph.insertVertex(parent, null, label, x, y, 120, 120);
            v1.setConnectable(false);

            // Presets the collapsed size
            v1.geometry.alternateBounds = new mxRectangle(0, 0, 120, 40);

            // Adds the ports at various relative locations
            var port = graph.insertVertex(v1, null, 'Trigger', 0, 0.25, 16, 16,
                    'port;image=editors/images/overlays/flash.png;align=right;imageAlign=right;spacingRight=18', true);
            port.geometry.offset = new mxPoint(-6, -8);

            var port = graph.insertVertex(v1, null, 'Input', 0, 0.75, 16, 16,
                    'port;image=editors/images/overlays/check.png;align=right;imageAlign=right;spacingRight=18', true);
            port.geometry.offset = new mxPoint(-6, -4);

            var port = graph.insertVertex(v1, null, 'Error', 1, 0.25, 16, 16,
                    'port;image=editors/images/overlays/error.png;spacingLeft=18', true);
            port.geometry.offset = new mxPoint(-8, -8);

            var port = graph.insertVertex(v1, null, 'Result', 1, 0.75, 16, 16,
                    'port;image=editors/images/overlays/information.png;spacingLeft=18', true);
            port.geometry.offset = new mxPoint(-8, -4);
        }
        finally
        {
            model.endUpdate();
        }

        graph.setSelectionCell(v1);
    }

    // Creates the image which is used as the sidebar icon (drag source)
    var img = document.createElement('img');
    img.setAttribute('src', image);
    img.style.width = '48px';
    img.style.height = '48px';
    img.title = 'Drag this to the diagram to create a new vertex';
    sidebar.appendChild(img);

    var dragElt = document.createElement('div');
    dragElt.style.border = 'dashed black 1px';
    dragElt.style.width = '120px';
    dragElt.style.height = '120px';

    // Creates the image which is used as the drag icon (preview)
    var ds = mxUtils.makeDraggable(img, graph, funct, dragElt, 0, 0, true, true);
    ds.setGuidesEnabled(true);
};

请检查ports.html示例，您将获得清晰的画面。

Answer 2

这对我有用：

addVertex('static/images/Icon_Image.svg', 30, 40, 'shape=image;image=static/images/Icon_Image.svg;');

在哪里， addVertex函数具有以下语法功能（图标，w，h，样式）： var vertex = new mxCell（null，new mxGeometry（0，0，w，h），style）;

参考：https://jgraph.github.io/mxgraph/javascript/examples/fixedicon.html

的源代码

如何在工具栏上拖动和拖放mxGraph中的自定义图像

2 个答案: