如何使用 GUI 在画布上绘制简单的图形答案

【问题标题】：How to get simple graphics drawn on canvas with GUI如何使用 GUI 在画布上绘制简单的图形
【发布时间】：2015-11-14 04:09:32
【问题描述】：

我正在编写一个程序，它将显示烟花爆炸的图形表示（不是动画）。我的很多程序都致力于在用户启动时为用户提供选项（例如颜色、爆炸类型、轨迹等）。我花了很多时间来调整我的 GUI 面板以使其达到我想要的方式，现在我已经将注意力转移到在我的画布上绘制爆炸我无法在我的面板中绘制任何东西。我之前做过很多java图形程序，过去都能够轻松解决这个问题。我在这个程序中没有这样的运气并且变得沮丧。有人知道我的问题可能是什么吗？

（我遇到的另一个问题是我的 JSlider，但这对我来说不是什么重要的问题）

感谢您的帮助！

代码：

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Window;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.ItemEvent;
import java.awt.event.ItemListener;

import javax.swing.AbstractButton;
import javax.swing.ButtonGroup;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;



@SuppressWarnings("serial")
public class Fireworks extends JPanel implements ActionListener, ChangeListener, ItemListener {
    protected int speed, angle, launch = 1;
JFrame frame;
JPanel guistuff, display;
//Each button (except 'button') corresponds to a color for the fireworks. 
//e.g. rbutton = red, obutton = orange, etc.
JButton button, rbutton, obutton, ybutton, gbutton, cbutton, pbutton, ubutton;
JLabel speedlabel, anglelabel, launchlabel;
JSlider speedslider, angleslider;
JPanel displaycanvas;
String fireworkcolor, explosiontype;

private void FireworkLauncher() {
    frame = new JFrame("Fireworks!");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(800, 800);
    frame.setResizable(false);
    frame.setLocationByPlatform(true);
    frame.setLayout(new FlowLayout());
    frame.setBackground(Color.BLACK);
    frame.setVisible(true);

    JPanel displaycanvas = new JPanel();
    displaycanvas.setSize(800, 600);
    displaycanvas.setLayout(new FlowLayout());
    displaycanvas.setLocation(0, 0);
    displaycanvas.setBackground(Color.DARK_GRAY);
    displaycanvas.setVisible(true);
    frame.add(displaycanvas);

    JPanel guistuff = new JPanel();
    guistuff.setSize(800, 200);
    guistuff.setLayout(new FlowLayout());
    guistuff.setBackground(Color.LIGHT_GRAY);
    guistuff.setLocation(0, 600);
    guistuff.setVisible(true);
    frame.add(guistuff);

    JSlider speedslider = new JSlider(JSlider.HORIZONTAL, 0, 100, 10);
    speedslider.addChangeListener(this);
    speedslider.setName("SpeedSlider");
    //speedslider.setValue(50);
    speedslider.setMajorTickSpacing(10);
    speedslider.setMinorTickSpacing(5);
    speedslider.setPaintTicks(true);
    speedslider.setMinimum(0);
    speedslider.setMaximum(100);
    speedslider.setLayout(new FlowLayout());
    speedslider.setVisible(true);
    guistuff.add(speedslider);

    JLabel speedlabel = new JLabel("Speed: " + speed + "   ", JLabel.LEFT);     
    speedlabel.setLayout(new FlowLayout());
    speedlabel.setVisible(true);
    guistuff.add(speedlabel);

    JSlider angleslider = new JSlider(JSlider.HORIZONTAL, 0, 90, 10);
    angleslider.addChangeListener(this);
    angleslider.setName("AngleSlider");
    angleslider.setMinimum(0);
    angleslider.setMaximum(90);
    angleslider.setMajorTickSpacing(10);
    angleslider.setMinorTickSpacing(5);
    angleslider.setPaintTicks(true);
//  angleslider.setValue(50);
    angleslider.setLayout(new FlowLayout());
    angleslider.setVisible(true);
    guistuff.add(angleslider);

    JLabel anglelabel = new JLabel("Angle: " + angle + "      ", JLabel.LEFT);      
    anglelabel.setLayout(new FlowLayout());
    anglelabel.setVisible(true);
    guistuff.add(anglelabel);

    JButton button = new JButton("Launch!");
    button.setPreferredSize(new Dimension(200,50));
    button.setLayout(new FlowLayout());
    button.addActionListener(this);
    button.setLocation(650, 650);
    button.setVisible(true);
    guistuff.add(button);

    //The following six JButtons make buttons for each color to select the color of the next launch of fireworks.
    JButton rbutton = new JButton("Red");
    rbutton.setPreferredSize(new Dimension(100,50));
    rbutton.setLayout(new BorderLayout());
    rbutton.addActionListener(this);
    rbutton.setLocation(25, 750);
    rbutton.setBackground(Color.RED);
    rbutton.setVisible(true);
    rbutton.setOpaque(true);
    rbutton.setBorderPainted(false);
    guistuff.add(rbutton);

    JButton obutton = new JButton("Orange");
    obutton.setPreferredSize(new Dimension(100,50));
    obutton.setLayout(new BorderLayout());
    obutton.addActionListener(this);
    obutton.setLocation(25, 750);
    obutton.setBackground(Color.ORANGE);
    obutton.setVisible(true);
    obutton.setOpaque(true);
    obutton.setBorderPainted(false);
    guistuff.add(obutton);

    JButton ybutton = new JButton("Yellow");
    ybutton.setPreferredSize(new Dimension(100,50));
    ybutton.setLayout(new BorderLayout());
    ybutton.addActionListener(this);
    ybutton.setLocation(25, 750);
    ybutton.setBackground(Color.YELLOW);
    ybutton.setVisible(true);
    ybutton.setOpaque(true);
    ybutton.setBorderPainted(false);
    guistuff.add(ybutton);

    JButton gbutton = new JButton("Green");
    gbutton.setPreferredSize(new Dimension(100,50));
    gbutton.setLayout(new BorderLayout());
    gbutton.addActionListener(this);
    gbutton.setLocation(25, 750);
    gbutton.setBackground(Color.GREEN);
    gbutton.setVisible(true);
    gbutton.setOpaque(true);
    gbutton.setBorderPainted(false);
    guistuff.add(gbutton);

    JButton cbutton = new JButton("Blue");
    cbutton.setPreferredSize(new Dimension(100,50));
    cbutton.setLayout(new BorderLayout());
    cbutton.addActionListener(this);
    cbutton.setLocation(25, 750);
    cbutton.setBackground(Color.CYAN);
    cbutton.setVisible(true);
    cbutton.setOpaque(true);
    cbutton.setBorderPainted(false);
    guistuff.add(cbutton);

    JButton pbutton = new JButton("Pink");
    pbutton.setPreferredSize(new Dimension(100,50));
    pbutton.setLayout(new BorderLayout());
    pbutton.addActionListener(this);
    pbutton.setLocation(25, 750);
    pbutton.setBackground(Color.PINK);
    pbutton.setVisible(true);
    pbutton.setOpaque(true);
    pbutton.setBorderPainted(false);
    guistuff.add(pbutton);

    JButton ubutton = new JButton("Purple");
    ubutton.setPreferredSize(new Dimension(100,50));
    ubutton.setLayout(new BorderLayout());
    ubutton.addActionListener(this);
    ubutton.setLocation(25, 750);
    ubutton.setBackground(Color.MAGENTA);
    ubutton.setVisible(true);
    ubutton.setOpaque(true);
    ubutton.setBorderPainted(false);
    guistuff.add(ubutton);

    //Sets up the interface for the user to select an explosion type.
    JLabel launchlabel = new JLabel("Type of Explosion: ", JLabel.LEFT);
    launchlabel.setLayout(new FlowLayout());
    launchlabel.setVisible(true);
    guistuff.add(launchlabel);

    JRadioButton radio1 = new JRadioButton("Splash");
    //Lots of random lines will display from the explosion site out to the rest of the canvas.
    radio1.addItemListener(this);
    radio1.setSelected(false);
    guistuff.add(radio1);
    radio1.setLayout(new FlowLayout());
    radio1.setVisible(true);

    JRadioButton radio2 = new JRadioButton("Bubbles");
    //Lots of circles will display at the explosion site
    radio2.addItemListener(this);
    guistuff.add(radio2);
    radio2.setLayout(new FlowLayout());
    radio2.setSelected(false);
    radio2.setVisible(true);

    JRadioButton radio3 = new JRadioButton("Sprinkles");
    //Lots of little x's will display at the explosion site
    radio3.addItemListener(this);
    guistuff.add(radio3);
    radio3.setLayout(new FlowLayout());
    radio3.setSelected(false);
    radio3.setVisible(true);

    JRadioButton radio4 = new JRadioButton("Giant");
    //Explosion will draw ALOT (5000) pixels randomly on the screen.
    radio4.addItemListener(this);
    guistuff.add(radio4);
    radio4.setLayout(new FlowLayout());
    radio4.setSelected(false);
    radio4.setVisible(true);

    JRadioButton radio5 = new JRadioButton("Tiny");
    //Explosion will draw a few (100) pixels randomly on the screen.
    radio5.addItemListener(this);
    guistuff.add(radio5);
    radio5.setLayout(new FlowLayout());
    radio5.setSelected(false);
    radio5.setVisible(true);

    JRadioButton radio6 = new JRadioButton("Random");
    //Will generate a random number from 0-4 that corresponds to a certain explosion type. 
    radio6.addItemListener(this);
    guistuff.add(radio6);
    radio6.setLayout(new FlowLayout());
    radio6.setSelected(true);
    radio6.setVisible(true);

    ButtonGroup radiogroup = new ButtonGroup();
    radiogroup.add(radio1);
    radiogroup.add(radio2);
    radiogroup.add(radio3);
    radiogroup.add(radio4);
    radiogroup.add(radio5);
    radiogroup.add(radio6);

    guistuff.validate();

    Display display = new Display();
}

class Display extends JPanel {


    public void paintComponent(Graphics g) {
        // PAINTING OF THE FIREWORKS!
        super.paintComponent(g);
        g.setColor(Color.CYAN);
        g.drawLine(50, 50, 100, 100);
        g.fillOval(100, 100, 50, 50);
        g.drawLine(0, 0, 400, 400);
        repaint();
    }
}

@Override
public void stateChanged(ChangeEvent e) {
    // TODO Auto-generated method stub
    JSlider source = (JSlider) e.getSource();
    String sourcename = source.getName();
    System.out.println(sourcename);
    if (sourcename.equals("SpeedSlider")) {
        JLabel speedlabel = new JLabel("Speed: " + speed + "   ", JLabel.LEFT); 
        speed = source.getValue();
        String speedstring = Integer.toString(speed);
        System.out.println(speedstring);
        System.out.println(speedlabel.getText());
        speedlabel.setText("Speed: " + (speedstring));
        System.out.println("speed slider was moved");
        speedlabel.repaint();
    } else if (sourcename.equals("AngleSlider")) {
        angle = angleslider.getValue();
        System.out.println(angle);
        String anglestring = Integer.toString(angle);
        anglelabel.setText("Angle: " + (anglestring));
        System.out.println("angle slider was moved");
        anglelabel.repaint();
    }
}

@Override
public void actionPerformed(ActionEvent e) {
    // TODO Auto-generated method stub
    System.out.println(e.getActionCommand());
    //Calculations for the explosion trajectories go here
    if (e.getActionCommand().equals("Launch!")){
        System.out.println("FIREWORK LAUNCHED!");
    } else if (e.getActionCommand().equals("Red")){
        System.out.println("FIREWORK COLOR CHANGED TO RED");
        fireworkcolor = "r";
    } else if (e.getActionCommand().equals("Orange")){
        System.out.println("FIREWORK COLOR CHANGED TO ORANGE");
        fireworkcolor = "o";
    } else if (e.getActionCommand().equals("Yellow")){
        System.out.println("FIREWORK COLOR CHANGED TO YELLOW");
        fireworkcolor = "y";
    } else if (e.getActionCommand().equals("Green")){
        System.out.println("FIREWORK COLOR CHANGED TO GREEN");
        fireworkcolor = "g";
    } else if (e.getActionCommand().equals("Blue")){
        System.out.println("FIREWORK COLOR CHANGED TO BLUE");
        fireworkcolor = "b";
    } else if (e.getActionCommand().equals("Pink")){
        System.out.println("FIREWORK COLOR CHANGED TO PINK");
        fireworkcolor = "p";
    } else if (e.getActionCommand().equals("Purple")){
        System.out.println("FIREWORK COLOR CHANGED TO PURPLE");
        fireworkcolor = "u";
    }
    System.out.println(fireworkcolor);
}

@Override
public void itemStateChanged(ItemEvent e) {
    // TODO Auto-generated method stub
    String radiotag = ((AbstractButton) e.getItem()).getText();
    if (radiotag.equals("Splash")){
        System.out.println("Splash");
        explosiontype = "splash";
    } else if (radiotag.equals("Bubbles")){
        System.out.println("Bubbles");
        explosiontype = "bubbles";
    } else if (radiotag.equals("Sprinkles")){
        System.out.println("Sprinkles");
        explosiontype = "sprinkles";
    } else if (radiotag.equals("Giant")){
        System.out.println("Giant");
        explosiontype = "giant";
    } else if (radiotag.equals("Tiny")){
        System.out.println("Tiny");
        explosiontype = "tiny";
    } else if (radiotag.equals("Random")){
        System.out.println("Random");
        explosiontype = "random";
    } 
    System.out.println(explosiontype);

}

public int getSpeed() {
    return speed;
}

public void setSpeed(int speed) {
    this.speed = speed;
}

public int getAngle() {
    return angle;
}

public void setAngle(int angle) {
    this.angle = angle;
}

public int getLaunch() {
    return launch;
}

public void setLaunch(int launch) {
    this.launch = launch;
}

public String getFireworkcolor() {
    return fireworkcolor;
}

public void setFireworkcolor(String fireworkcolor) {
    this.fireworkcolor = fireworkcolor;
}

public String getExplosiontype() {
    return explosiontype;
}

public void setExplosiontype(String explosiontype) {
    this.explosiontype = explosiontype;
}

public static void main(String[] args) {
    new Fireworks().FireworkLauncher();
}

}

【问题讨论】：

尝试把frame.setVisisble(true)方法放在最后。
您发布了 400 行代码，但与手头的问题几乎没有任何关系。你为什么要给志愿者额外的不必要的工作？相反，请将您的代码缩减为可编译和运行的最小功能代码，并为我们演示您的问题，minimal reproducible example（请阅读链接）。
Camickr 的回答（像往常一样）是正确的。此外，了解和使用布局管理器。您试图通过绝对定位来设置组件位置，但这不是这样做的。而是嵌套容器 JPanel，每个 JPanel 使用自己的布局，然后将组件添加到这些 JPanel。
您还以大的方式进行变量阴影，这可能会导致严重的问题。事实上，您的大部分 GUI 组件变量都被隐藏了。

标签： java user-interface canvas graphics drawing

【解决方案1】：

如何使用 GUI 在画布上绘制简单的图形

如果你想显示简单的图形，那你为什么不创建一个简单的程序来发现你的问题呢？然后，一旦您知道了问题，您就可以将解决方案应用到您的实际程序中。

自定义绘制是通过覆盖paintComponent() 完成的。我在您的代码中看到的唯一 paintComponent() 方法可以在 Display 类中找到。

我看到你使用Display 类的唯一地方是：

Display display = new Display();

我没有看到您将组件添加到任何地方的框架中。

但即使您确实将它添加到框架中，您仍然可能看不到它，因为您没有覆盖 getPreferredSize() 方法。

首先阅读 Custom Painting 上的 Swing 教程，了解自定义绘画的简单示例。

我遇到的另一个问题是我的 JSlider，但这对我来说不是什么重要的问题

听从我最初的建议，创建一个简单的程序来玩一个滑块，直到你了解它是如何工作的。然后将逻辑添加到您的主程序中。这种类型的程序称为SSCCE，用于简化问题。然后，如果它仍然不起作用，您可以在论坛上发布简单的代码。

【讨论】：