Как перетаскивать с панели инструментов собственное изображение в mxGraph - PullRequest
Новая
       10

Как перетаскивать с панели инструментов собственное изображение в mxGraph

0 голосов
/ 18 декабря 2018

Я впервые использую MXGraph (от javascript) и пытаюсь перетащить изображение (png) с панели инструментов.

Начиная с примера toolbar.html, я могу добавить новый значок вПанель инструментов, но я не знаю, как добавить собственное изображение в график.Может кто-нибудь сказать мне, как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 13 августа 2019

Это сработало для меня: 

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

0 голосов
/ 21 декабря 2018

Вот пример кода для добавления значков / изображений на боковой панели и создания источника перетаскивания.

  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');

  2. Функция добавления изображений в боковую панель, перетаскивание источника 

    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 Например, у вас будет четкое изображение.

...