Rectangular Gradient

Question

I'm trying to implement a draw(Graphics2D g) method for something in my user interface. It is not a swing component, and I am doing the drawing myself. I am trying to create a gradient border like this image

gradient border

How can I draw a gradient similar to that one?

Have you tried starting with red then gradually fading out to white? — Evan Knowles, Jul 12 '14 at 22:32
The only gradients I've ever seen were either linear or radial, but I've never seen one that went outward in a rectangular shape, so I'm not entirely sure how to do this. — Kyranstar, Jul 12 '14 at 22:33
You can always create your own Paint-derived class that does this. If this is the path you wish to choose, then check out Java's source code for Paint, GradientPaint and similar classes and interfaces. — Hovercraft Full Of Eels, Jul 12 '14 at 23:27

score 4 · Accepted Answer · edited May 23 '17 at 12:30

You did not really specify what you want, but if it is what I think that it is, then it is somewhat similar to what I wrote in my answer to "How to make gradient border of an image using java?".

The trick here is to not create a single gradient paint, and to not fill a single shape. Instead, the area that has to be filled with gradients is divided into 8 parts: Four edges and four corners. The edges are filled with simple gradient paints. The corners are filled with radial gradient paints. Then it's only about fiddling around with the coordinates, but this can be done in a rather generic way, when the inner shape is given as a Rectangle2D.

However, the result may then, for example, look like this:

enter image description here

import java.awt.Color;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.MultipleGradientPaint.CycleMethod;
import java.awt.RadialGradientPaint;
import java.awt.Shape;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;
import java.awt.geom.RoundRectangle2D;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class RectangularGradientTest
{
    public static void main(String[] args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            @Override
            public void run()
            {
                createAndShowGUI();
            }
        });
    }

    private static void createAndShowGUI()
    {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(new RectangularGradientTestPanel());
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }
}


class RectangularGradientTestPanel extends JPanel
{
    @Override
    protected void paintComponent(Graphics gr)
    {
        super.paintComponent(gr);
        Graphics2D g = (Graphics2D)gr;
        Rectangle2D r = new Rectangle2D.Double(100,100,200,100);
        draw(g, r, 75);

        Shape rr = new RoundRectangle2D.Double(80,80,240,140,20,20);
        g.setColor(Color.BLACK);
        g.fill(rr);
    }

    @Override
    public Dimension getPreferredSize()
    {
        if (isPreferredSizeSet())
        {
            return super.getPreferredSize();
        }
        return new Dimension(400,300);
    }


    private static void draw(Graphics2D g, Rectangle2D r, double s)
    {
        Color c0 = new Color(255,0,0);
        Color c1 = new Color(255,0,0,0);

        double x0 = r.getMinX();
        double y0 = r.getMinY();
        double x1 = r.getMaxX();
        double y1 = r.getMaxY();
        double w = r.getWidth();
        double h = r.getHeight();

        // Left
        g.setPaint(new GradientPaint(
            new Point2D.Double(x0, y0), c0,
            new Point2D.Double(x0 - s, y0), c1));
        g.fill(new Rectangle2D.Double(x0 - s, y0, s, h));

        // Right
        g.setPaint(new GradientPaint(
            new Point2D.Double(x1, y0), c0,
            new Point2D.Double(x1 + s, y0), c1));
        g.fill(new Rectangle2D.Double(x1, y0, s, h));

        // Top
        g.setPaint(new GradientPaint(
            new Point2D.Double(x0, y0), c0,
            new Point2D.Double(x0, y0 - s), c1));
        g.fill(new Rectangle2D.Double(x0, y0 - s, w, s));

        // Bottom
        g.setPaint(new GradientPaint(
            new Point2D.Double(x0, y1), c0,
            new Point2D.Double(x0, y1 + s), c1));
        g.fill(new Rectangle2D.Double(x0, y1, w, s));

        float fractions[] = new float[] { 0.0f, 1.0f };
        Color colors[] = new Color[] { c0, c1 };

        // Top Left
        g.setPaint(new RadialGradientPaint(
            new Rectangle2D.Double(x0 - s, y0 - s, s + s, s + s), 
            fractions, colors, CycleMethod.NO_CYCLE));
        g.fill(new Rectangle2D.Double(x0 - s, y0 - s, s, s));

        // Top Right
        g.setPaint(new RadialGradientPaint(
            new Rectangle2D.Double(x1 - s, y0 - s, s + s, s + s), 
            fractions, colors, CycleMethod.NO_CYCLE));
        g.fill(new Rectangle2D.Double(x1, y0 - s, s, s));

        // Bottom Left
        g.setPaint(new RadialGradientPaint(
            new Rectangle2D.Double(x0 - s, y1 - s, s + s, s + s), 
            fractions, colors, CycleMethod.NO_CYCLE));
        g.fill(new Rectangle2D.Double(x0 - s, y1, s, s));

        // Bottom Right
        g.setPaint(new RadialGradientPaint(
            new Rectangle2D.Double(x1 - s, y1 - s, s + s, s + s), 
            fractions, colors, CycleMethod.NO_CYCLE));
        g.fill(new Rectangle2D.Double(x1, y1, s, s));
    }

}

Rectangular Gradient

1 Answers1