Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I code a filthy rich gradient-painted border using Java Swing

Revised: The problem is to paint a four sided border where each side starts with a solid base color and fades to white inward over the span of the border. The challenge was to make the intersection of the borders look seamless. To accomplish this, one may draw the borders, then use triangles to 'blend' the corners. Two triangles may be used per corner if there is no overlap in the rectangles drawing the broder, or one triangle per corner is sufficient (as shown below) if two parallel border sides extend the full length of the border (ie the rectangles overlap).


    private static final int GRADIENT_LENGTH = 29;
    private static final int BAR_LENGTH = 25;
    public static void paintGradientBorder(Graphics g, Color borderColor) {

    Graphics2D g2 = (Graphics2D) g.create();

    GradientPaint gradientColorWest = new GradientPaint(0, 0, borderColor,
            GRADIENT_LENGTH, 0, Color.WHITE);
    GradientPaint gradientColorEast = new GradientPaint(WINDOW_WIDTH - GRADIENT_LENGTH,
            0, Color.WHITE, WINDOW_WIDTH, 0, borderColor);
    GradientPaint gradientColorNorth= new GradientPaint(0, 0, borderColor, 0,
            GRADIENT_LENGTH, Color.WHITE);
    GradientPaint gradientColorSouth = new GradientPaint(0, WINDOW_HEIGHT - GRADIENT_LENGTH,
            Color.WHITE,0, WINDOW_HEIGHT, borderColor);

    //south bar
    g2.setPaint(gradientColorSouth);
    g2.fillRect(0, WINDOW_HEIGHT - BAR_LENGTH, WINDOW_WIDTH, BAR_LENGTH);
    //north bar
    g2.setPaint(gradientColorNorth);
    g2.fillRect(0, 0, WINDOW_WIDTH, BAR_LENGTH);
    //west bar
    g2.setPaint(gradientColorWest);
    g2.fillRect(0, BAR_LENGTH, BAR_LENGTH, WINDOW_HEIGHT - BAR_LENGTH * 2);
    //east bar
    g2.setPaint(gradientColorEast);
    g2.fillRect(WINDOW_WIDTH - BAR_LENGTH, BAR_LENGTH, WINDOW_WIDTH, WINDOW_HEIGHT - BAR_LENGTH * 2);

    //NORTH WEST CORNER
    //left triangle
    Polygon p = new Polygon();        
    p.addPoint(0, 0);
    p.addPoint(BAR_LENGTH, BAR_LENGTH);
    p.addPoint(0, BAR_LENGTH);
    g2.setPaint(gradientColorWest);
    g2.fillPolygon(p);        
    //NORTH EAST CORNER
    //right triangle
    p.reset();
    p.addPoint(WINDOW_WIDTH, 0);
    p.addPoint(WINDOW_WIDTH - BAR_LENGTH, BAR_LENGTH);
    p.addPoint(WINDOW_WIDTH, BAR_LENGTH);
    g2.setPaint(gradientColorEast);
    g2.fillPolygon(p);
    //SOUTH WEST CORNER
    //left triangle
    p.reset();
    p.addPoint(0, WINDOW_HEIGHT);
    p.addPoint(0,WINDOW_HEIGHT - BAR_LENGTH);
    p.addPoint(BAR_LENGTH, WINDOW_HEIGHT - BAR_LENGTH);
    g2.setPaint(gradientColorWest);
    g2.fillPolygon(p);
    //SOUTH EAST CORNER
    //right triangle
    p.reset();
    p.addPoint(WINDOW_WIDTH, WINDOW_HEIGHT);
    p.addPoint(WINDOW_WIDTH, WINDOW_HEIGHT - BAR_LENGTH);
    p.addPoint(WINDOW_WIDTH - BAR_LENGTH, WINDOW_HEIGHT - BAR_LENGTH);
    g2.setPaint(gradientColorEast);
    g2.fillPolygon(p);

    g2.dispose();
}

like image 863
farm ostrich Avatar asked Feb 24 '23 19:02

farm ostrich


1 Answers

What if you don't intersect the rectangles but instead use a polygon (GeneralPath)?

GeneralPath topBox = new GeneralPath();
topBox.moveTo(0, 0);
// upper right
topBox.lineTo(width, 0);
// lower right; move diagonally down and to the left as in a picture frame
topBox.lineTo(width - (insetX / 2), 0 + (insetY / 2));
// lower left
topBox.lineTo((insetX / 2), 0 + (insetY / 2));
topBox.closePath();
g2.fill(topBox);

enter image description here

That way the rectangles will not overlap, but instead you'll have nice crisp edges between the different segments.

like image 135
I82Much Avatar answered Mar 08 '23 23:03

I82Much