How to change the Thumb of the JScrollbar to a cus

Question

Say I have an appropriately sized image inside an Image() I want to change the Thumb or Knob of the JScrollBar component to be this image.

I know I need to subclass the ScrollBarUI

Here is where I am at right now.

public class aScrollBar extends JScrollBar {

    public aScrollBar(Image img) {
        super();
        this.setUI(new ScrollBarCustomUI(img));
    }

    public class ScrollBarCustomUI extends BasicScrollBarUI {

        private final Image image;

        public ScrollBarCustomUI(Image img) {
            this.image = img;
        }

        @Override
        protected void paintThumb(Graphics g, JComponent c, Rectangle thumbBounds) {
            Graphics2D g2g = (Graphics2D) g;
            g2g.dispose();
            g2g.drawImage(image, 0, 0, null);
            super.paintThumb(g2g, c, thumbBounds);
        }

        @Override
        protected void paintTrack(Graphics g, JComponent c, Rectangle trackBounds) {
            super.paintTrack(g, c, trackBounds);
        }


        @Override
        protected void setThumbBounds(int x, int y, int width, int height) {
            super.setThumbBounds(0, 0, 0, 0);
        }


        @Override
        protected Dimension getMinimumThumbSize() {
            return new Dimension(0, 0);
        }

        @Override
        protected Dimension getMaximumThumbSize() {
            return new Dimension(0, 0);
        }
    }
}

Right now I don't see any Thumb, only a Track when I try to click around the ScrollBar.

I checked out this article and saw people recommended you read this but nowhere does he mention images so this is what I came up with.

Hopefully someone can help me, Thanks!

Answer 1

Why are you calling g2g.dispose()? It's destroys Graphics object so it can't to paint thumb. Try to remove this call inside paintThumb method. Here is example of drawing custom thumb :

@Override
    protected void paintThumb(Graphics g, JComponent c, Rectangle thumbBounds) {
        if (thumbBounds.isEmpty() || !scrollbar.isEnabled()) {
            return;
        }
        g.translate(thumbBounds.x, thumbBounds.y);
        g.drawRect(0, 0, thumbBounds.width - 2, thumbBounds.height - 1);
        AffineTransform transform = AffineTransform.getScaleInstance((double) thumbBounds.width
                / thumbImg.getWidth(null), (double) thumbBounds.height / thumbImg.getHeight(null));
        ((Graphics2D) g).drawImage(thumbImg, transform, null);
        g.translate(-thumbBounds.x, -thumbBounds.y);
    }

Answer 2

The problem is:

g2g.drawImage(image, 0, 0, null);

You have to use the current thumb position as the starting drawing point. I think it must be thumbRect.x and thumbRect.y, so:

g2g.drawImage(image, thumbRect.x, thumbRect.y, null); should work.

In Addition, I'm not sure of your call of the super-method in paintThumb. Wouldn't that line override your customized stuff?

And: Call of dispose should be left out.