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

Question

我有一个 JFrame，其中包含一个显示 BufferedImage 的 JLabel。 当我将鼠标悬停在此图像上时，我需要在鼠标包含另一个图像的地方显示一个圆形叠加层。

到目前为止我的代码：

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

    }
}

但这不使用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 - 当然，它允许您绘制点，但它应该为您提供使图像移动到顶部所需的内容