Question

我想通过javascript以编程方式在顶点/单元格上添加图像，任何人都可以向我展示如何做到这一点的示例。注意：我的单元格对象具有不同的形状（椭圆形，菱形等）

由于

Answer 1

我不知道如何在JavaScript中执行此操作，但也许JAVA代码示例可以提供帮助。在JAVA中，您必须从mxInteractiveCanvas类重载drawCell方法：

不要忘记用自己的代码替换

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

}

如何在mxGraph中的顶点上添加自定义图像

1 个答案: