Component painting outside custom border

mre picture mre · Dec 7, 2011 · Viewed 7.8k times · Source

In this custom border class, I define a RoundRectangle2D shape. This object is used to paint the border. Unfortunately, since the paint method of a JComponent invokes paintComponent before paintBorder, setting the Graphics clip to the RoundRectangle2D shape has no effect; even if I issue a repaint. Therefore, the component will paint outside it's border, which is understandably undesirable.

So, I was wondering: how do I get the component to paint exclusively inside a custom border?

One approach I considered was obtaining the component's Border object in the paintComponent method. And then casting this object to the appropriate class, wherein I define parameters that will influence the clip. But this didn't seem like a "sound" design.


Edit -

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Component;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Insets;
import java.awt.RenderingHints;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
import javax.swing.border.AbstractBorder;

class JRoundedCornerBorder extends AbstractBorder 
{   
    private static final long serialVersionUID = 7644739936531926341L;
    private static final int THICKNESS = 2;

    JRoundedCornerBorder()
    {
        super();
    }

    @Override
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) 
    {
        Graphics2D g2 = (Graphics2D)g.create();

        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        if(c.hasFocus())
        {
            g2.setColor(Color.BLUE);
        }
        else
        {
            g2.setColor(Color.BLACK);
        }
        g2.setStroke(new BasicStroke(THICKNESS, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
        g2.drawRoundRect(THICKNESS, THICKNESS, width - THICKNESS - 2, height - THICKNESS - 2, 20, 20);

        g2.dispose();
    }

    @Override
    public Insets getBorderInsets(Component c) 
    {
        return new Insets(THICKNESS, THICKNESS, THICKNESS, THICKNESS);
    }

    @Override
    public Insets getBorderInsets(Component c, Insets insets) 
    {
        insets.left = insets.top = insets.right = insets.bottom = THICKNESS;
        return insets;
    }

    public boolean isBorderOpaque() {
        return false;
    }

    public static void main(String[] args) 
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            @Override
            public void run() 
            {
                final JFrame frame = new JFrame();
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new FlowLayout());

                // Add button with custom border
                final JButton button = new JButton("Hello");
                button.setBorder(new JRoundedCornerBorder());
                button.setBackground(Color.YELLOW);
                button.setPreferredSize(new Dimension(200, 200));
                frame.add(button);

                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }
}

enter image description here

The red circles highlight where the component extends beyond it's border.

Answer

kleopatra picture kleopatra · Dec 7, 2011

ahh ... at last I got it (missed the roundBorder for some reason, my fault :-) The button is simply complying to its contract: it states being opaque, so must fill its complete area, including that of the border. So setting a clip (which you could do in paintComponent) would make violate the contract:

 // DO NOT - a opaque component violates its contract, as it will not fill
 // its complete area  
        @Override
        protected void paintComponent(Graphics g) {
            if (getBorder() instanceof JRoundedCornerBorder) {
                Shape borderShape = ((JRoundedCornerBorder) getBorder()).
                    getBorderShape(getWidth(), getHeight());
                g.setClip(borderShape);
            }
            super.paintComponent(g);
        }

Ugly but safe would be to report itself as transparent and take over the background painting yourself:

        @Override
        protected void paintComponent(Graphics g) {
            if (getBorder() instanceof JRoundedCornerBorder) {
                g.setColor(getBackground());
                Shape borderShape = ((JRoundedCornerBorder) getBorder())
                    .getBorderShape(getWidth(), getHeight());
                ((Graphics2D) g).fill(borderShape);
            }
            super.paintComponent(g);
        }

        @Override
        public boolean isContentAreaFilled() {
            if (getBorder() instanceof JRoundedCornerBorder) return false;
            return super.isContentAreaFilled();
        }

        // using
        button.setOpaque(false);