Skip to content

Learning JUNG (3) – Changing the vertex’s shape

Last updated on 2014-09-08

To change the way a vertex is rendered, you provide an implementation of the Renderer.Vertex interface. The interface has one function – paintVertex – where you can draw anything you like, like in the graphics of any JComponent. I changed my example, adding 3 nodes: a circle, a square and a rectangle, each one painted with it’s shape and in a different color.

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Rectangle;
import java.awt.Shape;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Point2D;
import javax.swing.JFrame;
import org.apache.commons.collections15.Transformer;
import edu.uci.ics.jung.algorithms.layout.CircleLayout;
import edu.uci.ics.jung.algorithms.layout.Layout;
import edu.uci.ics.jung.graph.DirectedSparseGraph;
import edu.uci.ics.jung.visualization.RenderContext;
import edu.uci.ics.jung.visualization.VisualizationViewer;
import edu.uci.ics.jung.visualization.control.DefaultModalGraphMouse;
import edu.uci.ics.jung.visualization.control.ModalGraphMouse;
import edu.uci.ics.jung.visualization.renderers.Renderer;
import edu.uci.ics.jung.visualization.transform.shape.GraphicsDecorator;

public class JungLearning {
	public static void main(String[] args) {
		DirectedSparseGraph<String, String> g = new DirectedSparseGraph<String, String>();
		g.addEdge("Edge1", "Square", "Rectangle");
		g.addEdge("Edge2", "Square", "Circle");
		g.addEdge("Edge3", "Circle", "Square");
		VisualizationViewer<String, String> vv =
			new VisualizationViewer<String, String>(
				new CircleLayout<String, String>(g), new Dimension(400,400));
		Transformer<String, String> transformer = new Transformer<String, String>() {
			@Override public String transform(String arg0) { return arg0; }
		transformer = new Transformer<String, String>() {
			@Override public String transform(String arg0) { return arg0; }
		vv.getRenderer().setVertexRenderer(new MyRenderer());

		// The following code adds capability for mouse picking of vertices/edges. Vertices can even be moved!
		final DefaultModalGraphMouse<String,Number> graphMouse = new DefaultModalGraphMouse<String,Number>();

		JFrame frame = new JFrame();

	static class MyRenderer implements Renderer.Vertex<String, String> {
		@Override public void paintVertex(RenderContext<String, String> rc,
				Layout<String, String> layout, String vertex) {
			GraphicsDecorator graphicsContext = rc.getGraphicsContext();
			Point2D center = layout.transform(vertex);
			Shape shape = null;
			Color color = null;
			if(vertex.equals("Square")) {
				shape = new Rectangle((int)center.getX()-10, (int)center.getY()-10, 20, 20);
				color = new Color(127, 127, 0);
			} else if(vertex.equals("Rectangle")) {
				shape = new Rectangle((int)center.getX()-10, (int)center.getY()-20, 20, 40);
				color = new Color(127, 0, 127);
			} else if(vertex.equals("Circle")) {
				shape = new Ellipse2D.Double(center.getX()-10, center.getY()-10, 20, 20);
				color = new Color(0, 127, 127);

And the results are favorable:

P.D: Yes, I know that the code is ugly, is not OO, has numbers instead of constants, etc… I have no good excuse.

The source code for this example can be found here.

Published inProgramming


  1. Nacho Nacho

    Thank you for this good example.
    I have found something weird. When I zoom the graph, there is a point in which the new shapes corresponding to the verices don’t move along with the edges. Do you know why?

    • admin admin

      Hi Nacho. It has been a long time since I last touched JUNG. I am now completely (and happily) immersed in GEF, so I guess I can’t help you there.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.