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

Question

我想从 javascript 以编程方式在顶点/单元格上添加图像，任何人都可以向我展示如何执行此操作的示例。注意：我的单元格对象具有不同的形状（椭圆、菱形等）

谢谢

Answer 1

我不知道如何在 JavaScript 中做到这一点，但也许 JAVA 代码示例可以提供帮助。在 JAVA 中，您必须从 mxInteractiveCanvas 类中重载 drawCell 方法：

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

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

我的交互式画布：

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

图形组件：

public class MyGraphComponent extends mxGraphComponent {

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

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

JFrame 和图形：

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

}