How to set custom vertex using mxgraph

Question

We are writing a program to generate a graph using mxgraph. Our requirement is "we need to display an image as a vertex". We have tried many codes, but we are not able to get the image. (The path of the image is right) We are able to chande the shape of the node and add colour, but not able to include image as the vertex. our code is as follows

         Document xmlDocument = mxDomUtils.createDocument();
         Element sourceNode = xmlDocument.createElement("Source");
         Element targetNode = xmlDocument.createElement("Target");
         Element subtargetNode = xmlDocument.createElement("Subtarget");
         mxGraph graph = new mxGraph();
         Object parent = graph.getDefaultParent();
         graph.getModel().beginUpdate();
         try{
               Object v1 = graph.insertVertex(parent, null, "source", 20, 20,80, 30,"shape=ellipse");
               Object v2 = graph.insertVertex(parent, null, "destination", 200, 20,80, 30,"shape=image;image=H:\\mywork\\mxgraph\\bin\\mypack\\bg2.jpg");
               graph.insertEdge(parent, null, "", v1,v2,"startArrow=none;endArrow=diamond;strokeWidth=4;strokeColor=#66FF00");
         }

Please guide us as to what has to be corrected in the above code to get an image as my vertex.

score 1 · Answer 1 · answered Aug 28 '14 at 18:36

Except for the path of the image I don't see any problem in the code. Even though you are confident enough, just cross check the path of the image. Open it in developers tool and check whether you are actually able to access the image or not. Try to access image directly from the url.

Any way here is the recommended way of applying styling on mxCells.

Document xmlDocument = mxDomUtils.createDocument();
     Element sourceNode = xmlDocument.createElement("Source");
     Element targetNode = xmlDocument.createElement("Target");
     Element subtargetNode = xmlDocument.createElement("Subtarget");
     mxGraph graph = new mxGraph();
     Object parent = graph.getDefaultParent();

     var style = new Object();
        style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
        style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
        style[mxConstants.STYLE_IMAGE] = 'images/bg2.jpg';
        style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';
        graph.getStylesheet().putCellStyle('image', style)

     graph.getModel().beginUpdate();
     try{
           Object v1 = graph.insertVertex(parent, null, "source", 20, 20,80, 30,"shape=ellipse");
           Object v2 = graph.insertVertex(parent, null, "destination", 200, 20,80, 30,"image");
           graph.insertEdge(parent, null, "", v1,v2,"startArrow=none;endArrow=diamond;strokeWidth=4;strokeColor=#66FF00");
     }

How to set custom vertex using mxgraph

1 Answers1