Java Graphics2D - 绘制具有渐变不透明度的图像

Question

使用 Graphics2d，我试图在背景图像上绘制一个 BufferedImage。在此图像中的任意点，我想在绘制的图像中“切一个圆孔”，让背景显示出来。

我希望孔不是实心形状，而是渐变。换句话说，BufferedImage 中的每个像素都应具有与其距孔中心的距离成比例的 alpha/不透明度。

我对 Graphics2d 渐变和 AlphaComposite 有点熟悉，但是有没有办法将它们结合起来？

是否有一种(不是非常昂贵的)方法来实现这种效果？

Answer 1

这可以通过 RadialGradientPaint 和适当的 AlphaComposite 来解决。

下面是一个MCVE这说明了如何做到这一点。它使用与 user1803551 used in his answer 相同的图像，因此屏幕截图看起来(几乎)相同。但是这个添加了一个 MouseMotionListener，它允许您通过将当前鼠标位置传递给 updateGradientAt 方法来移动孔，在该方法中实际创建所需的图像:

• 它首先用原始图像填充图像
• 然后它创建一个 RadialGradientPaint，它在中心有一个完全不透明的颜色，在边界(!)有一个完全透明的颜色。这可能看起来违反直觉，但其目的是从现有图像中“切出”这个洞，这是通过下一步完成的:

• 安AlphaComposite.DstOut分配给 Graphics2D。这会导致 alpha 值的“反转”，如公式中所示

  Ar = Ad*(1-As)
  Cr = Cd*(1-As)
  

  其中r代表“result”，s代表“source”，d代表“destination”

结果是图像在所需位置具有径向渐变透明度，在中心完全透明，在边界完全不透明 (!)。 Paint 和 Composite 的组合随后用于使用孔的大小和坐标填充椭圆。 (也可以执行 fillRect 调用，填充整个图像 - 它不会改变结果)。

import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RadialGradientPaint;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

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

public class TransparentGradientInImage
{
    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);

        TransparentGradientInImagePanel p =
            new TransparentGradientInImagePanel();
        f.getContentPane().add(p);
        f.setSize(800, 600);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }

}

class TransparentGradientInImagePanel extends JPanel
{
    private BufferedImage background;
    private BufferedImage originalImage;
    private BufferedImage imageWithGradient;

    TransparentGradientInImagePanel()
    {
        try
        {
            background = ImageIO.read(
                new File("night-sky-astrophotography-1.jpg"));
            originalImage = convertToARGB(ImageIO.read(new File("7bI1Y.jpg")));
            imageWithGradient = convertToARGB(originalImage);
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }

        addMouseMotionListener(new MouseAdapter()
        {
            @Override
            public void mouseMoved(MouseEvent e)
            {
                updateGradientAt(e.getPoint());
            }
        });
    }


    private void updateGradientAt(Point point)
    {
        Graphics2D g = imageWithGradient.createGraphics();
        g.drawImage(originalImage, 0, 0, null);

        int radius = 100;
        float fractions[] = { 0.0f, 1.0f };
        Color colors[] = { new Color(0,0,0,255), new Color(0,0,0,0) };
        RadialGradientPaint paint = 
            new RadialGradientPaint(point, radius, fractions, colors);
        g.setPaint(paint);

        g.setComposite(AlphaComposite.DstOut);
        g.fillOval(point.x - radius, point.y - radius, radius * 2, radius * 2);
        g.dispose();
        repaint();
    }

    private static BufferedImage convertToARGB(BufferedImage image)
    {
        BufferedImage newImage =
            new BufferedImage(image.getWidth(), image.getHeight(),
                BufferedImage.TYPE_INT_ARGB);
        Graphics2D g = newImage.createGraphics();
        g.drawImage(image, 0, 0, null);
        g.dispose();
        return newImage;
    }

    @Override
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        g.drawImage(background, 0, 0, null);
        g.drawImage(imageWithGradient, 0, 0, null);
    }
}

您可以使用RadialGradientPaint 的fractions 和colors 来获得不同的效果。例如，这些值...

float fractions[] = { 0.0f, 0.1f, 1.0f };
Color colors[] = { 
    new Color(0,0,0,255), 
    new Color(0,0,0,255), 
    new Color(0,0,0,0) 
};

造成一个小而透明的孔，带有一个大而柔软的“电晕”:

而这些值

float fractions[] = { 0.0f, 0.9f, 1.0f };
Color colors[] = { 
    new Color(0,0,0,255), 
    new Color(0,0,0,255), 
    new Color(0,0,0,0) 
};

造成一个大而清晰的中心，带有一个小的“电晕”:

RadialGradientPaint JavaDocs有一些可能有助于找到所需值的示例。

---

我发布(类似)答案的一些相关问题:

• Java2D Alpha Mapping images
• How to do 2D shadow casting in Java?

---

EDIT In response to the question about the performance that was asked in the comments

Paint/Composite 方法的性能与 getRGB/setRGB 方法相比如何的问题确实很有趣。根据我以前的经验，我的直觉是第一个比第二个快得多，因为一般来说，getRGB/setRGB 往往很慢，并且内置机制经过高度优化(在某些情况下，甚至可能是硬件加速的)。

事实上，Paint/Composite 方法比getRGB/setRGB 方法，但没有我预期的那么多。以下当然不是一个真正深刻的“基准”(我没有为此使用 Caliper 或 JMH)，但应该对实际性能给出一个很好的估计:

// NOTE: This is not really a sophisticated "Benchmark", 
// but gives a rough estimate about the performance

import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RadialGradientPaint;
import java.awt.image.BufferedImage;

public class TransparentGradientInImagePerformance
{
    public static void main(String[] args)
    {
        int w = 1000;
        int h = 1000;
        BufferedImage image0 = new BufferedImage(w, h,
            BufferedImage.TYPE_INT_ARGB);
        BufferedImage image1 = new BufferedImage(w, h,
            BufferedImage.TYPE_INT_ARGB);

        long before = 0;
        long after = 0;
        int runs = 100;
        for (int radius = 100; radius <=400; radius += 10)
        {
            before = System.nanoTime();
            for (int i=0; i<runs; i++)
            {
                transparitize(image0, w/2, h/2, radius);
            }
            after = System.nanoTime();
            System.out.println(
                "Radius "+radius+" with getRGB/setRGB: "+(after-before)/1e6);

            before = System.nanoTime();
            for (int i=0; i<runs; i++)
            {
                updateGradientAt(image0, image1, new Point(w/2, h/2), radius);
            }
            after = System.nanoTime();
            System.out.println(
                "Radius "+radius+" with paint          "+(after-before)/1e6);
        }
    }

    private static void transparitize(
        BufferedImage imgA, int centerX, int centerY, int r)
    {

        for (int x = centerX - r; x < centerX + r; x++)
        {
            for (int y = centerY - r; y < centerY + r; y++)
            {
                double distance = Math.sqrt(
                    Math.pow(Math.abs(centerX - x), 2) +
                    Math.pow(Math.abs(centerY - y), 2));
                if (distance > r)
                    continue;
                int argb = imgA.getRGB(x, y);
                int a = (argb >> 24) & 255;
                double factor = distance / r;
                argb = (argb - (a << 24) + ((int) (a * factor) << 24));
                imgA.setRGB(x, y, argb);
            }
        }
    }

    private static void updateGradientAt(BufferedImage originalImage,
        BufferedImage imageWithGradient, Point point, int radius)
    {
        Graphics2D g = imageWithGradient.createGraphics();
        g.drawImage(originalImage, 0, 0, null);

        float fractions[] = { 0.0f, 1.0f };
        Color colors[] = { new Color(0, 0, 0, 255), new Color(0, 0, 0, 0) };
        RadialGradientPaint paint = new RadialGradientPaint(point, radius,
            fractions, colors);
        g.setPaint(paint);

        g.setComposite(AlphaComposite.DstOut);
        g.fillOval(point.x - radius, point.y - radius, radius * 2, radius * 2);
        g.dispose();
    }
}

我的电脑上的时间是沿着

...
Radius 390 with getRGB/setRGB: 1518.224404
Radius 390 with paint          764.11017
Radius 400 with getRGB/setRGB: 1612.854049
Radius 400 with paint          794.695199

表明 Paint/Composite 方法的速度大约是 getRGB/setRGB 方法的两倍。除了性能之外，Paint/Composite 还有一些其他优点，主要是上面描述的 RadialGradientPaint 可能的参数化，这是原因为什么我更喜欢这个解决方案。