How to encode a dirty gradient border using Java Swing

Question

Revised: the problem is to draw a four-sided border, where each side starts with a solid base color and disappears to white inward along the span of the border. The challenge was to make border crossing look seamless. To do this, you can draw borders, and then use triangles to “blend” the corners. Two triangles can be used for each corner if there is no overlap in the rectangles drawn on the beam, or one triangle per corner is sufficient (as shown below) if two parallel boundary sides extend the entire length of the border (i.e., 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(); } 

code>

Answer 1

What if you do not 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); 

This way the rectangles will not overlap, but instead, you will have nice clear edges between the different segments.

Answer 2

Instead of creating and drawing 4 rectangles, I would create one Shape representing your border region by subtracting the inner rectangle from the outer using Area :

 Area area = new Area(new Rectangle2D.Double(...)); Area inner = new Area(new Rectangle2D.Double(...)); area.subtract(inner); g2.setPaint(new GradientPaint(...)); g2.fill(area);