2016-01-09 288 views
5

使用Graphics2d,我试图在背景图像上绘制一个BufferedImage。在这幅图像的任意一点上,我想在绘制的图像中“切出一个圆形孔”,让背景显示出来。Java Graphics2D - 使用渐变不透明度绘制图像

我想这个洞不是一个坚实的形状,而是一个渐变。换句话说,BufferedImage中的每个像素应该具有与距离孔中心的距离成比例的α/不透明度。

我有点熟悉Graphics2d梯度和AlphaComposite,但是有没有办法将这些结合起来?

有没有(不是非常昂贵)的方式来实现这种效果?

回答

6

这可以用RadialGradientPaint和适当AlphaComposite来解决。

以下是MCVE显示如何可以做到这一点。它使用相同的图片,user1803551 used in his answer,所以截图看起来(几乎)相同。但是这样一来增加了MouseMotionListener,使您可以四处移动孔,通过将当前鼠标位置到updateGradientAt方法,其中所需图像的实际创作发生:

  • 它先用填充图像原始图像
  • 然后它会创建一个RadialGradientPaint,它的中心颜色完全不透明,边缘(!)的颜色完全透明。这可能看起来违反直觉,但其目的是从现有图像中“挖出”洞,这是通过下一步完成的:
  • AlphaComposite.DstOut被分配给Graphics2D。这一个导致一个α值的“反转”,如式

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

    其中r代表“结果”,s代表“源”和d代表“目的地”

结果是在所需位置具有径向渐变透明度的图像,在中心处完全透明且在边界(!)完全不透明。然后使用PaintComposite的组合来填充具有孔的尺寸和坐标的椭圆。 (也可以拨打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); 
    } 
} 

您可以与fractionsRadialGradientPaintcolors播放,以实现不同的效果。例如,这些值...

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

引起小,透明孔,具有大的,柔软的 “电晕”:

TransparentGradientInImage02.png

而这些值

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

导致一个大而透明的中心,带有一个小的“电晕”:

TransparentGradientInImage01.png

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


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


编辑回应有关性能的疑问,在纪念中被问到NTS

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

事实上,Paint/Composite方法getRGB/setRGB方法快,但并不如我预期的多。下面当然不是一个真正深刻的“基准”(我没有使用卡尺或江铃控股此),但应提供有关实际性能的良好估计:

// 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的可能参数化,这是我更喜欢这种解决方案的原因。

+0

非常好,这是否会给我的解决方案带来更好的性能呢? – user1803551

+1

@ user1803551它确实给了更好的性能(为此添加了EDIT),但并不像我预期的那样多(这可能是由于' RadialGradientPaint' - 你可以通过这种方式获得一些漂亮的效果,而简单地“剪下一个洞”就是这个类最简单的例子之一) – Marco13

2

,如果你打算创建这个透明的“洞”动态或者如果它是一个一次性的事情我不知道。我确信有几种方法可以完成你想要的功能,并且我将其中一种方法直接改变了像素,其中可能不是性能最好的(我只是没有比较其他方式我认为这将取决于你做什么)。

我在这里描绘的臭氧层破洞澳超:

enter image description here

public class Paint extends JPanel { 

    BufferedImage imgA; 
    BufferedImage bck; 

    Paint() { 

     BufferedImage img = null; 
     try { 
      img = ImageIO.read(getClass().getResource("img.jpg")); // images linked below 
      bck = ImageIO.read(getClass().getResource("bck.jpg")); 
     } catch (IOException e) { 
      e.printStackTrace(); 
     } 
     imgA = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB); 
     Graphics2D g2d = imgA.createGraphics(); 
     g2d.drawImage(img, 0, 0, null); 
     g2d.dispose(); 

     transparitize(200, 100, 80); 
    } 

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

    @Override 
    protected void paintComponent(Graphics g) { 

     super.paintComponent(g); 
     g.drawImage(bck, 0, 0, null); 
     g.drawImage(imgA, 0, 0, null); 
    } 

    @Override 
    public Dimension getPreferredSize() { 

     return new Dimension(bck.getWidth(), bck.getHeight()); // because bck is larger than imgA, otherwise use Math.max 
    } 
} 

的想法是与getRGB拿到像素的ARGB值,改变α(或其他任何东西),和将其设置为setRGB。我创建了一个给定中心和半径的径向渐变方法。它当然可以提高,我会留给你(提示:centerX - r可以出界;与distance > r像素可以从迭代被完全移除)。

注:

  • 我画的背景图像和在它上面的小过的图像只是为了清楚地显示的背景是什么样子。
  • 有相当读取和改变int的Alpha值,搜索这个网站的一些方法,你会发现至少2-3个更多的途径。
  • 添加到您最喜爱的顶级容器并运行。

来源:

+0

谢谢,这或多或少是我打算做的,如果我找不到其他解决方案。我只是想知道是否有一些内置的,优化的功能来做到这一点。 – B1CL0PS

+1

一些边界检查也可能是必要的,例如对于在大小为(100,100)的图像上使用参数(99,99,10)调用该方法的情况。 – Marco13

+0

@ Marco13我在谈论方法时提到了边界检查(“*它当然可以改进,我会把它留给你(提示:'centerX - r'可以超出边界*”) – user1803551