如何使用mxgraph设置自定义顶点

Question

我们正在编写一个使用mxgraph生成图形的程序。我们的需求是“我们需要将图像显示为顶点”。我们已经尝试了许多代码，但我们无法获得图像。(图像的路径是正确的)我们可以改变节点的形状并添加颜色，但不能将图像作为顶点。我们的代码如下

         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");
         }

请指导我们在上面的代码中必须纠正什么，以获得一个图像作为我的顶点。

Answer 1

除了图像的路径，我在代码中看不到任何问题。即使你有足够的信心，也要交叉检查图像的路径。在开发者工具中打开它，检查您是否可以访问镜像。尝试直接从url访问图像。

这里的任何方法都是在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");
     }