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

除了图像的路径，我在代码中没有看到任何问题。尽管你有足够的信心，但只需交叉检查图像的路径即可。在开发人员工具中打开它，检查您是否真的能够访问该图像。尝试直接从网址访问图像。

这里的任何方式都是在mxCell上应用样式的推荐方法。

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

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

1 个答案: