Question

I’m new to graphics programming. I’m trying to create a program that allows you to draw directed graphs. For a start I have managed to draw a set of rectangles (representing the nodes) and have made pan and zoom capabilities by overriding the paint method in Java.

This all seems to work reasonably well while there aren’t too many nodes. My problem is when it comes to trying to draw a dot grid. I used a simple bit of test code at first that overlayed a dot grid using two nested for loops:

int iPanX = (int) panX;
int iPanY = (int) panY;
int a = this.figure.getWidth() - iPanX;
int b = this.figure.getHeight() - (int) iPanY;

for (int i = -iPanX; i < a; i += 10) {
    for (int j = -iPanY; j < b; j += 10) {
        g.drawLine(i, j, i, j);
    }
}

This allows me to pan the grid but not zoom. However, the performance when panning is terrible! I’ve done a lot of searching but I feel that I must be missing something obvious because I can’t find anything on the subject.

Any help or pointers would be greatly appreciated.

–Stephen

Answer 1

Use a BufferedImage for the dot grid. Initialize it once and later only paint the image instead of drawing the grid over and over.

private init(){
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
    Graphics g = image.getGraphics();
    // then draw your grid into g
}

public void paint(Graphics g) {
    g.drawImage(image, 0, 0, null);
    // then draw the graphs
}

And zooming is easily achieved using this:

g.drawImage(image, 0, 0, null); // so you paint the grid at a 1:1 resolution
Graphics2D g2 = (Graphics2D) g;
g2.scale(zoom, zoom);
// then draw the rest into g2 instead of g

Drawing into the zoomed Graphics will lead to proportionally larger line width, etc.