为基本的 Java 矩形添加光晕

Question

我有一个非常基本的矩形绘图面板，但我想知道是否有一种简单的方法可以为矩形添加某种光晕。

public class Blocks extends JPanel {

    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        this.setBackground(Color.BLACK);

        for (int i = 1; i <= totalSteps; i++) {
            g.setColor(Color.WHITE);
            g.fillRect(100 + i*60, 260, 50, 50);
        }
    }
}

Answer 1

产生“发光”效果有点复杂，具体取决于您想要实现的目标。

我使用这种方法为透明/非矩形形状生成发光效果（例如，非常适合生成阴影）。

这个例子基本上创建了一个代表“发光”的BufferedImage，然后它生成一个“遮罩”，将原来的BufferedImage从其中剪掉。我这样做是因为它允许我在透明/半透明图像下方绘制“发光”。在您的情况下，您可以跳过“屏蔽”过程，但这取决于您。

您还需要一份JHLabs, Image Filters 的副本，因为我懒得制作自己的模糊滤镜

import com.jhlabs.image.GaussianFilter;
import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GraphicsConfiguration;
import java.awt.GraphicsEnvironment;
import java.awt.Transparency;
import java.awt.image.BufferedImage;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class GlowEffect {

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

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

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

    public class TestPane extends JPanel {

        public TestPane() {
        }

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

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

            int width = 50;
            int height = 50;
            int x = (getWidth() - width) / 2;
            int y = (getHeight() - height) / 2;

            BufferedImage img = generateGlow(width, height, 20, Color.YELLOW, 1f);
            g2d.drawImage(img, x - ((img.getWidth() - width) / 2), y - ((img.getHeight() - height) / 2), this);
            g2d.setColor(Color.WHITE);
            g2d.fillRect(x, y, width, height);
            g2d.dispose();
        }

    }

    public static BufferedImage generateGlow(int width, int height, int size, Color glow, float alpha) {
        BufferedImage source = createCompatibleImage(width, height);
        Graphics2D g2d = source.createGraphics();
        g2d.setColor(Color.WHITE);
        g2d.fillRect(0, 0, width, height);
        g2d.dispose();
        return generateGlow(source, size, glow, alpha);
    }

    public static BufferedImage generateGlow(BufferedImage imgSource, int size, Color color, float alpha) {

        int imgWidth = (int)Math.round(imgSource.getWidth() + (size * 2.5));
        int imgHeight = (int)Math.round(imgSource.getHeight() + (size * 2.5));

        BufferedImage imgMask = createCompatibleImage(imgWidth, imgHeight);
        Graphics2D g2 = imgMask.createGraphics();

        int x = Math.round((imgWidth - imgSource.getWidth()) / 2f);
        int y = Math.round((imgHeight - imgSource.getHeight()) / 2f);
        g2.drawImage(imgSource, x, y, null);
        g2.dispose();

        BufferedImage imgGlow = generateBlur(imgMask, size, color, alpha);

        imgGlow = applyMask(imgGlow, imgMask, AlphaComposite.DST_OUT);

        return imgGlow;

    }
    public static BufferedImage generateBlur(BufferedImage imgSource, int size, Color color, float alpha) {

        GaussianFilter filter = new GaussianFilter(size);

        int imgWidth = imgSource.getWidth();
        int imgHeight = imgSource.getHeight();

        BufferedImage imgBlur = createCompatibleImage(imgWidth, imgHeight);
        Graphics2D g2 = imgBlur.createGraphics();

        g2.drawImage(imgSource, 0, 0, null);
        g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_IN, alpha));
        g2.setColor(color);

        g2.fillRect(0, 0, imgSource.getWidth(), imgSource.getHeight());
        g2.dispose();

        imgBlur = filter.filter(imgBlur, null);

        return imgBlur;

    }

    public static BufferedImage createCompatibleImage(int width, int height) {
        return createCompatibleImage(width, height, Transparency.TRANSLUCENT);
    }

    public static BufferedImage createCompatibleImage(int width, int height, int transparency) {
        BufferedImage image = getGraphicsConfiguration().createCompatibleImage(width, height, transparency);
        image.coerceData(true);
        return image;
    }
    public static GraphicsConfiguration getGraphicsConfiguration() {
        return GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice().getDefaultConfiguration();
    }

    public static BufferedImage applyMask(BufferedImage sourceImage, BufferedImage maskImage, int method) {
        BufferedImage maskedImage = null;
        if (sourceImage != null) {
            int width = maskImage.getWidth(null);
            int height = maskImage.getHeight(null);

            maskedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
            Graphics2D mg = maskedImage.createGraphics();

            int x = (width - sourceImage.getWidth(null)) / 2;
            int y = (height - sourceImage.getHeight(null)) / 2;

            mg.drawImage(sourceImage, x, y, null);
            mg.setComposite(AlphaComposite.getInstance(method));

            mg.drawImage(maskImage, 0, 0, null);

            mg.dispose();
        }
        return maskedImage;
    }

}

基本工作流程如下：

• 创建一个BufferedImage，它代表您要对其应用光晕的形状（这是一个不透明的图像）
• 根据size 参数创建一个“蒙版”图像，该图像大于您要在其周围生成光晕效果的图像，但在其中心绘制了原始图像
• 使用“蒙版”图像生成“模糊”图像
• 使用原始图像，将其蒙版为“模糊”图像，从而将原始图像“切掉”“模糊”图像。这成为我们发光效果的基础
• 绘制“发光/模糊”图像，相应调整 x/y 位置（发光效果比原始形状大，所以我们需要调整它的位置）
• 在所需位置绘制矩形

您需要查看Compositing Graphics，了解有关屏蔽过程如何工作的更多详细信息。

我使用这种想法为example、example 和example 生成透明/非矩形形状的阴影