Как добавить пользовательское изображение на вершине в mxGraph

Question

Я хочу добавить изображение на вершине/ячейке программно из javascript, может ли кто-нибудь показать мне пример того, как я могу это сделать. Обратите внимание: мои объекты ячейки имеют различные формы (эллипса, ромба и т.д.)

Благодарности

Answer 1

я не знаю, как сделать это в JavaScript, но может быть, например, JAVA код может помочь. В JAVA вы должны перегрузить метод drawCell из mxInteractiveCanvas класса:

Не забудьте заменить свой собственный код

Image img = Toolkit.getDefaultToolkit().getImage(<PATH TO YOUR IMAGE>); 

MyInteractiveCanvas:

public class MyInteractiveCanvas extends mxInteractiveCanvas { 
    public MyInteractiveCanvas(MyGraphComponent myGraphComponent) { 
     super(myGraphComponent); 
    } 

    /* 
    * (non-Javadoc) 
    * @see com.mxgraph.canvas.mxICanvas#drawCell() 
    */ 
    public Object drawCell(mxCellState state) 
    { 
     Map<String, Object> style = state.getStyle(); 
     mxIShape shape = getShape(style); 

     if (g != null && shape != null) 
     { 
      // Creates a temporary graphics instance for drawing this shape 
      float opacity = mxUtils.getFloat(style, mxConstants.STYLE_OPACITY, 
        100); 
      Graphics2D previousGraphics = g; 
      g = createTemporaryGraphics(style, opacity, state); 

      // Paints the shape and restores the graphics object 
      shape.paintShape(this, state); 

      if(((mxCell)state.getCell()).isVertex()) { 
       int x = (int)(state.getCenterX() - state.getWidth()/2); 
       int y = (int)(state.getCenterY()); 
       Image img = Toolkit.getDefaultToolkit().getImage(<PATH TO YOUR IMAGE>); 
       previousGraphics.drawImage(img, x, y, null); 
      } 

      g.dispose(); 
      g = previousGraphics; 
     } 

     return shape; 
    } 
} 

GraphComponent:

public class MyGraphComponent extends mxGraphComponent { 

    public MyGraphComponent(mxGraph g) { 
     super(g); 
    } 

    public mxInteractiveCanvas createCanvas() 
    { 
     return new MyInteractiveCanvas(this);   
    } 
} 

JFrame and Graph:

public class HelloWorld extends JFrame 
{ 

    /** 
    * 
    */ 
    private static final long serialVersionUID = -2707712944901661771L; 

    public HelloWorld() 
    { 
     super("Hello, World!"); 

     mxGraph graph = new mxGraph(); 
     Object parent = graph.getDefaultParent(); 
     graph.getModel().beginUpdate(); 
     try 
     { 
      Object v1 = graph.insertVertex(parent, null, "Hello", 20, 20, 80, 
        30); 
      Object v2 = graph.insertVertex(parent, null, "World!", 240, 150, 
        80, 30); 
      graph.insertEdge(parent, null, "Edge", v1, v2); 
     } 
     finally 
     { 
      graph.getModel().endUpdate(); 
     } 

     mxGraphComponent graphComponent = new MyGraphComponent(graph); 
     mxICellEditor editor = graphComponent.getCellEditor(); 
     getContentPane().add(graphComponent); 
    } 

    public static void main(String[] args) 
    { 
     HelloWorld frame = new HelloWorld(); 
     frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
     frame.setSize(400, 320); 
     frame.setVisible(true); 
    } 

}