在 JLabel 上显示交互式圆形覆盖

Question

我有一个包含显示 BufferedImage 的 JLabel 的 JFrame。当我将鼠标悬停在这张图片上时，我需要在鼠标包含另一张图片的地方显示一个圆形覆盖层。

到目前为止我的代码：

JFrame frame = new JFrame();
GridBagLayout layout = new GridBagLayout();
frame.getContentPane().setLayout(gLayout);
JLabel myLabel= new JLabel(new ImageIcon(baseImage));
GridBagConstraints constraints = new GridBagConstraints();
...
frame.getContentPane().add(myLabel, constraints);

现在我需要在鼠标显示另一个 BufferedImage 的位置显示一个圆形叠加层。

所以我需要这样的东西：

myLabel.onMouseHover(event -> {
    Pane p = new Pane();
    x = event.x;
    y = event.y;
    p.setImage(newImage);
    // draw this pane on the label but with an offset for it to be at the center
    myLabel.draw(pane, x - offset, y - offset);
})

Answer 1

如果我没理解错的话，那么你想要的是一种“透视”风格的效果。如果您不这样做并且想在鼠标点处显示静态图像，则“基本”想法可行，您只需将覆盖图像重新定位到正确位置即可。

此示例使用两张相同大小的图像，当您四处移动鼠标时，它看起来就像您“透视”了主图像一样。这是错觉，但大多数效果都是这样。

import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
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;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                JFrame frame = new JFrame();
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        private Point mousePoint;

        private BufferedImage background;
        private BufferedImage seeThrough;

        public TestPane() {

            try {
                background = ImageIO.read(BYO your own image));
                seeThrough = ImageIO.read(BYO your own image));
            } catch (IOException ex) {
                ex.printStackTrace();;
            }

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

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

            };

            addMouseMotionListener(ma);
            addMouseListener(ma);
        }

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

            return new Dimension(200, 200);
        }

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

            g2d.addRenderingHints(new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON));
            g2d.addRenderingHints(new RenderingHints(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY));

            if (background != null) {
                g2d.drawImage(background, 0, 0, this);
            }

            if (seeThrough != null && mousePoint != null) {
                double radius = 45;
                Ellipse2D.Double clip = new Ellipse2D.Double(mousePoint.x - radius, mousePoint.y - radius, radius * 2, radius * 2);
                g2d.setClip(clip);
                g2d.drawImage(seeThrough, 0, 0, this);
            }

            g2d.dispose();
        }

    }
}

But this doesn't use a JLabel

不，不是。 JLabel 是...代码中的一个痛苦。没有办法确定图像的位置，假设这对你很重要，但在大多数情况下，我更愿意控制。您可以使用 JLabel 做类似的事情，从概念上讲这是相同的想法。

另一种解决方案可能是直接在目标组件顶部使用一种“覆盖”面板，例如

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                JFrame frame = new JFrame();
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() {
            setLayout(new BorderLayout());
            JLabel label = new JLabel();
            OverlayPane overlayPane = new OverlayPane(label);
            try {
                label.setIcon(new ImageIcon(ImageIO.read(BYO your own image))));
            } catch (IOException ex) {
                ex.printStackTrace();;
            }

            add(overlayPane);
        }

    }

    public class OverlayPane extends JPanel {

        public OverlayPane(JComponent child) {
            setLayout(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.fill = GridBagConstraints.BOTH;

            add(new GlassPane(), gbc);
            add(child, gbc);
        }

        protected class GlassPane extends JPanel {

            private Point mousePoint;
            private BufferedImage pointer;

            public GlassPane() {
                try {
                    pointer = ImageIO.read(BYO your own image));
                } catch (IOException ex) {
                    ex.printStackTrace();
                }

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

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

                };

                addMouseMotionListener(ma);
                addMouseListener(ma);

                setOpaque(false);
            }

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

                g2d.addRenderingHints(new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON));
                g2d.addRenderingHints(new RenderingHints(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY));

                if (pointer != null && mousePoint != null) {
                    double radius = Math.max(pointer.getWidth() + 10, pointer.getHeight() + 10) / 2;
                    g2d.setColor(Color.WHITE);
                    Ellipse2D.Double clip = new Ellipse2D.Double(mousePoint.x - radius, mousePoint.y - radius, radius * 2, radius * 2);
                    g2d.fill(clip);
                    int x = (int) (mousePoint.x - radius) + 5;
                    int y = (int) (mousePoint.y - radius) + 5;
                    g2d.drawImage(pointer, x, y, this);
                }

                g2d.dispose();
            }
        }

    }
}

或者，您可以直接使用框架的 glassPane，但需要驱动器

Annnd JLayer style concept - 当然，它可以让你画点，但它应该给你让图像移动到顶部所需的东西

在 JLabel 上显示交互式圆形覆盖

Display interactive circular overlay on JLabel

java

swing

bufferedimage

awt

jframe