Page 1 of 1

J2ME- Basic Painting using Canvas

#1 macosxnerd101  Icon User is online

  • Self-Trained Economist
  • member icon




Reputation: 10804
  • View blog
  • Posts: 40,278
  • Joined: 27-December 08

Posted 09 June 2010 - 10:09 AM

Unlike Form, which is for higher-level GUI interactions, Canvas is designed for the lower level GUI interactions, like painting. While Canvas has a lot of other features built in, like Listeners, this tutorial will cover the basics of painting using the J2ME Canvas class. However, you can set it up with the MIDlet the same way as with form.

Before we begin, it is important to understand the difference between painting in Java SE with Swing and AWT, and painting in Java ME with Canvas. We already see that there is less of a heirarchy here, as paint() is abstract, so we don't need to/can't invoke super.paint().

In addition to painting, repainting takes a little different approach in Java ME vs. Swing and AWT. There are two overloaded repaint() methods: one that takes no params, and one that takes four params- repaint(int x, int y, int width, int height). The first one does not clear the screen and start over, like in Swing and AWT; however the second repaint() method does clear the screen and start over.

So to get started, let's set up our Canvas subclass, as unlike in Swing and AWT, paint() is abstract.
/*Canvas has a number of Abstract methods 
including paint(), so you have to subclass it 
in order to use it
*/
public class MyCanvas extends Canvas implements CommandListener{

    //include an instance of MyMidlet so
    //that we can destroy the MIDlet on Exit
    private MyMidlet midlet;

    private Command exit;

    //J2ME doesn't have a Color class
    //so you can either work with a Hex RGB int
    //Or you can work with the RGB values individually
    private int bgred = -1, bggreen = -1, bgblue = -1;
    private int red = 0, blue = 100, green = 150;

    public MyCanvas(MyMidlet midlet){
         this.midlet = midlet;
        
         exit = new Command("Exit",Command.EXIT, 1);
         this.addCommand(exit);
         this.setCommandListener(this);
     }

    //these are the abstract methods other than paint()
    //that deal with listening. They are beyond the scope
    //of basic painting, so I am only overriding them
    //without having them do anything
    protected  void keyPressed(int keyCode) {}
    protected  void keyReleased(int keyCode) {}
    protected  void keyRepeated(int keyCode) {}
    protected  void pointerDragged(int x, int y) {}
    protected  void pointerPressed(int x, int y) {}
    protected  void pointerReleased(int x, int y) {}

    //since we have only one Command, it will be the only
    //Command to trigger the Listener
    public void commandAction(Command command, Displayable displayable) {
       
         //assume that I granted public access
         //from protected to the destroyApp() method
         //in the MyMidlet subclass of MIDlet
         m.destroyApp(true);
     }

   //We will draw a rectangle that changes colors
    public void paint(Graphics g) {

       //give the RGB variables initial values
       //so on repaints, we can draw over everything
       //with a rectangle the color of the background
       //if they already have values != -1, don't change them
        bgred = (bgred < 0)?g.getRedComponent():bgred;
        bggreen = (bggreen < 0)?g.getGreenComponent():bggreen;
        bgblue = (bgblue < 0)?g.getBlueComponent():bgblue;
       
        //reset the screen 
        g.setColor(bgred, bggreen, bgblue);
        g.fillRect(0,0, getWidth(), getHeight());

        //now draw the rect
        g.setColor(red,green,blue);
        g.fillRect(50, 50, 50, 50); //looks similar to the AWT Graphics class

        red = (red+1)%256;
        blue = (blue+1)%256;
        green = (green+1)%256;  
        repaint();
    }
}



Is This A Good Question/Topic? 0
  • +

Page 1 of 1