How to remove "stretch marks" on custom button border?

Question

When performing some custom painting on a button's Graphics2D object, I get the following results:

enter image description here

The leftmost button is untoggled and the other is toggled. As you can see, the toggled button has these white "stretch marks." Why are these there and how do I remove them?

And here is the code I use to draw the border:

// Draw border of button
if(!getModel().isSelected())
{
    g2.fillRoundRect(2, 2, getWidth() - 5, getHeight() - 5, ARC_WIDTH, ARC_HEIGHT);
    g2.setColor(Color.BLACK);
    g2.drawRoundRect(0, 0, getWidth() - 1, getHeight() - 1, ARC_WIDTH, ARC_HEIGHT);
    g2.setColor(Color.WHITE);
    g2.drawRoundRect(1, 1, getWidth() - 3, getHeight() - 3, ARC_WIDTH, ARC_HEIGHT);
    g2.setColor(Color.WHITE);
    g2.drawRoundRect(2, 2, getWidth() - 5, getHeight() - 5, ARC_WIDTH, ARC_HEIGHT);
    g2.setColor(Color.BLACK);
    g2.drawRoundRect(3, 3, getWidth() - 7, getHeight() - 7, ARC_WIDTH, ARC_HEIGHT);
}
else
{
    g2.fillRoundRect(2, 2, getWidth() - 5, getHeight() - 5, ARC_WIDTH, ARC_HEIGHT);
    g2.setColor(Color.BLACK);
    g2.drawRoundRect(0, 0, getWidth() - 1, getHeight() - 1, ARC_WIDTH, ARC_HEIGHT);
    g2.setColor(Color.BLACK);
    g2.drawRoundRect(1, 1, getWidth() - 3, getHeight() - 3, ARC_WIDTH, ARC_HEIGHT);
    g2.setColor(Color.BLACK);
    g2.drawRoundRect(2, 2, getWidth() - 5, getHeight() - 5, ARC_WIDTH, ARC_HEIGHT);
    g2.setColor(Color.BLACK);
    g2.drawRoundRect(3, 3, getWidth() - 7, getHeight() - 7, ARC_WIDTH, ARC_HEIGHT);
}

I think it's because you draw if by drawing several 1px thick borders instead of drawing it 5 thick to begin with — ratchet freak, Feb 21 '12 at 17:47
@ratchetfreak, Oh, nice observation! I did this because I wasn't sure how to do it as you suggested. :/ — mre, Feb 21 '12 at 17:49
Gosh! its a real programming q, `SO` dint turnout to be a Beauty Salon. :P — uday, Feb 21 '12 at 17:50
You might also look to implement a [custom border](http://stackoverflow.com/a/8463742/418556) for the button. — Andrew Thompson, Feb 21 '12 at 18:48

score 3 · Accepted Answer · answered Feb 21 '12 at 17:51

3

Why are you drawing so many rounded rectangles around the button? As far as I can see, the correct way to do this would be to use setStroke() API while drawing the kind of border you like.

answered Feb 21 '12 at 17:51

ring bearer

20,383
7
59
72

score 2 · Answer 2 · answered Feb 21 '12 at 18:00

it's because you draw if by drawing several 1px thick borders which misses some pixels in the arcs (draw it again with different colors and zoom in on the image to see it)

use the fill to set the color of the border and then draw the contrasting borders

Color fillcolor = Color.WHITE;
Color bordercolor = Color.BLACK;

if(getModel().isSelected())
{
    fillcolor = Color.BLACK;
}
//fill the full rectangle
g2.setColor(fillcolor);
g2.fillRoundRect(0, 0, getWidth() - 1, getHeight() - 1, ARC_WIDTH, ARC_HEIGHT);

//draw contrasted borders
g2.setColor(bordercolor);
g2.drawRoundRect(0, 0, getWidth() - 1, getHeight() - 1, ARC_WIDTH, ARC_HEIGHT);
g2.setColor(bordercolor);
g2.drawRoundRect(3, 3, getWidth() - 7, getHeight() - 7, ARC_WIDTH, ARC_HEIGHT);

How to remove "stretch marks" on custom button border?

2 Answers2

Linked