如何使用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

除了圖像的路徑，我沒有看到代碼中的任何問題。即使你有足夠的信心，只要交叉檢查圖像的路徑即可。在開發者工具中打開它，並檢查你是否真的能夠訪問該圖像。嘗試直接從網址訪問圖片。

這裏的任何方式都是在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"); 
    }