X. Grafische elementen Om u te helpen bij grafische voorstellingen heeft java een aantal grafische afbeeldingen die u kunt gebruiken. Meestal worden zij in de methode paint(Graphics g) geplaatst. Zij moeten worden toegepast op een grafisch object. De kleur van het element kunt u veranderen met de opdracht setColor(Color). De kleur kunt u op verschillende manieren invullen. setColor(Color.red): gebruik één van de standaardkleuren van java. setColor(new Color(r,g,b)): genereer een nieuwe kleur met de rgb-kleurwaarden r, g en b resp. voor de kleuren rood, groen en blauw. Dit moeten waarden zijn tussen 0 en 255. 0 = niet aanwezig, 255 op volle sterkte. Color(0,0,0) is dus zwart, en Color(255,255,255) is wit. Hieronder volgen enkele voorbeeldjes. A. Lijnen tekenen Methode: drawLine(x1,y1,x2,y2) Uitleg:
x1,y1: coördinaten van het beginpunt x2,y2: coördinaten van het eindpunt
Oefening: plaats onderstaande code in een nieuw bestand en probeer uit! /***************************** OefGraphics.java *****************************/ import java.awt.*; public class OefGraphics extends java.applet.Applet { public void paint(Graphics g) { g.setColor(new Color(200,200,200)); g.fillRect(0,0,this.getSize().width,this.getSize().height); //driehoek met losse lijnen g.setColor(Color.red); g.drawLine(30,20,50,40); g.drawLine(50,40,10,40); g.drawLine(10,40,30,20);
} } Uitleg: g.setColor(new Color(200,200,200));
Genereer een lichtgrijze kleur als achtergrond voor het applet. g.fillRect(0,0,this.getSize().width,this.getSize().height);
Met de methode fillRect(x1,y1,x2,y2) wordt een rechthoek met top boven links (x1,y1) en hoekpunt rechtsonder (x2,y2) opgevuld met de huidige kleur. Inleiding tot Java door ir. C. Daniels
89
this.getSize().width,this.getSize().height
De methode getSize() vraagt de afmetingen width, en height op over het huidig object, hier het applet. B. Rechthoeken Methode: drawRect(x1,y1,x2,y2) Tekent een lege rechthoek met top links x1,y1 en rechtsonder x2,y2. drawRect(x1,y1,x2,y2) Tekent een gevulde rechthoek met top links x1,y1 en rechtsonder x2,y2. Oefening: voeg onderstaande code bij in de methode paint() van het applet. g.drawRect(70,20,50,30); //lege rechthoek g.setColor(Color.red); //verander naar rood g.fillRect(130,20,50,30);//gevulde rechthoek
C. Afgeronde rechthoeken Methode: drawRoundRect(x1,y1,x2,y2,x3,y3) Tekent een afgeronde lege rechthoek met top links x1,y1 en rechtsonder x2,y2, en x3,y3 zijn de x- en y-waarde van de lengte van de afronding. Hoe groter deze waarde hoe groter de afronding. drawRect(x1,y1,x2,y2,x3,y3) Tekent een gevulde rechthoek met top links x1,y1 en rechtsonder x2,y2. en x3,y3 zijn de x- en y-waarde van de lengte van de afronding.
Oefening: voeg onderstaande code bij in de methode paint() van het applet. g.drawRoundRect(20,80,60,60,20,20); //afgeronde rechthoek g.setColor(Color.blue); //gebruik eens blauw g.fillRoundRect(100,80,60,60,40,40);//opgevuld
D. 3D-rechthoeken Deze rechthoeken geven een verheven of verdiept effect, maar zijn in de huidige versie van java, bijna niet te zien, omdat de lijndikte van de rand steeds maar één pixel is. Methode:
draw3DRect(x1,y1,x2,y2,boolean) Tekent een lege 3D-rechthoek met top links x1,y1 en rechtsonder x2,y2. boolean: true is verheven, false is verdiept.
Oefening: voeg onderstaande code bij in de methode paint() van het applet. g.draw3DRect(20,150,60,60,true); //3D rechthoek g.draw3DRect(100,150,60,60,false); //moeilijk te zien..
Inleiding tot Java door ir. C. Daniels
90
E. Veelhoeken Om veelhoeken te tekenen, moet er eerst twee arrays worden aagemaakt met daarin de resp. de x-coördinaten en de y-coördinaten. Methode 1:
Methode 2:
drawPolygon( x[], y[], aantal) Tekent een lege veelhoek met x- en y-waarden in de arrays, x[] en y[] en met aantal gelijk aan het aantal hoekpunt. Polygon Veelh = new Polygon(xs,ys,punten) g.fillPolygon(Veelh); Hier wort eerst een nieuw Polygon object gecreërd, en dan getekend. Met fillPolygon wordt een opgevulde veelhoek getekend.
Oefening: voeg onderstaande code bij in de methode paint() van het applet. //Veelhoeken int x[]={20,45,40,90,30}; int y[]={250,280,260,280,300}; int punten=x.length; // de grootte van het array g.drawPolygon(x,y,punten); //andere methode om een veelhoek te tekenen g.setColor(Color.black); int xs[]={110,135,130,180,120}; int ys[]={250,280,260,280,300}; punten=xs.length; Polygon Veelh = new Polygon(xs,ys,punten); g.fillPolygon(Veelh);
F. Cirkels en Ovalen Cirkels en ovalen worden door dezelfde instructie getekend. Een cirkel is ook alleen mar een apart soort ovaal. Methode: drawOval(x,y,width,height) Tekent een lege ovaal met x,y: coördinaten van het punt links boven van de omschreven rechthoek Width, height: breedte en hoogte Methode: fillOval(x,y,width,height) Tekent een gevulde ovaal met x,y: coördinaten van het punt links boven van de omschreven rechthoek Width, height: breedte en hoogte Oefening: voeg onderstaande code bij in de methode paint() van het applet. //ovalen g.drawOval(20,320,80,80); g.fillOval(120,320,100,60);
G. Bogen Een deel van een ovaal kan getekend worden met de opdrachten drawArc() en fillArc().
Inleiding tot Java door ir. C. Daniels
91
Methode: drawArc(x, y, width, height, starthoek, eindhoek) Tekent een open boog met x,y: coördinaten van het punt links boven van de omschreven rechthoek, width, height: breedte en hoogte van de omschreven rechthoek, en het beginpunt en eindpunt van de boog in graden. Methode: fillOval(x, y, width, height, starthoek, eindhoek) Tekent een opgevulde boog met x,y: coördinaten van het punt links boven van de omschreven rechthoek, width, height: breedte en hoogte van de omschreven rechthoek, en het beginpunt en eindpunt van de boog in graden. Oefening: voeg onderstaande code bij in de methode paint() van het applet. //bogen g.drawArc(20,420,80,60,0,145); g.fillArc(120,420,80,60,0,145);
H. Tekst Om tekst in een grafisch object te plaatsen moet eerst het font (lettertype) worden ingesteld door een nieuw of bestaand font te scheppen. Door de opdracht setFont() te gebruiken wordt dit font actief gemaakt. Met drawStrin() kunt u dan een tekst op het scherm afdrukken. Methode: drawString(String,x,y) Schrijft een tekst in het ingesteld lettertypel met x,y de coördinaten van het punt links onder van het eerste karakter. Oefening: voeg onderstaande code bij in de methode paint() van het applet. //tekst Font f = new Font("TimesRoman",Font.PLAIN,18) g.setFont(f); g.drawString("Grafische oefening",20,480);
Het volledige applet ziet er nu als volgt uit:
Inleiding tot Java door ir. C. Daniels
92
Oefening: we ontwerpen een applet om cirkels te tekenen in een Canvas. We maken hiervan gebruik om nog een nieuwe interessante vorm van layout voor te stellen : de GridBagLayout. Deze layout verdeelt het applet in een rooster, horizontaal en verticaal. Door de GridBagConstarints in te stellen, kun je elk object in de layout een gewicht geven, zowel horizontaal als vertikaal. De layout probeert dan elk object de juiste afmetingen te geven.
Het is interessant het applet is te vergroten of te verkleinen, driemaal zo breed als hoog bijvoorbeeld, of andersom. We proberen wat object-gericht te denken. Dus stoppen we de functionaliteit van het tekenen van de cirkels in een canvas, in een aparte klasse CirkelCanvas : /********************************* CirkelCanvas.java **********************************/ import java.awt.*; public class CirkelCanvas extends Canvas { Color cirkelKleur; //bewaar de kleur van de cirkel
//geef de kleur mee met de constructor public CirkelCanvas(Color kleur,String s) { cirkelKleur=kleur; } //teken de cirkel public void paint(Graphics g) { int cirkelDiameter, cirkelX, cirkelY;
Inleiding tot Java door ir. C. Daniels
93
Dimension Afmeting = getSize(); //zoek de kleinste if (Afmeting.width { cirkelDiameter = } else { cirkelDiameter = }
van hoogte en breedte < Afmeting.height) Afmeting.width;
Afmeting.height;
//geef het canvas de juiste kleur g.setColor(cirkelKleur); //Bereken de plaats van het middelpunt cirkelX =(Afmeting.width - cirkelDiameter)/2; cirkelY =(Afmeting.height - cirkelDiameter)/2; //teken de cirkel g.fillOval(cirkelX,cirkelY,cirkelDiameter,cirkelDiameter); } }
En hier is de code van het applet zelf : /****************************************** CirkelsApplet.java - Teken drie cirkels met een GridBagLayout ******************************************/ import java.awt.*; import java.applet.*; public class CirkelsApplet extends Applet { public void init() { //een nieuwe gridbag-layout GridBagLayout gridbag = new GridBagLayout(); //nieuwe constraints voor die layout GridBagConstraints constraints = new GridBagConstraints(); //een CirkelCanvas object CirkelCanvas Cirkel; //voeg de layout bij het applet setLayout(gridbag); //verdeel de ruimte voor het object constraints.weightx=1.0; constraints.weighty=1.0; //pas zowel de breedte als de hoogte aan indien nodig constraints.fill = GridBagConstraints.BOTH; //een nieuwe rode cirkel Cirkel = new CirkelCanvas(Color.red); gridbag.setConstraints(Cirkel,constraints);
Inleiding tot Java door ir. C. Daniels
94
add(Cirkel); //tweede cirkel is tweemaal zo groot constraints.weightx=2.0; constraints.weighty=2.0; //kleur deze groen Cirkel = new CirkelCanvas(Color.green); gridbag.setConstraints(Cirkel,constraints); add(Cirkel); //derde cirkel is driemaal zo groot constraints.weightx=3.0; constraints.weighty=3.0; //kleur de derde cirkel blauw Cirkel = new CirkelCanvas(Color.blue); gridbag.setConstraints(Cirkel,constraints); add(Cirkel); } //geef rondom 20 pixels ruimte public Insets insets() { return new Insets(20,20,20,20); } }
Laat de code met de insets eens weg, en vergelijk.
Inleiding tot Java door ir. C. Daniels
95
