Welcome to the Java Programming Forums


The professional, friendly Java community. 21,500 members and growing!


The Java Programming Forums are a community of Java programmers from all around the World. Our members have a wide range of skills and they all have one thing in common: A passion to learn and code Java. We invite beginner Java programmers right through to Java professionals to post here and share your knowledge. Become a part of the community, help others, expand your knowledge of Java and enjoy talking with like minded people. Registration is quick and best of all free. We look forward to meeting you.


>> REGISTER NOW TO START POSTING


Members have full access to the forums. Advertisements are removed for registered users.

Page 1 of 2 12 LastLast
Results 1 to 25 of 27

Thread: Help with editing offscreen graphics

  1. #1
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Help with editing offscreen graphics

    I'm starting a new paint project to get some experience with java. I've been working with Processing for a while, and I'm struggling to transition. The goal is to make a program in which several graphics objects are created, then the selected graphic is modified (drawn on) when the mouse is dragged. The output I'm looking for is the graphics layered on top of each other. I'm pretty lost, and I would definitely appreciate some help from someone more experienced that myself. Here's what I have:
    import java.awt.*;
    import javax.swing.*;
     
    class SlugPaint2{
      public static void main(String[] args){
        JFrame frame = new JFrame("SimplePaint");
        Container mainPane = frame.getContentPane();
        DrawingCanvas layers = new DrawingCanvas();
        PaintListener mouse = new PaintListener();
        layers.addMouseMotionListener(mouse);
        frame.setSize(600,400);
        mainPane.add(layers);
        frame.setVisible(true);
      }
    }
    import java.awt.*;
    import java.awt.event.*;
    import java.awt.Color.*;
    import javax.swing.*;
     
    public class PaintListener implements MouseMotionListener, MouseListener{
      public void mouseDragged(MouseEvent e){
      DrawingCanvas layerOneCanvas = (DrawingCanvas)e.getSource();
      Graphics layerOne = layerOneCanvas.getCanvasGraphics();
      Graphics2D layerOne2D = (Graphics2D)layerOne;
      updateMousePos(e);
      updateMenu(e);
        layerOne2D.setBackground(Color.WHITE);
        layerOne2D.setStroke(new BasicStroke(2));
        layerOne2D.drawLine(currentMousePosX, currentMousePosY, lastMousePosX, lastMousePosY);
      layerOneCanvas.repaint();
      }
      public void mouseMoved(MouseEvent e){
      updateMousePos(e);
      }
      public void updateMousePos(MouseEvent e){
        lastMousePosX=currentMousePosX;
        lastMousePosY=currentMousePosY;
        currentMousePosX=e.getX();
        currentMousePosY=e.getY();
      }
      public void updateMenu(MouseEvent e){
      DrawingCanvas guiLayer = (DrawingCanvas)e.getSource();
      Graphics paintingMenu = guiLayer.getMenuGraphics();
      Graphics2D paintingMenu2D = (Graphics2D)paintingMenu;
      paintingMenu2D.drawString("this is the top layer. It will display the images that will work as a custom gui.", 10,200);
      paintingMenu2D.drawString("the lower layer that shows the painting is underneath this. go to 'void paintComponent' in", 10,220);
      paintingMenu2D.drawString("DrawingCanvas.java and swap the order of which layer is drawn first.",10,240);
      guiLayer.repaint();
      }
      public void mousePressed(MouseEvent e){}
      public void mouseReleased(MouseEvent e){}
      public void mouseEntered(MouseEvent e){}
      public void mouseExited(MouseEvent e){}
      public void mouseClicked(MouseEvent e){}
      int lastMousePosX, lastMousePosY;
      int currentMousePosX, currentMousePosY;
      public static boolean firstLayerVisible = true;
    }
    import java.awt.*;
    import javax.swing.*;
     
    class DrawingCanvas extends JComponent{
      protected void paintComponent(Graphics g){
        if(layerOneImage!=null)
          g.drawImage(layerOneImage,0,0,SIZE, SIZE, null);
        if(paintingMenuImage!=null)                                      //comment out this line. thise draw the top layer
          g.drawImage(paintingMenuImage,0,0,SIZE, SIZE, null); //comment out this line as well. you will see the drawing canvas
        }                                                                         //without the top layer being shown to block the bottom
     
        public Graphics getCanvasGraphics(){
          if(layerOneImage==null){
            layerOneImage = createImage(SIZE, SIZE);
            layerOneGraphics = layerOneImage.getGraphics();
          }
          return layerOneGraphics;
        }
        public Graphics getMenuGraphics(){
          if(paintingMenuImage==null){
            paintingMenuImage = createImage(SIZE, SIZE);
            paintingMenuGraphics = paintingMenuImage.getGraphics();
          }
          return paintingMenuGraphics;
        }
     
        public Dimension getMinimumSize(){
          return new Dimension(SIZE,SIZE);
        }
        public Dimension getPreferredSize(){
          return new Dimension(SIZE,SIZE);
        }
        private static final int SIZE = 600;
        private Image layerOneImage;
        private Graphics layerOneGraphics;
        private Image paintingMenuImage;
        private Graphics paintingMenuGraphics;
    }


  2. #2
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    Can you explain what the problem is? What does the code do or not do when it is executed?
    If you don't understand my answer, don't ignore it, ask a question.

  3. #3
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    There is no compilation error, but it isn't doing what I would like it to do. Currently, if your mouse is dragged, it will draw a line from your previous position to your current position with a stroke thickness that becomes larger when you move the mouse faster, and smaller when moving the mouse slower. There is also a thin diagonal red line that is the second graphic lying on top of the first (did this to test if I could layer the graphics). There was an if statement that would draw the diagonal red line if the mouse x and y coords were greater than 100 (I did that to test if I could draw in the layers individually) but took that out. Now the line is drawn every frame. I've been working on it for the past few days, and I can't seem to figure out how to turn individual layers on and off (make them visible/invisible), nor am I having much luck at figuring out a simple and clean interface, even if it was just pressing a few keys for now.

  4. #4
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    how to turn individual layers on and off
    Can you explain what "individual layers" are? If you were using pencil and paper to make a drawing, what would be a layer?

    how to turn individual layers on and off (make them visible/invisible)
    Resizing the component will remove what was drawn before.
    If you don't understand my answer, don't ignore it, ask a question.

  5. #5
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    1) the 'layer' that I'm referring to would be the equivalent to a transparency slide that is being painted on. If you were to take these and then stack them on top of each other, you would be able to see through to them to the lower layers where there is no color.
    2)I didn't mention it before, since I didn't want to overload this with more questions, but that is an issue that I would also like to fix. I'd like to resize the component and maintain the image. If the component is smaller than the image, you only see part of it and will have the ability to scroll up/down, left/right to see the entire image.
    Sorry if I'm unclear; I'll be glad clarify in any way needed.

    Here is an earlier program I made with Processing. This is about the end result I'm going for, but I'm just taking one step at a time.
    http://people.ucsc.edu/~blauwill/PaintProto/

  6. #6
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    Some of the Swing classes have a way of using layers:
    How to Use Layered Panes (The Java™ Tutorials > Creating a GUI With JFC/Swing > Using Swing Components)

    To save old drawings when a component is resized, use a buffering technique. Draw on an image and then draw that image on the screen.
    If you don't understand my answer, don't ignore it, ask a question.

  7. #7
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    Thanks for the link! As for the buffering method, that's the same concept as what I did for the prototype in my link. I just don't know how to implement it in java

  8. #8
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    Create a BufferedImage, get its graphics, draw on it and then draw that image on the screen.
    If you don't understand my answer, don't ignore it, ask a question.

  9. The Following User Says Thank You to Norm For This Useful Post:

    JavaInProgress (April 16th, 2013)

  10. #9
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    From what I've found so far, it seems like I will want to create a BufferedImage that corresponds to each Graphics2D object (I think).
    BufferedImage layerOneImage = new BufferedImage(400,400,BufferedImage.TYPE_INT_ARGB) ;
    this is where I'm at. I'm guessing that the graphics will be cast to BufferedImages and the new BufferedImage will be what is displayed? It seems like the natural thing to do but I've tried it, got a type mismatch, and not sure where to go from here...

  11. #10
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    create a BufferedImage that corresponds to each Graphics2D object
    Its the other way. You create BufferedImage and get a Graphics object that goes with it that can be used to draw on that BufferedImage. Use the graphcs object given to the component to drawn that image so it is seen,

    got a type mismatch
    Please copy the full text of the error messages and paste it here
    If you don't understand my answer, don't ignore it, ask a question.

  12. #11
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    I'm not sure what you mean. Are you saying to cast a Graphics2D onto a BufferedImage?

    Edit:
    Ok, here is what I've changed. No compilation errors, but the image won't appear:
    BufferedImage layerOneBuffImage = new BufferedImage(400,400,BufferedImage.TYPE_INT_ARGB) ;
    Graphics layerOneGraphics = layerOneBuffImage.getGraphics();
    Graphics2D layerOneGraphics2D = (Graphics2D)layerOneGraphics;

  13. #12
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    The steps:
    1) create a BufferedImage
    2) get a graphics for that BI
    3) use that graphics to draw on that image
    4) draw that image on the GUI using the graphics passed to the paintComponent() method
    If you don't understand my answer, don't ignore it, ask a question.

  14. #13
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    Ok, I've been working on it for a while now. I've been able to get past your step 3, but I'm stuck again. I have two graphics objects that are being edited offscreen, but when I use paintComponent() it only shows the last image to be drawn. I edited the code above to show what I have so far. I'm not sure if I've said this yet but thank you so much for the help.

  15. #14
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    Can you post the code in a small, complete program that compiles, executes and shows the problem.
    If you don't understand my answer, don't ignore it, ask a question.

  16. #15
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    The new code above now compiles

  17. #16
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    What is supposed to happen when the code is executed?
    I used my images. When I click on the frame it displays:vone large image in the middle, two much smaller images in lower left and lower right and one small image in the lower right????
    If you don't understand my answer, don't ignore it, ask a question.

  18. #17
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    I swapped the code for paintListener to print a sentence in the middle instead of using images. I might have done that after you ran the version that used images. try and use the paintListener class that is at the top now. it show show a sentence when you drag the mouse. sorry about that

  19. #18
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    The posted code looks like it has a lot more lines of code than are needed for what you are trying to test. Can you make a smaller, simpler program that shows the problem?
    If you don't understand my answer, don't ignore it, ask a question.

  20. #19
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    Trimmed the fat out

  21. #20
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    Can you explain what the problem is? I executed the last version: after a mouse event, a line of text was drawn. ????
    If you don't understand my answer, don't ignore it, ask a question.

  22. #21
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    there is another layer behind it that lets you use the mouse to draw. The issue is this bottom layer isn't visible through the top layer with the text. the goal is to be able to paint on the bottom layer, have it be visible, and still see the text on top. I added 2 comments to the paintListener to show where to comment out the top layer. Once the top layer is commented out you will be able to see the bottom layer by itself.

  23. #22
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    paint on the bottom layer, have it be visible, and still see the text on top
    If you have an image (the bottom layer) and draw a String on that image, then the resultant image will have the original image with a String drawn on it.
    If you don't understand my answer, don't ignore it, ask a question.

  24. #23
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    yes, but then the image (bottom layer) will have the text in it. the goal was to display both layers, but keep them separate so that I can save the bottom layer without having the top layer being part of it. Drawing the gui onto the canvas would mar the drawing for when it comes time to export it.

  25. #24
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    SW Missouri
    Posts
    20,190
    Thanks
    49
    Thanked 2,172 Times in 2,145 Posts

    Default Re: Help with editing offscreen graphics

    but keep them separate
    If the images are displayed in the same area of the GUI, the top/upper layers need to have transparent backgrounds so the images displayed first will show through the later ones.
    If you don't understand my answer, don't ignore it, ask a question.

  26. #25
    Junior Member
    Join Date
    Apr 2013
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Re: Help with editing offscreen graphics

    The only thing in the top layer is just the text. Shouldnt the rest of the top layer be transparent already?

Page 1 of 2 12 LastLast

Similar Threads

  1. Program photo editing
    By samison in forum Paid Java Projects
    Replies: 0
    Last Post: August 21st, 2012, 08:53 AM
  2. Is memory editing is possible using JAVA?
    By fredsilvester93 in forum Java Theory & Questions
    Replies: 7
    Last Post: May 27th, 2012, 04:58 AM
  3. Graphics class NullPointerException Initialize Graphics Class??
    By bglueck in forum What's Wrong With My Code?
    Replies: 7
    Last Post: May 13th, 2011, 11:13 PM
  4. editing array
    By silverspoon34 in forum Object Oriented Programming
    Replies: 1
    Last Post: April 15th, 2011, 01:40 AM
  5. Editing a date
    By waterjames in forum Java Theory & Questions
    Replies: 0
    Last Post: November 27th, 2010, 01:00 PM

Tags for this Thread