javascript - mxGraph の頂点にカスタム イメージを追加する方法

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

グラフコンポーネント:

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

}