Circles in circles fading out, creating a target

问题

I want to create a graphics whereby circles are overlapped and their colour fades out, also the circles should have a white space in between each other, something similar to this:

Here is how far I've got:

import java.awt.*;
import java.awt.geom.*;
import javax.swing.*;
import java.awt.event.MouseListener;
import java.awt.event.MouseEvent;

class Circles extends JPanel implements MouseListener {


    public void mouseReleased(MouseEvent event) {

    }
    public void mousePressed(MouseEvent event) {

    }
    public void mouseClicked(MouseEvent event) {

    }
    public void mouseEntered(MouseEvent event) {}
    public void mouseExited(MouseEvent event) {}


    public Circles() {
        addMouseListener(this);
    }


    public void paint(Graphics g) {
        g.setColor(Color.white);
        int w = getWidth();
        int h = getHeight();
        g.fillRect(0, 0, w, h);


        Graphics2D g2 = (Graphics2D) g;

        for (int i = 0; i < 20; i++) {
            if (i % 2 == 0) {
                Color c = new Color(255 - i * 10, 255 - i * 10, 255 - i * 10);
                g2.setColor(c);
            } else {
                g2.setColor(Color.white);
            }

            g2.fillOval((5 * i), (5 * i), (w - 10) * i, (h - 10) * i);
        }
    }

    public static void main(String[] args) {
        Frame w = new Frame();
        w.setVisible(true);
    }
}

Frame:

import java.awt.*;
import java.awt.geom.*;
import javax.swing.*;


public class Frame extends JFrame {
    Circles myPanel;

    public static void main(String[] args) {
        Frame w = new Frame();
        w.setVisible(true);
    }

    public Frame() {
        setTitle("In-class Test 1: Starting Code");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(500, 220);
        setLocation(300, 300);
        myPanel = new Circles();
        add(myPanel);
    }
}

回答1:

There are a number of ways to achieve this, but first, start by overriding paintComponent instead of paint.

Second, you will need some kind of loop that expand the radius of the circle on each iteration.

Thirdly, you will want a simple int value that acts as a alpha value, starting from 255 and decreases down to the faintest alpha level you want, perhaps 64 of example.

On each iteration of the loop, you will want to increase the radius value and decrease the alpha value accordingly. You would then simply need to create a new Color object with the RGB & alpha values you need

Check out 2D Graphics for details

Updated with example...

import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.geom.Ellipse2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class FadingCircles {

    public static void main(String[] args) {
        new FadingCircles();
    }

    public FadingCircles() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame("Test");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }

        });
    }

    public static class TestPane extends JPanel {

        public static final int CIRCLE_COUNT = 10;

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(200, 200);
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();

            g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
            g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
            g2d.setRenderingHint(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
            g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
            g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
            g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
            g2d.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);

            int maxRadius = Math.min(getWidth(), getHeight());
            int alpha = 255;
            int range = 255 - 32;
            g2d.setStroke(new BasicStroke(6, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));

            for (int index = 0; index < CIRCLE_COUNT; index++) {
                float progress = (float) index / (float) CIRCLE_COUNT;
                alpha = 255 - Math.round(range * progress);
                Color color = new Color(0, 0, 0, alpha);
                g2d.setColor(color);

                int radius = Math.round(maxRadius * progress);
                int x = (getWidth() - radius) / 2;
                int y = (getHeight() - radius) / 2;

                g2d.draw(new Ellipse2D.Float(x, y, radius, radius));
            }
            g2d.dispose();
        }
    }
}

You might also like to check out Performing Custom Painting

来源：https://stackoverflow.com/questions/16125847/circles-in-circles-fading-out-creating-a-target