Custom graphics in java.awt.ScrollPane

Question

Hi all,
I have to draw a custom created image in a scroll pane. As the image is very large I want to display it in a scroll pane. As parts of the image may change within seconds, and drawing the whole image is very time consuming (several seconds) I want to draw only the part of the image that is currently visible to the user.
My idea: creating a new class that extends from java.awt.ScrollPane, overwrite the paint(Graphics) method and do the drawings inside. Unfortunately, it does not work. The background of the scoll pane is blue, but it does not show the red box (the current viewport is not shown in red).
Below please find the source code that I am using:
package graphics;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.ScrollPane;
import java.awt.event.AdjustmentEvent;
public class CMyComponent extends ScrollPane {
     /** <p>Listener to force a component to repaint when a scroll bar changes its
      * position.</p>
     private final class ScrollBarAdjustmentListener implements java.awt.event.AdjustmentListener {
          /** <p>The component to force to repaint.</p> */
          private final Component m_Target;
          /** <p>Default constructor.</p>
           * @param Target The component to force to repaint.
          private ScrollBarAdjustmentListener(Component Target) { m_Target = Target; }
          /** <p>Forces to component to repaint upon adjustment of the scroll bar.</p>
           *  @see java.awt.event.AdjustmentListener#adjustmentValueChanged(java.awt.event.AdjustmentEvent)
          public void adjustmentValueChanged(AdjustmentEvent e) { m_Target.paint(m_Target.getGraphics()); }
     public CMyComponent() {
          // Ensure that the component repaints upon changing of the scroll bars
          ScrollBarAdjustmentListener sbal = new ScrollBarAdjustmentListener(this);
          getHAdjustable().addAdjustmentListener(sbal);
          getVAdjustable().addAdjustmentListener(sbal);
     public void paint(Graphics g) {
          setBackground(Color.BLUE);
          g.setColor(Color.RED);
          g.fillRect(getScrollPosition().x, getScrollPosition().y, getViewportSize().width, getViewportSize().height);
     public final static void main(String[] args) {
          java.awt.Frame f = new java.awt.Frame();
          f.add(new CMyComponent());
          f.pack();
          f.setVisible(true);
}

Answer 1

Dear all,
I used the last days and tried several things. I think now I have a quite good working solution (just one bug remains) and it is very performant. To give others a chance to see what I have done I post the source code of the main class (a canvas drawing and implementing scrolling) here. As soon as the sourceforge project is accepted, I will publish the whole sources at there. Enjoy. And if you have some idea for my last bug in getElementAtPixel(Point), then please tell me.
package internetrail.graphics.hexgrid;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Point;
import java.awt.Polygon;
import java.awt.event.ComponentEvent;
import java.awt.event.ComponentListener;
import java.awt.geom.Area;
import java.awt.image.BufferedImage;
import java.util.WeakHashMap;
import java.util.Map;
/** <p>Hex grid view.</p>
* <p>Visualizes a {@link IHexGridModel}.</p>
* @version 0.1, 03.06.2006
* @author Bjoern Wuest, Germany
public final class CHexGridView extends Canvas implements ComponentListener, IHexGridElementListener {
     /** <p>Serial version unique identifier.</p> */
     private static final long serialVersionUID = -965902826101261530L;
     /** <p>Instance-constant parameter for the width of a hex grid element.</p> */
     public final int CONST_Width;
     /** <p>Instance-constant parameter for 1/4 of the width of a hex grid element.</p> */
     public final int CONST_Width1fourth;
     /** <p>Instance-constant parameter for 3/4 of the width of a hex grid element.</p> */
     public final int CONST_Width3fourth;
     /** <p>Instance-constant parameter for 1.5 times of the width of a hex grid element.</p> */
     public final int CONST_Width1dot5;
     /** <p>Instance-constant parameter for 4 times of the width of a hex grid element.</p> */
     public final int CONST_Widthquad;
     /** <p>Instance-constant parameter for the height of a hex grid element.</p> */
     public final int CONST_Height;
     /** <p>Instance-constant parameter for 1/2 of the height of a hex grid element.</p> */
     public final int CONST_Heighthalf;
     /** <p>Instance-constant parameter for the double height of a hex grid element.</p> */
     public final int CONST_Heightdouble;
     /** <p>The steepness of a side of the hex grid element (calculated for the upper left arc).</p> */
     public final double CONST_Steepness;
     /** <p>The model of this hex grid </p> */
     private final IHexGridModel m_Model;
     /** <p>A cache for already created images of the hex map.</p> */
     private final Map<Point, Image> m_Cache = new WeakHashMap<Point, Image>();
     /** <p>The graphical area to draw the selection ring around a hex element.</p> */
     private final Area m_SelectionRing;
     /** <p>The image of the selection ring around a hex element.</p> */
     private final BufferedImage m_SelectionRingImage;
     /** <p>The current position of the hex grid in pixels (top left visible corner).</p> */
     private Point m_ScrollPosition = new Point(0, 0);
     /** <p>Flag to define if a grid is shown ({@code true}) or not ({@code false}).</p> */
     private boolean m_ShowGrid = true;
     /** <p>Flag to define if the selected hex grid element should be highlighted ({@code true}) or not ({@code false}).</p> */
     private boolean m_ShowSelected = true;
     /** <p>The offset of hex grid elements shown on the screen, measured in hex grid elements.</p> */
     private Point m_CurrentOffset = new Point(0, 0);
     /** <p>The offset of the image shown on the screen, measured in pixels.</p> */
     private Point m_PixelOffset = new Point(0, 0);
     /** <p>The index of the currently selected hex grid element.</p> */
     private Point m_CurrentSelected = new Point(0, 0);
     /** <p>The width of a buffered pre-calculated image in pixel.</p> */
     private int m_ImageWidth;
     /** <p>The height of a buffered pre-calculated image in pixel.</p> */
     private int m_ImageHeight;
     /** <p>The maximum number of columns of hex grid elements to be shown at once on the screen.</p> */
     private int m_MaxColumn;
     /** <p>The maximum number of rows of hex grid elements to be shown at once on the screen.</p> */
     private int m_MaxRow;
     /** <p>Create a new hex grid view.</p>
      * <p>The hex grid view is bound to a {@link IHexGridModel} and registers at
      * that model to listen for {@link IHexGridElement} updates.</p>
      * @param Model The model backing this view.
     public CHexGridView(IHexGridModel Model) {
          // Set the model
          m_Model = Model;
          CONST_Width = m_Model.getElementsWidth();
          CONST_Height = m_Model.getElementsHeight();
          CONST_Width1fourth = CONST_Width/4;
          CONST_Width3fourth = CONST_Width*3/4;
          CONST_Width1dot5 = CONST_Width*3/2;
          CONST_Heighthalf = CONST_Height/2;
          CONST_Widthquad = CONST_Width*4;
          CONST_Heightdouble = CONST_Height*2;
          CONST_Steepness = (double)CONST_Heighthalf / CONST_Width1fourth;
          m_ImageWidth = getSize().width+CONST_Widthquad;
          m_ImageHeight = getSize().height+CONST_Heightdouble;
          m_MaxColumn = m_ImageWidth / CONST_Width3fourth;
          m_MaxRow = m_ImageHeight / CONST_Height;
          // Register this canvas for various notifications
          m_Model.addElementListener(this);
          addComponentListener(this);
          // Create the selection ring to highlight hex grid elements
          m_SelectionRing = new Area(new Polygon(new int[]{-1, CONST_Width1fourth-1, CONST_Width3fourth+1, CONST_Width+1, CONST_Width3fourth+1, CONST_Width1fourth-1}, new int[]{CONST_Heighthalf, -1, -1, CONST_Heighthalf, CONST_Height+1, CONST_Height+1}, 6));
          m_SelectionRing.subtract(new Area(new Polygon(new int[]{2, CONST_Width1fourth+2, CONST_Width3fourth-2, CONST_Width-2, CONST_Width3fourth-2, CONST_Width1fourth+2}, new int[]{CONST_Heighthalf, 2, 2, CONST_Heighthalf, CONST_Height-2, CONST_Height-2}, 6)));
          m_SelectionRingImage = new BufferedImage(CONST_Width, CONST_Height, BufferedImage.TYPE_INT_ARGB);
          Graphics2D g = m_SelectionRingImage.createGraphics();
          g.setColor(Color.WHITE);
          g.fill(m_SelectionRing);
     @Override public synchronized void paint(Graphics g2) {
          // Caculate the offset of indexes to show
          int offsetX = 2 * (m_ScrollPosition.x / CONST_Width1dot5) - 2;
          int offsetY = (int)(Math.ceil(m_ScrollPosition.y / CONST_Height) - 1);
          m_CurrentOffset = new Point(offsetX, offsetY);
          // Check if the image is in the cache
          Image drawing = m_Cache.get(m_CurrentOffset);
          if (drawing == null) {
               // The image is not cached, so draw it
               drawing = new BufferedImage(m_ImageWidth, m_ImageHeight, BufferedImage.TYPE_INT_ARGB);
               Graphics2D g = ((BufferedImage)drawing).createGraphics();
               // Draw background
               g.setColor(Color.BLACK);
               g.fillRect(0, 0, m_ImageWidth, m_ImageHeight);
               // Draw the hex grid
               for (int column = 0; column <= m_MaxColumn; column += 2) {
                    for (int row = 0; row <= m_MaxRow; row++) {
                         // Draw even column
                         IHexGridElement element = m_Model.getElementAt(offsetX + column, offsetY + row);
                         if (element != null) { g.drawImage(element.getImage(m_ShowGrid), (int)(column*(CONST_Width3fourth-0.5)), CONST_Height*row, null); }
                         // Draw odd column
                         element = m_Model.getElementAt(offsetX + column+1, offsetY + row);
                         if (element!= null) { g.drawImage(element.getImage(m_ShowGrid), (int)(column*(CONST_Width3fourth-0.5)+CONST_Width3fourth), CONST_Heighthalf*(row*2+1), null); }
               // Put the image into the cache
               m_Cache.put(m_CurrentOffset, drawing);
          // Calculate the position of the image to show
          offsetX = CONST_Width1dot5 + (m_ScrollPosition.x % CONST_Width1dot5);
          offsetY = CONST_Height + (m_ScrollPosition.y % CONST_Height);
          m_PixelOffset = new Point(offsetX, offsetY);
          g2.drawImage(drawing, -offsetX, -offsetY, null);
          // If the selected element should he highlighted, then do so
          if (m_ShowSelected) {
               // Check if the selected element is on screen
               if (isElementOnScreen(m_CurrentSelected)) {
                    // Correct vertical offset for odd columns
                    if ((m_CurrentSelected.x % 2 == 1)) { offsetY -= CONST_Heighthalf; }
                    // Draw the selection circle
                    g2.drawImage(m_SelectionRingImage, (m_CurrentSelected.x - m_CurrentOffset.x) * CONST_Width3fourth - offsetX - ((m_CurrentSelected.x + 1) / 2), (m_CurrentSelected.y - m_CurrentOffset.y) * CONST_Height - offsetY, null);
     @Override public synchronized void update(Graphics g) { paint(g); }
     public synchronized void componentResized(ComponentEvent e) {
          // Upon resizing of the component, adjust several pre-calculated values
          m_ImageWidth = getSize().width+CONST_Widthquad;
          m_ImageHeight = getSize().height+CONST_Heightdouble;
          m_MaxColumn = m_ImageWidth / CONST_Width3fourth;
          m_MaxRow = m_ImageHeight / CONST_Height;
          // And flush the cache
          m_Cache.clear();
     public void componentMoved(ComponentEvent e) { /* do nothing */ }
     public void componentShown(ComponentEvent e) { /* do nothing */ }
     public void componentHidden(ComponentEvent e) { /* do nothing */ }
     public synchronized void elementUpdated(IHexGridElement Element) {
          // Clear cache where the element may be contained at
          for (Point p : m_Cache.keySet()) { if (isElementInScope(Element.getIndex(), p, new Point(p.x + m_MaxColumn, p.y + m_MaxRow))) { m_Cache.remove(p); } }
          // Update the currently shown image if the update element is shown, too
          if (isElementOnScreen(Element.getIndex())) { repaint(); }
     /** <p>Returns the model visualized by this grid view.</p>
      * @return The model visualized by this grid view.
     public IHexGridModel getModel() { return m_Model; }
     /** <p>Returns the current selected hex grid element.</p>
      * @return The current selected hex grid element.
     public IHexGridElement getSelected() { return m_Model.getElementAt(m_CurrentSelected.x, m_CurrentSelected.y); }
     /** <p>Sets the current selected hex grid element by its index.</p>
      * <p>If the selected hex grid element should be highlighted and is currently
      * shown on the screen, then this method will {@link #repaint() redraw} this
      * component automatically.</p>
      * @param Index The index of the hex grid element to become the selected one.
      * @throws IllegalArgumentException If the index refers to a non-existing hex
      * grid element.
     public synchronized void setSelected(Point Index) throws IllegalArgumentException {
          // Check that the index is valid
          if ((Index.x < 0) || (Index.y < 0) || (Index.x > m_Model.getXElements()) || (Index.y > m_Model.getYElements())) { throw new IllegalArgumentException("There is no hex grid element with such index."); }
          m_CurrentSelected = Index;
          // If the element is on screen and should be highlighted, then repaint
          if (m_ShowSelected && isElementOnScreen(m_CurrentSelected)) { repaint(); }
     /** <p>Moves the visible elements to the left by the number of pixels.</p>
      * <p>To move the visible elements to the left by one hex grid element, pass
      * {@link #CONST_Width3fourth} as the parameter. The component will
      * automatically {@link #repaint()}.</p>
      * @param Pixels The number of pixels to move to the left.
      * @return The number of pixels moved to the left. This is always between 0
      * and {@code abs(Pixels)}.
     public synchronized int moveLeft(int Pixels) {
          int delta = m_ScrollPosition.x - Math.max(0, m_ScrollPosition.x - Math.max(0, Pixels));
          if (delta != 0) {
               m_ScrollPosition.x -= delta;
               repaint();
          return delta;
     /** <p>Moves the visible elements up by the number of pixels.</p>
      * <p>To move the visible elements up by one hex grid element, pass {@link
      * #CONST_Height} as the parameter. The component will automatically {@link
      * #repaint()}.</p>
      * @param Pixels The number of pixels to move up.
      * @return The number of pixels moved up. This is always between 0 and {@code
      * abs(Pixels)}.
     public synchronized int moveUp(int Pixels) {
          int delta = m_ScrollPosition.y - Math.max(0, m_ScrollPosition.y - Math.max(0, Pixels));
          if (delta != 0) {
               m_ScrollPosition.y -= delta;
               repaint();
          return delta;
     /** <p>Moves the visible elements to the right by the number of pixels.</p>
      * <p>To move the visible elements to the right by one hex grid element, pass
      * {@link #CONST_Width3fourth} as the parameter. The component will
      * automatically {@link #repaint()}.</p>
      * @param Pixels The number of pixels to move to the right.
      * @return The number of pixels moved to the right. This is always between 0
      * and {@code abs(Pixels)}.
     public synchronized int moveRight(int Pixels) {
          int delta = Math.min(m_Model.getXElements() * CONST_Width3fourth + CONST_Width1fourth - getSize().width, m_ScrollPosition.x + Math.max(0, Pixels)) - m_ScrollPosition.x;
          if (delta != 0) {
               m_ScrollPosition.x += delta;
               repaint();
          return delta;
     /** <p>Moves the visible elements down by the number of pixels.</p>
      * <p>To move the visible elements down by one hex grid element, pass {@link
      * #CONST_Height} as the parameter. The component will automatically {@link
      * #repaint()}.</p>
      * @param Pixels The number of pixels to move down.
      * @return The number of pixels moved down. This is always between 0 and
      * {@code abs(Pixels)}.
     public synchronized int moveDown(int Pixels) {
          int delta = Math.min(m_Model.getYElements() * CONST_Height + CONST_Heighthalf - getSize().height, m_ScrollPosition.y + Math.max(0, Pixels)) - m_ScrollPosition.y;
          if (delta != 0) {
               m_ScrollPosition.y += delta;
               repaint();
          return delta;
     /** <p>Checks if the hex grid element of the given index is currently
      * displayed on the screen (even just one pixel).</p>
      * <p>The intention of this method is to check if a {@link #repaint()} is
      * necessary or not.</p>
      * @param ElementIndex The index of the element to check.
      * @return {@code true} if the hex grid element of the given index is
      * displayed on the screen, {@code false} if not.
     public synchronized boolean isElementOnScreen(Point ElementIndex) { return isElementInScope(ElementIndex, m_CurrentOffset, new Point(m_CurrentOffset.x + m_MaxColumn, m_CurrentOffset.y + m_MaxRow)); }
     /** <p>Checks if the hex grid element of the given index is within the given
      * indexes.</p>
      * <p>The intention of this method is to check if a {@link #repaint()} is
      * necessary or not.</p>
      * @param ElementIndex The index of the element to check.
      * @param ReferenceIndexLeftTop The left top index of the area to check.
      * @param ReferenceIndexRightBottom The right bottom index of the area to check.
      * @return {@code true} if the hex grid element of the given index is within
      * the given area, {@code false} if not.
     public synchronized boolean isElementInScope(Point ElementIndex, Point ReferenceIndexLeftTop, Point ReferenceIndexRightBottom) { if ((ElementIndex.x >= ReferenceIndexLeftTop.x) && (ElementIndex.x <= ReferenceIndexRightBottom.x) && (ElementIndex.y >= ReferenceIndexLeftTop.y) && (ElementIndex.y <= (ReferenceIndexRightBottom.y))) { return true; } else { return false; } }
     /** <p>Return the {@link IHexGridElement hex grid element} shown at the given
      * pixel on the screen.</p>
      * <p><b>Remark: There seems to be a bug in retrieving the proper element,
      * propably caused by rounding errors and unprecise pixel calculations.</p>
      * @param P The pixel on the screen.
      * @return The {@link IHexGridElement hex grid element} shown at the pixel.
     public synchronized IHexGridElement getElementAtPixel(Point P) {
          // @FIXME Here seems to be some bugs remaining
          int dummy = 0; // Variable for warning to indicate that there is something to do :)
          // Calculate the pixel on the image, not on the screen
          int px = P.x + m_PixelOffset.x;
          int py = P.y + m_PixelOffset.y;
          // Determine the x-index of the column (is maybe decreased by one)
          int x = px / CONST_Width3fourth + m_CurrentOffset.x;
          // If the column is odd, then shift the y-pixel by half element height
          if ((x % 2) == 1) { py -= CONST_Heighthalf; }
          // Determine the y-index of the row (is maybe decreased by one)
          int y = py / CONST_Height + m_CurrentOffset.y;
          // Normative coordinates to a single element
          px -= (x - m_CurrentOffset.x) * CONST_Width3fourth;
          py -= (y - m_CurrentOffset.y) * CONST_Height;
          // Check if the normative pixel is in the first quarter of a column
          if (px < CONST_Width1fourth) {
               // Adjustments to the index may be necessary
               if (py < CONST_Heighthalf) {
                    // We are in the upper half of a hex-element
                    double ty = CONST_Heighthalf - CONST_Steepness * px;
                    if (py < ty) { x--; }
               } else {
                    // We are in the lower half of a hex-element
                    double ty = CONST_Heighthalf + CONST_Steepness * px;
                    if (py > ty) {
                         x--;
                         y++;
          return m_Model.getElementAt(x, y);
}Ah, just to give you some idea: I use this component to visualize a hex grid map with more than 1 million grid elements. And it works, really fast, and requires less than 10 MByte of memory.