逐渐消失的圆圈，创建目标 [英] Circles in circles fading out, creating a target

问题描述

我想创建一个图形，在图形中圆圈重叠并且颜色逐渐淡出，圆圈之间也应有一个空白，类似于以下内容:

这是我走了多远:

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);
    }
}

框架:

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);
    }
}

解决方案

有多种方法可以实现此目的，但首先，首先应覆盖paintComponent而不是paint.

第二，您将需要某种循环，以在每次迭代时扩展圆的半径.

第三，您将需要一个简单的int值作为alpha值，从255开始，一直减小到所需的最微弱的alpha级别，例如64.

在循环的每次迭代中，您都希望增加半径值并相应地减小alpha值.然后，您只需要使用RGB&创建一个新的Color对象.您需要的Alpha值

有关详细信息，请查看 2D图形

已更新示例...

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();
        }
    }
}

您可能还想查看执行自定义绘画

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);
    }
}

解决方案

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

这篇关于逐渐消失的圆圈，创建目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！