javascript - 如何从工具栏拖放 mxGraph 中的自定义图像

Question

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

从toolbar.html示例开始，我可以在工具栏中添加新图标，但我不知道如何在图表中添加自定义图像。谁能告诉我该怎么做？

Answer 1

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

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例如，您将获得清晰的图片。