mxgraph - 如何使用 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");
     }