Java:使用透明JButton覆盖图像

时间:2017-09-29 21:51:01

标签: java image swing jbutton

所以我正在创建一个代表自动售货机的GUI。我只是遇到了一些问题,试图让布局按照我想要的方式工作。我的想法是将图像插入JLabel,然后在特定位置使用透明JButton覆盖该图像,这样当您在某些位置单击图像时,它将触发JButton。我还没有达到透明度,因为我目前仍然坚持如何将JButton精确地放在他们需要的位置。

我尝试过setLocation和setBounds而没有运气。有关如何将jbuttons准确定位在可能的自动售货机选择上的任何帮助都会很棒。

import javax.swing.*;
import javax.imageio.*;
import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import java.io.*;

public class vendMachine extends JFrame
{
//Frame Dimensions 
private static final int FRAME_HEIGHT = 800;
private static final int FRAME_WIDTH = 800;


private JPanel totalGUI, imagePanel, coinPanel;

public vendMachine()
{
    createComponents();
    setSize(FRAME_WIDTH, FRAME_HEIGHT);
    setTitle("Vending Machine");
}

private void createComponents()
{
    try
    {
        BufferedImage machineImg = ImageIO.read(new File("images/pepsivend.jpg"));
        JLabel machineImgLabel = new JLabel(new ImageIcon(machineImg));
        machineImgLabel.setLayout(new FlowLayout());
        JButton test = new JButton("TEST BUTTON");
        machineImgLabel.add(test);
        //test.setBounds(0,0,0,0);


        ImageIcon pennyIcon = new ImageIcon("images/coins/penny.jpg");
        JButton pennyButton = new JButton(pennyIcon);            
        ImageIcon nickelIcon = new ImageIcon("images/coins/nickel.jpg");
        JButton nickelButton = new JButton(nickelIcon);
        ImageIcon dimeIcon = new ImageIcon("images/coins/dime.jpg");
        JButton dimeButton = new JButton(dimeIcon);
        ImageIcon quarterIcon = new ImageIcon("images/coins/quarter.jpg");
        JButton quarterButton = new JButton(quarterIcon);

        coinPanel = new JPanel();
        coinPanel.setLayout(new GridLayout(4,1));
        coinPanel.add(pennyButton);
        coinPanel.add(nickelButton);
        coinPanel.add(dimeButton);
        coinPanel.add(quarterButton);


        totalGUI = new JPanel();
        totalGUI.setLayout(new BorderLayout());
        totalGUI.add(machineImgLabel, BorderLayout.CENTER);
        totalGUI.add(coinPanel, BorderLayout.EAST);
    }
    catch (IOException e)
    {
        e.printStackTrace();
    }

    add(totalGUI);
}

}

Button needs to go here

在上面的图片中,我想了解如何获得测试按钮,覆盖在百事可乐选择之上。从那里我可以开始使它透明并删除边框和文本。

编辑添加:没有任何按钮做任何事情。在添加任何其他内容之前,只需尝试进行布局

1 个答案:

答案 0 :(得分:3)

目前还不清楚你的实际问题是什么,但是,我将从布局开始......

任何单一的布局都不会做你想要的一切,有时候,你需要使用多个布局并复合它们。此示例使用BorderLayoutGridBagLayout来设置基本布局...

https://example/signup?uid=ude3f4J

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class Test {

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

    public Test() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new VendingMachinePane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class VendingMachinePane extends JPanel {

        public VendingMachinePane() {
            setLayout(new BorderLayout());
            JLabel label = new JLabel("Cover");
            // Demonstration purpose only
            label.setPreferredSize(new Dimension(200, 400));
            label.setOpaque(true);
            label.setBackground(Color.BLUE);

            add(label);

            JPanel optionsPane = new JPanel(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.fill = GridBagConstraints.HORIZONTAL;
            gbc.weightx = 1;
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            gbc.anchor = GridBagConstraints.NORTH;

            optionsPane.setBackground(Color.DARK_GRAY);
            optionsPane.add(new JLabel("Coin Slot"), gbc);
            optionsPane.add(makeButton("Pepsi"), gbc);
            optionsPane.add(makeButton("Diet Pepsi"), gbc);
            optionsPane.add(makeButton("Slice"), gbc);
            optionsPane.add(makeButton("Dr Pepper"), gbc);
            optionsPane.add(makeButton("Lipton"), gbc);
            optionsPane.add(makeButton("Mountain Dew"), gbc);
            optionsPane.add(makeButton("Schweppes"), gbc);
            gbc.weighty = 1;
            optionsPane.add(makeButton("Pepsi"), gbc);

            add(optionsPane, BorderLayout.LINE_END);
        }

        protected JButton makeButton(String text) {
            JButton btn = new JButton(text);
            btn.setBorderPainted(false);
            btn.setContentAreaFilled(false);
            btn.setMargin(new Insets(4, 4, 4, 4));
            btn.setOpaque(false);
            return btn;
        }

    }

}

关于你的"叠加按钮"问题,对我来说没有意义,因为JButton有一个icon属性,为什么不用JButton来开始呢?

只需更改borderPainted contentAreaFilledopaque属性

即可让按钮变得透明
// You can pass a `Icon` instead of a `String` to the constructor
JButton btn = new JButton(text);
btn.setBorderPainted(false);
btn.setContentAreaFilled(false);
btn.setMargin(new Insets(4, 4, 4, 4));
btn.setOpaque(false);

不要忘记设置ActionListener;)

根据更新的要求更新......

你可以......

将图片分段分解,使每个元素成为自己的图像,然后使用上面类似的方法将它们应用于按钮

你可以......

映射图像上的热点,并使用MouseListener监视器发生mouseClicked事件 - 但您确实失去了键盘输入的优势

你可以......

绘制图像的热点并使用GridBagLayout或自定义布局管理器,将按钮映射到图像上。