【问题标题】:Making a part of an image transparent in java swing在java swing中使图像的一部分透明
【发布时间】:2022-08-09 06:41:43
【问题描述】:

我正在尝试使用 java swing gui 做一个模拟程序。我有 2 张相同的图像,但一张一直模糊,另一张正常。第三张图片只是一个 .png 格式的透明矩形框。我想要实现的是,我将透明矩形框拖到模糊图像上,它会在下面显示非模糊图像。我怎样才能做到这一点?

P.S:使用 JLabel 将图像加载到 JLayeredPane 和 JFrame 上的程序中。透明矩形框也有一个鼠标侦听器。

【问题讨论】:

  • 对于example,可能有多种方法可以解决此问题。我想我可能会做的是使用 BufferedImage#subImage 并基于当前的 x/y 位置,抓取未模糊图像的子图像快照并将其渲染到模糊图像的顶部。关键是,专注于你试图创造的幻觉,而不是你如何让它在身体上发挥作用。
  • 或者,您可以创建模糊图像的蒙版版本,其中“视图区域”被剪切并渲染,但这可能非常昂贵
  • @MadProgrammer 您好,感谢您的帮助。我一直在尝试通过叠加错觉来实现这一点,但无法使其发挥作用。我怎么能按照你在第一条评论中所说的方式去做。我对 Java GUI 不是很有经验,所以无法弄清楚,尤其是 x/y 坐标。
  • 我发布的示例是否会这样做

标签: java swing user-interface transparent


【解决方案1】:

一个“叠加”错觉......

基本上这将根据当前鼠标位置和视口大小生成未模糊图像的subImage,然后将其与“叠加效果”混合并渲染在模糊图像之上,创建“错觉” ”的抠图效果。

以下示例将跟随鼠标移动,在鼠标光标周围显示图像的 200x200 像素区域。

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.Point;
import java.awt.RadialGradientPaint;
import java.awt.Rectangle;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Point2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;

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

    public Main() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    JFrame frame = new JFrame();
                    frame.add(new TestPane());
                    frame.pack();
                    frame.setLocationRelativeTo(null);
                    frame.setVisible(true);
                } catch (IOException ex) {
                    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        });
    }

    public class TestPane extends JPanel {

        private BufferedImage blurredImage;
        private BufferedImage normalImage;
        private BufferedImage spyScopeImage;

        private int viewPortSize = 200;

        private Point currentLocation;

        public TestPane() throws IOException {
            blurredImage = ImageIO.read(getClass().getResource("/images/PosterBlurred.png"));
            normalImage = ImageIO.read(getClass().getResource("/images/Poster.png"));

            spyScopeImage = new BufferedImage(viewPortSize, viewPortSize, BufferedImage.TYPE_INT_ARGB);
            Graphics2D masked = spyScopeImage.createGraphics();
            Color transparent = new Color(255, 0, 0, 0);
            Color fill = Color.RED;
            RadialGradientPaint rgp = new RadialGradientPaint(
                    new Point2D.Double(viewPortSize / 2d, viewPortSize / 2d),
                    viewPortSize,
                    new float[]{0f, 0.5f, 1f},
                    new Color[]{fill, transparent, transparent});
//            masked.setComposite(AlphaComposite.DstAtop);
            masked.setPaint(rgp);
            masked.fill(new Rectangle(0, 0, viewPortSize, viewPortSize));
            masked.dispose();

            MouseAdapter mouseAdapter = new MouseAdapter() {
                @Override
                public void mouseMoved(MouseEvent e) {
                    currentLocation = e.getPoint();
                    repaint();
                }

                @Override
                public void mouseEntered(MouseEvent e) {
                    currentLocation = e.getPoint();
                    repaint();
                }

                @Override
                public void mouseExited(MouseEvent e) {
                    currentLocation = null;
                    repaint();
                }
            };

            addMouseMotionListener(mouseAdapter);
        }

        @Override
        public Dimension getPreferredSize() {
            if (blurredImage != null) {
                return new Dimension(blurredImage.getWidth(), blurredImage.getHeight());
            }
            return new Dimension(800, 600);
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            if (blurredImage != null) {
                int x = (getWidth() - blurredImage.getWidth()) / 2;
                int y = (getHeight() - blurredImage.getHeight()) / 2;
                g2d.drawImage(blurredImage, x, y, this);
                if (currentLocation != null && normalImage != null) {
                    int mouseX = currentLocation.x - x;
                    int mouseY = currentLocation.y - y;

                    int viewPortOffset = viewPortSize / 2;

                    int minX = Math.max(0, mouseX - viewPortOffset);
                    int minY = Math.max(0, mouseY - viewPortOffset);

                    int maxX = Math.min(normalImage.getWidth(), mouseX + viewPortSize);
                    int maxY = Math.min(normalImage.getHeight(), mouseY + viewPortSize);

                    int viewX = minX - viewPortOffset;
                    int viewY = minY - viewPortOffset;

                    BufferedImage subimage = normalImage.getSubimage(minX, minY, maxX - minX, maxY - minY);

                    // Here we're going to "mask" the sub image and the "spy scope" effect together
                    BufferedImage masked = new BufferedImage(viewPortSize, viewPortSize, BufferedImage.TYPE_INT_ARGB);
                    Graphics2D mg = masked.createGraphics();
                    mg.drawImage(subimage, 0, 0, this);
                    mg.setComposite(AlphaComposite.DstAtop);
                    mg.drawImage(spyScopeImage, 0, 0, this);
                    mg.dispose();
                    g2d.drawImage(masked, x + minX, y + minY, this);
                }
            }
            g2d.dispose();
        }

    }
}

或者...

您可以使用“范围效果”创建模糊图像的“蒙版”版本,该版本会暴露在其下方渲染的图像,但是同样,这会很昂贵,因为每次您创建原始模糊大小的新图像时图像。

这个概念在How to create a transparent shape in the image中得到了证明

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-02-24
    • 2014-10-06
    • 2014-01-25
    • 2017-03-21
    • 2013-08-12
    • 2023-03-22
    • 2020-05-31
    相关资源
    最近更新 更多