| Idag: Att rita saker på en rityta ("canvas") |
Klicka på startknappen i den lilla mediespelaren ovan för att lyssna på lektionen. (Man kan behöva vänta en stund på att ljudfilen laddas ner.) Om mediespelaren inte syns, eller om det inte fungerar av något annat skäl, kan man klicka här för att ladda ner mp3-filen (ca 20 minuter, ca 9 megabyte). Beroende på hur webbläsaren är konfigurerad kan det kräva ett separat mp3-spelarprogram av något slag.
|
|
|
Med klassen Canvas kan man rita bilder, som till exempel den här:
Det röda strecket är ritat med de här två anropen:
setColor(0xff0000); // Sätt färgen till röd
drawLine(2, 1, 6, 5); // Rita linjen mellan punkterna (2, 1) och (6, 5)
|
Vi gör en egen canvas, Ritcanvas, för att rita upp kvadraten och cirkeln från exemplet ovan.
Klassen Ritcanvas, ur programmet CanvasTest1. Utdrag ur filen CanvasTest1.java:
1 class Ritcanvas extends Canvas {
2 public void paint(Graphics g) {
3 int w = getWidth();
4 int h = getHeight();
5
6 // Måla bakgrunden, och radera därmed allt som fanns där förut
7 g.setColor(0xff0000);
8 g.fillRect(0, 0, w-1, h-1);
9
10 // Rita en kvadrat (eller...?)
11 g.setColor(0x000000);
12 g.drawRect(1, 1, w/2 - 2, h/2 - 2);
13
14 // Rita en cirkel (eller...?)
15 g.setColor(0x000000);
16 g.fillArc(w/2, h/2, w/2-1, h/2-1, 0, 360);
17 }
18 }
|
Likadant som i skrivbords-Java: När man gör egna bilder, är det metoden paint som ritar upp bilden. Den körs inte bara en gång, utan varje gång något behöver ritas upp, till exempel om fönstret varit dolt. (Det räcker om en enda pixel av fönstret varit dold!)
Klassen CanvasTest1, ur programmet CanvasTest1. Utdrag ur filen CanvasTest1.java:
1 public class CanvasTest1 extends MIDlet implements CommandListener {
2 private Display display;
3 private TextBox om_rutan =
4 new TextBox("Om programmet",
5 "Ett program som visar hur man ritar figurer på en Canvas. " +
6 "Av Thomas Padron-McCarthy.", 100, TextField.ANY);
7 private Ritcanvas canvasen = new Ritcanvas();
8
9 private Command tillbaka_kommandot = new Command("Tillbaka", Command.BACK, 1);
10 private Command avsluta_kommandot = new Command("Avsluta", Command.EXIT, 1);
11 private Command om_kommandot = new Command("Om programmet", Command.SCREEN, 1);
12
13 public CanvasTest1() {
14 om_rutan.addCommand(tillbaka_kommandot);
15 om_rutan.addCommand(avsluta_kommandot);
16 om_rutan.setCommandListener(this);
17 canvasen.addCommand(om_kommandot);
18 canvasen.addCommand(avsluta_kommandot);
19 canvasen.setCommandListener(this);
20 }
21
22 public void startApp() {
23 display = Display.getDisplay(this);
24 display.setCurrent(canvasen);
25 }
26
27 public void destroyApp(boolean unconditional) {
28
29 }
30
31 public void pauseApp() {
32
33 }
34
35 public void commandAction(Command kommandot, Displayable s) {
36 if (kommandot == avsluta_kommandot) {
37 System.out.println("avsluta_kommandot");
38 destroyApp(true);
39 notifyDestroyed();
40 }
41 else if (kommandot == om_kommandot) {
42 System.out.println("om_kommandot");
43 display.setCurrent(om_rutan);
44 }
45 else if (kommandot == tillbaka_kommandot) {
46 System.out.println("tillbaka_kommandot");
47 display.setCurrent(canvasen);
48 }
49 }
50 }
|
1 import javax.microedition.midlet.*;
2 import javax.microedition.lcdui.*;
3
4 public class Ritcanvas extends Canvas {
5 private boolean kvadrat = false;
6 private boolean cirkel = false;
7
8 public void paint(Graphics g) {
9 int w = getWidth();
10 int h = getHeight();
11 g.setColor(0xff0000);
12 g.fillRect(0, 0, w-1, h-1);
13 if (kvadrat) {
14 g.setColor(0x000000);
15 // g.drawRect(1, 1, w/2 - 2, h/2 - 2); -- Fel!
16 int min = Math.min(h, w);
17 g.drawRect(1, 1, min/2 - 2, min/2 - 2);
18 }
19 if (cirkel) {
20 g.setColor(0x000000);
21 // g.fillArc(w/2, h/2, w/2-1, h/2-1, 0, 360); -- Fel!
22 int min = Math.min(h, w);
23 g.fillArc(w/2, h/2, min/2-1, min/2-1, 0, 360);
24 }
25 }
26
27 public void togglaKvadraten() {
28 kvadrat = ! kvadrat;
29 repaint();
30 }
31
32 public void togglaCirkeln() {
33 cirkel = ! cirkel;
34 repaint();
35 }
36 }
|
1 import javax.microedition.midlet.*;
2 import javax.microedition.lcdui.*;
3
4 public class CanvasTest2 extends MIDlet implements CommandListener {
5 private Display display;
6 private TextBox om_rutan =
7 new TextBox("Om programmet",
8 "Ett program som visar hur man ritar figurer på en Canvas. " +
9 "Av Thomas Padron-McCarthy.", 100, TextField.ANY);
10 private Ritcanvas canvasen = new Ritcanvas();
11
12 private Command tillbaka_kommandot = new Command("Tillbaka", Command.BACK, 1);
13 private Command avsluta_kommandot = new Command("Avsluta", Command.EXIT, 1);
14 private Command om_kommandot = new Command("Om programmet", Command.SCREEN, 1);
15 private Command kvadrat_kommandot = new Command("Toggla kvadraten", Command.SCREEN, 1);
16 private Command cirkel_kommandot = new Command("Toggla cirkeln", Command.SCREEN, 1);
17
18 public CanvasTest2() {
19 om_rutan.addCommand(tillbaka_kommandot);
20 om_rutan.addCommand(avsluta_kommandot);
21 om_rutan.setCommandListener(this);
22 canvasen.addCommand(om_kommandot);
23 canvasen.addCommand(avsluta_kommandot);
24 canvasen.addCommand(kvadrat_kommandot);
25 canvasen.addCommand(cirkel_kommandot);
26 canvasen.setCommandListener(this);
27 }
28
29 public void startApp() {
30 display = Display.getDisplay(this);
31 display.setCurrent(canvasen);
32 }
33
34 public void commandAction(Command kommandot, Displayable s) {
35 if (kommandot == avsluta_kommandot) {
36 System.out.println("avsluta_kommandot");
37 destroyApp(true);
38 notifyDestroyed();
39 }
40 else if (kommandot == om_kommandot) {
41 System.out.println("om_kommandot");
42 display.setCurrent(om_rutan);
43 }
44 else if (kommandot == tillbaka_kommandot) {
45 System.out.println("tillbaka_kommandot");
46 display.setCurrent(canvasen);
47 }
48 else if (kommandot == kvadrat_kommandot) {
49 System.out.println("kvadrat_kommandot");
50 canvasen.togglaKvadraten();
51 }
52 else if (kommandot == cirkel_kommandot) {
53 System.out.println("cirkel_kommandot");
54 canvasen.togglaCirkeln();
55 }
56 }
57
58 public void destroyApp(boolean unconditional) {
59
60 }
61
62 public void pauseApp() {
63
64 }
65 }
|
|
|
I den gamla kursboken Beginning J2ME kan man läsa kapitel 13, Programming a Custom User Interface.
Föregående lektion | Lektionslista | Nästa lektion