Tekenen in Java - NLDA-TW

Tekenen in Java
Doel
● Stap 1
○ Eenvoudig tekenprogramma maken
○ In eerste instantie alleen 'freehand' curves
○ Demo in de les
● Stap 2
○ Tekening opslaan op file en weer teruglezen
○ Demo in de les
● Stap 3
○ Rechthoeken, ellipsen, lijnen, etc
○ Optioneel: kleuren, verschillende diktes, fill, etc
○ Zelf doen, uitleg in les
Doel
● Stap 4
○ Object teken programma
○ Object met muis manipuleren (verplaatsen, resizen)
○ Zelf doen, uitleg in les
● Stap 5
○ Groeperen, ongroeperen
○ Groep als 1 object te manipuleren: verplaatsen, resizen
○ Moet recursief kunnen (groep van groep)
○ Zelf doen, uitleg in les
Tekenen in Java
● Tekenen doe je op bij voorkeur in een panel
● Herdefinieer hiervoor de paint-methode:
○ public void paint(Graphics g)
○ voeg code toe die volledige tekening maakt
● Daarom
○ maak datastructuur die tekening volledig representeerd
○ noemen we het model
● Voor stap 1
○ maak klasse Curve
○ curve bestaat uit lijst van punten (Point)
○ Curve heeft operatie paint(Graphics g)
Curve
public class Curve {
List<Point> points;
Curve(Point point) {
points = new ArrayList<>();
}
public void paint(Graphics g) {
Point previous = points.get(0);
for (Point p : points) {
g.drawLine(previous.x, previous.y, p.x, p.y);
previous = p;
}
}
public void addPoint(Point p) {
points.add(p);
}
}
Panel
class DrawPanel {
public DrawPanel() {
initComponents();
curves = new ArrayList<>();
}
private void formMousePressed(java.awt.event.MouseEvent evt) {
current = new Curve(evt.getPoint());
curves.add(current);
}
private void formMouseDragged(java.awt.event.MouseEvent evt) {
current.addPoint(evt.getPoint());
repaint();
}
public void paint(Graphics g) {
super.paint(g);
for (Curve curve : curves) {
curve.paint(g);
}
}
List<Curve> curves;
Curve current;
}
Meerdere figuren
Probleem
● Meerdere soorten figuren
● Maar wel vergelijkbare eigenschappen en manipulatie
Oplossing
● Gemeenschappelijke interface die overeenkomsten vangt
● Specifieke klassen implementeren deze interface
Opmerking
● Een alternatief is een abstracte klasse en een aantal
operaties op het top niveau te implementeren
● Dit is een kwestie van smaak
Interface Figure
public interface Figure {
public void paint(Graphics g);
public void addPoint(Point p);
}
Later voor stijl, kleur, verplaatsen, resizen, etc. nog andere
operaties toevoegen
In DrawPanel nu wel een state variabele opnemen waarin
staat welk figuur er bij een mousePressed gecreeerd moet
worden.
Manipuleren van Figuren
We willen figuren kunnen verplaatsen en resizen (en natuurlijk
ook kleur en lijndikte veranderen)
● kleur en lijndikte geen probleem
● voor verplaatsen alleen aangrijppunt nodig
● resize voor lijn, rechthoek, oval duidelijk, maar ook hier
aangrijppunt nodig
● voor curve is het ingewikkelder!
Boundingbox
Gebruik bounding box als uitgangspunt voor verplaatsen en
resizen
● boundigbox is de kleinste rechthoek waar figuur in past
(neem min en max alle x en y waarden)
● voeg aan interface Figure een operatie
getBoundingBox() toe
● roep deze aan vanuit de paint operatie van DrawPanel als
je in select mode bent
● linker bovenhoek gebruiken om figuur te verplaatsen
● voeg aan interface Figure een operatie
setLeftUpper(Point p) toe en/of translate(int x, int y)
● rechter benedenhoek gebruiken om figuur te resizen
voeg aan interface Figure een operatie
setRightUnder(Point p) toe
Verplaatsen en Resizen
Verplaatsen is eenvoudig
● gebruik setLeftUpper of translate
Resize makkelijk voor lijn, etc
Voor Curve
1. Bepaal eerst de vervorm factoren fx en fy van de
boundingbox (deel nieuwe breedte en hoogte door oude
breedte en hoogte)
2. Pas deze vervorm factoren toe op alle punten van de
Curve tov de linkerbovenhoek
Groeperen
Bij groeperen worden een aantal figuren samengevoegd tot 1
figuur die in zijn geheel gemanipuleerd kan worden
(verplaatsen, resizen).
● introduceer een klasse groep die een aantal figuren bevat
● bereken de boundingbox van een groep
● implementeer nu de operaties voor verplaatsen en resizen
voor een groep
kijk hierbij voor resizen goed naar de implementatie van
resize van een Curve en gebruik dezelfde taktiek mbv fx en
fy voor de verschillende delfiguren