How to save image from drawing panel in java? - java

I have a drawing panel with some color buttons. I can draw with different colors in the drawing panel. There is also a save button. I want to capture the image drawn on the panel and save the captured image inside a directory in my pc, when I will click the save button. I don't know much about java. How can I do this?
This is my code:
package paint;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class paint{
public static void main(String[] args){
Icon iconB = new ImageIcon("blue.gif");
Icon iconM = new ImageIcon("magenta.gif");
Icon iconR = new ImageIcon("red.gif");
Icon iconBl = new ImageIcon("black.gif");
Icon iconG = new ImageIcon("green.gif");
JFrame frame = new JFrame("Paint It");
//Creates a frame with a title of "Paint it"
Container content = frame.getContentPane();
//Creates a new container
content.setLayout(new BorderLayout());
//sets the layout
final PadDraw drawPad = new PadDraw();
//creates a new padDraw, which is pretty much the paint program
content.add(drawPad, BorderLayout.CENTER);
//sets the padDraw in the center
JPanel panel = new JPanel();
//creates a JPanel
panel.setPreferredSize(new Dimension(32, 68));
panel.setMinimumSize(new Dimension(32, 68));
panel.setMaximumSize(new Dimension(32, 68));
//This sets the size of the panel
JButton clearButton = new JButton("Clear");
//creates the clear button and sets the text as "Clear"
clearButton.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e){
drawPad.clear();
}
});
//this is the clear button, which clears the screen. This pretty
//much attaches an action listener to the button and when the
//button is pressed it calls the clear() method
JButton saveButton = new JButton("save");
JButton redButton = new JButton(iconR);
//creates the red button and sets the icon we created for red
redButton.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e){
drawPad.red();
}
});
//when pressed it will call the red() method. So on and so on =]
JButton blackButton = new JButton(iconBl);
//same thing except this is the black button
blackButton.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e){
drawPad.black();
}
});
JButton magentaButton = new JButton(iconM);
//magenta button
magentaButton.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e){
drawPad.magenta();
}
});
JButton blueButton = new JButton(iconB);
//blue button
blueButton.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e){
drawPad.blue();
}
});
JButton greenButton = new JButton(iconG);
//green button
greenButton.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e){
drawPad.green();
}
});
blackButton.setPreferredSize(new Dimension(16, 16));
magentaButton.setPreferredSize(new Dimension(16, 16));
redButton.setPreferredSize(new Dimension(16, 16));
blueButton.setPreferredSize(new Dimension(16, 16));
greenButton.setPreferredSize(new Dimension(16,16));
//sets the sizes of the buttons
panel.add(greenButton);
panel.add(blueButton);
panel.add(magentaButton);
panel.add(blackButton);
panel.add(redButton);
panel.add(clearButton);
panel.add(saveButton);
//adds the buttons to the panel
content.add(panel, BorderLayout.SOUTH);
//sets the panel to the left
frame.setSize(300, 300);
//sets the size of the frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//makes it so you can close
frame.setVisible(true);
//makes it so you can see it
}
}
class PadDraw extends JComponent{
Image image;
//this is gonna be your image that you draw on
Graphics2D graphics2D;
//this is what we'll be using to draw on
int currentX, currentY, oldX, oldY;
//these are gonna hold our mouse coordinates
//Now for the constructors
public PadDraw(){
setDoubleBuffered(false);
addMouseListener(new MouseAdapter(){
public void mousePressed(MouseEvent e){
oldX = e.getX();
oldY = e.getY();
}
});
//if the mouse is pressed it sets the oldX & oldY
//coordinates as the mouses x & y coordinates
addMouseMotionListener(new MouseMotionAdapter(){
public void mouseDragged(MouseEvent e){
currentX = e.getX();
currentY = e.getY();
if(graphics2D != null)
graphics2D.drawLine(oldX, oldY, currentX, currentY);
repaint();
oldX = currentX;
oldY = currentY;
}
});
//while the mouse is dragged it sets currentX & currentY as the mouses x and y
//then it draws a line at the coordinates
//it repaints it and sets oldX and oldY as currentX and currentY
}
public void paintComponent(Graphics g){
if(image == null){
image = createImage(getSize().width, getSize().height);
graphics2D = (Graphics2D)image.getGraphics();
graphics2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
clear();
}
g.drawImage(image, 0, 0, null);
}
//this is the painting bit
//if it has nothing on it then
//it creates an image the size of the window
//sets the value of Graphics as the image
//sets the rendering
//runs the clear() method
//then it draws the image
public void clear(){
graphics2D.setPaint(Color.white);
graphics2D.fillRect(0, 0, getSize().width, getSize().height);
graphics2D.setPaint(Color.black);
repaint();
}
//this is the clear
//it sets the colors as white
//then it fills the window with white
//thin it sets the color back to black
public void red(){
graphics2D.setPaint(Color.red);
repaint();
}
//this is the red paint
public void black(){
graphics2D.setPaint(Color.black);
repaint();
}
//black paint
public void magenta(){
graphics2D.setPaint(Color.magenta);
repaint();
}
//magenta paint
public void blue(){
graphics2D.setPaint(Color.blue);
repaint();
}
//blue paint
public void green(){
graphics2D.setPaint(Color.green);
repaint();
}
//green paint
}

I have written save() method copy it to PadDraw class and call save() when ever you need to save the image.
public void save(){
try {
BufferedImage bimage = new BufferedImage(image.getWidth(null), image.getHeight(null), BufferedImage.TYPE_INT_ARGB);
// Draw the image on to the buffered image
Graphics2D bGr = bimage.createGraphics();
bGr.drawImage(image, 0, 0, null);
javax.imageio.ImageIO.write(bimage , "PNG", new File("test.png"));
bGr.dispose();
} catch (Exception ex) {
Logger.getLogger(PadDraw.class.getName()).log(Level.SEVERE, null, ex);
}
}

The basics for creating an image of any Swing component is use:
BufferedImage image = new BufferedImage(component.getWidth(), component.getHeight(), BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = image.createGraphics();
component.print( g2d );
g2d.dispose();
Then you can save the "image" using ImageIO.
Or you can use the Screen Image which has extra functionality to:
handle transparent components
create an image of an area of the component
create an image of a component not displayed on a visible window
write to image to a file

Related

Drawing Shapes with lines on a transparent Graphics2D to get a png image

So my goal is to have a window that opens where you can draw some lines on a white background by just clicking. The problem is that when it try to save it always comes back as a png, but it comes as a square image. If I draw a triangle with my lines I get a triangle inside a white square but I want the triangle only. I would really appreciate any help
I tried every solution I came accross on stackoverflow and I tried to understand Graphics2D in depth but sadly failed
public class Draw{
public static void main(String[] args){
Icon iconB = new ImageIcon("blue.gif");
Icon iconM = new ImageIcon("magenta.gif");
Icon iconR = new ImageIcon("red.gif");
Icon iconBl = new ImageIcon("black.gif");
Icon iconG = new ImageIcon("green.gif");
JFrame frame = new JFrame("Paint It");
//Creates a frame with a title of "Paint it"
Container content = frame.getContentPane();
//Creates a new container
content.setLayout(new BorderLayout());
//sets the layout
final PadDraw drawPad = new PadDraw();
//creates a new padDraw, which is pretty much the paint program
content.add(drawPad, BorderLayout.CENTER);
//sets the padDraw in the center
JPanel panel = new JPanel();
panel.setOpaque(false);
//creates a JPanel
panel.setPreferredSize(new Dimension(32, 68));
panel.setMinimumSize(new Dimension(32, 68));
panel.setMaximumSize(new Dimension(32, 68));
//This sets the size of the
content.add(panel, BorderLayout.SOUTH);
//sets the panel to the left
frame.setSize(480, 360);
//sets the size of the frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//makes it so you can close
frame.setVisible(true);
//makes it so you can see it
}
}
class PadDraw extends JComponent{
Image image;
//this is gonna be your image that you draw on
Graphics2D graphics2D;
//this is what we'll be using to draw on
int currentX, currentY, oldX, oldY;
//these are gonna hold our mouse coordinates
int firstX;
int firstY;
//Now for the constructors
//will draw from tail to head
public PadDraw(){
setDoubleBuffered(false);
addMouseListener(new MouseAdapter(){
public void mousePressed(MouseEvent e){
if (currentX == 0 && currentY == 0) {
firstX= e.getX();
firstY = e.getY();
oldX = e.getX();
oldY = e.getY();
}
currentX = e.getX();
currentY = e.getY();
graphics2D.drawLine(oldX, oldY, currentX, currentY);
repaint();
oldX = currentX;
oldY = currentY;
}
});
}
public void paintComponent(Graphics g){
if(image == null){
image = createImage(getSize().width, getSize().height);
graphics2D = (Graphics2D) image.getGraphics();
graphics2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
graphics2D.setComposite(AlphaComposite.Clear);
graphics2D.fillRect(0, 0, getSize().width, getSize().height);
graphics2D.setComposite(AlphaComposite.Src);
clear();
}
g.drawImage(image, 0, 0, null);
}
//this is the painting bit
//if it has nothing on it then
//it creates an image the size of the window
//sets the value of Graphics as the image
//sets the rendering
//runs the clear() method
//then it draws the image
public void clear(){
currentX = 0;
currentY = 0;
graphics2D.setPaint(Color.white);
graphics2D.fillRect(0, 0, getSize().width, getSize().height);
graphics2D.setPaint(Color.black);
repaint();
}
//this is the clear
//it sets the colors as white
//then it fills the window with white
//thin it sets the color back to black
public void save(){
repaint();
if (currentX != 0 && currentY != 0) {
graphics2D.drawLine(oldX, oldY, firstX, firstY);
currentX = 0;
currentY = 0;
}
try {
BufferedImage bfrdImage = new BufferedImage
(image.getWidth(null), image.getHeight(null), BufferedImage.TYPE_INT_ARGB);
// Draw the image on to the buffered image
Graphics2D bGr = bfrdImage.createGraphics();
bGr.setComposite(AlphaComposite.Clear);
bGr.fillRect(0, 0, getSize().width, getSize().height);
bGr.setComposite(AlphaComposite.Src);
bGr.drawImage(image, 0, 0, null);
javax.imageio.ImageIO.write(bfrdImage, "PNG", new File("Drawing.PNG"));
bGr.dispose();
} catch (Exception ex) {
Logger.getLogger(PadDraw.class.getName()).log(Level.SEVERE, null, ex);
}
}
//saves and also comes back to the first point to finalize the shape}
Here is an example.
public class PaintDemo extends JPanel {
JFrame frame = new JFrame();
public static void main(String[] args) {
SwingUtilities.invokeLater(() -> new PaintDemo());
}
public PaintDemo() {
setPreferredSize(new Dimension(500, 500));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(this);
frame.pack();
frame.setLocationRelativeTo(null);
setBackground(Color.white);
frame.setVisible(true);
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setColor(Color.blue);
g2d.fillOval(200, 200, 100, 100);
// triangle
g2d.setColor(Color.red);
g2d.drawLine(100, 200, 200, 100);
g2d.drawLine(200, 100, 300, 400);
g2d.drawLine(300, 400, 100, 200);
g2d.setColor(Color.magenta);
g2d.fillRect(100, 100, 200, 50);
}
}

Strange JPanel background glitching

I have some identical extended JPanel instances each with transparent background done with Color(255, 255, 255, 0);. When mousePressed() of any JPanel is triggered, it's background sets to solid color.
Problem is, for the first few miliseconds after mouse pressed (lazy person would just overcome it) the background becomes an image of the JComponent pressed before.
What I hope is that there is some "memory cleaner" or some method of managing those JComponent actions that I don't know about...
edit:
addMouseListener(new MouseListener() {
boolean mousePressed;
public void mouseClicked(MouseEvent e) {}
Timer timer;
public void mousePressed(MouseEvent e) {
setBackground(new Color(255, 255, 255, 20));
setBorder(BorderFactory.createLineBorder(new Color(255, 255, 255, 100), 3));
repaint();
timer = new Timer();
mousePressed = true;
timer.scheduleAtFixedRate(new TimerTask() { //keep jpanel position relative to mouse position
Point pC = MouseInfo.getPointerInfo().getLocation();
Point pP = MouseInfo.getPointerInfo().getLocation();
Point sP = getLocation();
public void run() {
if(mousePressed) {
pC = MouseInfo.getPointerInfo().getLocation();
setLocation(sP.x + (pC.x - pP.x), sP.y + (pC.y - pP.y));
pP = pC;
sP = getLocation();
} else {
pC = MouseInfo.getPointerInfo().getLocation();
pP = MouseInfo.getPointerInfo().getLocation();
sP = getLocation();
}
}
}, 5, 5);
}
public void mouseReleased(MouseEvent e) {
mousePressed = false;
setBackground(null);
setBorder(null);
repaint();
timer.cancel();
}
Solved by overriding paintComponent() method and setting opaque to false
JPanel panel = new JPanel();
protected void paintComponent(Graphics g)
{
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
super.paintComponent(g);
}
};
panel.setOpaque(false); // background of parent will be painted first
panel.setBackground( new Color(255, 0, 0, 20) );
frame.add(panel);

how to use paint component on a frame that is passed from a different class

I am making a game called Mastermind. To create the game board, I am using paintComponent to paint onto a frame that was passed as a parameter from a different class. Why doesn't it print anything besides the back button?
public class mastermindColor extends JPanel //running color game
{
Rectangle rect = new Rectangle(100, 100, 150, 75);
private JButton backButton = new JButton();
JFrame f = new JFrame();
public mastermindColor(final JFrame frame) //creating color game frame
{
String back = BorderLayout.CENTER;
backButton.setText("back");
frame.add(backButton, BorderLayout.NORTH);
frame.add(this, BorderLayout.CENTER);
backButton.setVisible(true);
backButton.addActionListener(new ActionListener() //if back button is selected
{
public void actionPerformed(ActionEvent e)
{
frame.getContentPane().removeAll();
mastermindRunner run = new mastermindRunner();
}
});
frame.setVisible(true);
}
public void paintComponent(Graphics g) //printing the game set up
{
super.paintComponents(g);
Graphics2D g2 = (Graphics2D)g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.draw(rect);
}

Repaint a circle

I want to repaint a circle whenever a button is pressed.
Currently, I have it whenever I press a button, it prints to the console what button I pressed. For example, if I press the "Paint Red" button, I want it to fill the circle with red, and the same with the other colors as well. I'm trying to wrap my head around the whole paint/paintComponent difference.
This is what I have so far...
public class testCircle extends JPanel {
public void paint(Graphics g)
{
setSize(500,500);
int R = (int) (Math.random( )*256);
int G = (int)(Math.random( )*256);
int B= (int)(Math.random( )*256);
Color randomColor = new Color(R, G, B);
g.setColor(randomColor);
g.drawOval(75, 100, 200,200);
g.fillOval(75, 100, 200, 200);
}
public static void main(String[] args)
{
JFrame frame = new JFrame();
frame.setSize(400, 400);
testCircle circlePanel = new testCircle();
frame.add(circlePanel);
JButton redButton = new JButton("Paint Red");
redButton.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event)
{
System.out.println("Red Button Pressed!");
}
});
JButton blueButton = new JButton("Paint Blue");
blueButton.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event)
{
System.out.println("Blue Button Pressed!");
}
});
JButton greenButton = new JButton("Paint Green");
greenButton.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event)
{
System.out.println("Green Button Pressed!");
}
});
redButton.setPreferredSize(new Dimension(100,100));
blueButton.setPreferredSize(new Dimension(100,100));
greenButton.setPreferredSize(new Dimension(100,100));
frame.setLayout(new FlowLayout());
frame.add(redButton);
frame.add(blueButton);
frame.add(greenButton);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Consider these changes to your code:
As discussed here, Swing programs should override paintComponent() instead of overriding paint().
Give your panel an attribute for currentColor.
private Color currentColor;
Let each button's ActionListener set currentColor and invoke repaint().
currentColor = color;
repaint();
Use Action for to encapsulate your program's functionality.
A complete example is examined here.
You don't trigger a "repaint" anywhere in your code. That should work:
redButton.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
System.out.println("Red Button Pressed!");
frame.invalidate();
frame.validate();
}
});

Event handling in Java not working as expected

I cannot get the code linked below to do exactly what I want it to do.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Gui {
static JFrame frame;
static JLabel label;
public static void main (String[] args) {
Gui gui = new Gui();
gui.go();
}
public void go () {
frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(400,300);
frame.setVisible(true);
MyDrawPanel panel = new MyDrawPanel();
frame.getContentPane().add(BorderLayout.CENTER, panel);
label = new JLabel("I'm a label");
frame.getContentPane().add(BorderLayout.WEST, label);
JButton colorButton = new JButton("Change Colors");
ColorButtonListener colorButtonListener = new ColorButtonListener();
colorButton.addActionListener(colorButtonListener);
frame.getContentPane().add(BorderLayout.SOUTH, colorButton);
JButton labelButton = new JButton("Change Label");
LabelButtonListener labelButtonListener = new LabelButtonListener();
labelButton.addActionListener(labelButtonListener);
frame.getContentPane().add(BorderLayout.EAST, labelButton);
}
}
class ColorButtonListener implements ActionListener {
JFrame frame = Gui.frame;
public void actionPerformed (ActionEvent event) {
frame.repaint();
}
}
class LabelButtonListener implements ActionListener {
JLabel label = Gui.label;
public void actionPerformed (ActionEvent event) {
if (label.getText() == "That hurt") {
label.setText("I'm a label");
} else {
label.setText("That hurt");
}
}
}
class MyDrawPanel extends JPanel {
public void paintComponent (Graphics g) {
Graphics2D g2d = (Graphics2D) g;
int red = (int) (Math.random() * 256);
int green = (int) (Math.random() * 256);
int blue = (int) (Math.random() * 256);
Color startColor = new Color(red, green, blue);
red = (int) (Math.random() * 256);
green = (int) (Math.random() * 256);
blue = (int) (Math.random() * 256);
Color endColor = new Color(red, green, blue);
GradientPaint gradient = new GradientPaint(70, 70, startColor, 150, 150, endColor);
g2d.setPaint(gradient);
g2d.fillOval(0, 0, this.getWidth(), this.getHeight());
}
}
There is a panel class used to draw a circle and then the panel is positioned in the center region of the frame.
A label is positioned in the west region of the frame, two buttons colorButton(positioned south) and labelButton(positioned east) should control the circle and the label respectively. 2 classes ColorButtonListener and LabelButtonListener implement the ActionListener interface and are registered with the colorButton and labelButton respectively. The color button when clicked should paint a circle with random colors and the label button when clicked should toggle between the text "I'm a label" and "That hurt".
Now, the issue I am having is with the label button. When clicking it, it not only changes the text(as expected), but also redraws the circle. This button should not be redrawing the circle. The color button works as expected.
The problem is you don't control when a repaint might occur. Instead of changing the color every time paintComponent is called, which you can't control, change the color only when you want to and reference from within the paintComponent method, for example
class MyDrawPanel extends JPanel {
private Color startColor;
private Color endColor;
// And setters or some other way
// to randomise the colors
public void paintComponent (Graphics g) {
Graphics2D g2d = (Graphics2D) g;
GradientPaint gradient = new GradientPaint(70, 70, startColor, 150, 150, endColor);
g2d.setPaint(gradient);
g2d.fillOval(0, 0, this.getWidth(), this.getHeight());
}
}
Check out Painting in AWT and Swing for more details
This is because setText() methods internally calls repaint() if new text is not same as old text. So results in color change whenever you click that button too.

Categories