Schritt für Schritt - Entwickeln für OS X und iOS
Schritt für Schritt - Entwickeln für OS X und iOS
Zeichnen mit NSView, Teil 1

In Cocoa-Anwendung wird selten direkt auf das Programmfenster gezeichnet, sondern meistens in ein spezielles Steuerelement vom Typ NSView. Sie finden so ein Objekt ebenfalls in der Palette der Steuerelemente im Interface Builder. Allerdings wird ein NSView nicht von der Klasse MyController gesteuert, er benötigt zur Verwaltung eine eigene Klasse, die von NSView abgeleitet ist und die das Zeichnen regelt.

Auch diese Anwendung beginnt ihre Existenz als gewöhnliches Cocoa-Projekt, von dem Sie inzwischen bestimmt schon eine ganze Reihe erstellt haben. Eine MyController-Klasse benötigen Sie zu Anfang noch nicht. Fügen Sie aber trotzdem eine weitere Klasse zum Projekt hinzu. Wählen Sie aber jetzt nicht NSObjekt als Superklasse, sondern NSView. Nennen Sie diese Klasse MyView.
stacks_image_EFF9F11F-AE26-4AFE-B84D-CCEAC796DA50
Schon nach dem Erstellen enthält die Klasse zwei Methoden, die Sie in der MyView.m finden.
- (id)initWithFrame:(NSRect)frame
und
- (void)drawRect:(NSRect)dirtyRect
Während initWithFrame die Initialisierungs-Methode dieser Klasse ist, ist drawRect die Methode, in der tatsächlich gezeichnet wird. Als Parameter erhält diese Methode ein Rechteck, dirtyRect, welches neu gezeichnet werden muss. Das kann manchmal nützlich sein, am einfachsten ist es aber, immer den gesamten NSView neu zu zeichnen. Die Methode drawRect wird immer automatisch aufgerufen, wenn der View neu gezeichnet werden muss, zum Beispiel, wenn der View skaliert wurde. Das System merkt dies und handelt dementsprechend. Wie Sie einen NSView manuell aktualisieren können, werden Sie aber im Laufe dieser Lektion auch noch erfahren. drawRect sollten Sie nie manuell aufrufen.

Die erste Aufgabe in dieser Lektion soll sein, dem kompletten NSView einen grünen Hintergrund zu verpassen. Dazu holt man sich zuerst ein Rechteckt, das der Größe des View entspricht. Das ist einfach zu lösen, indem man bounds an das Objekt sendet. Erinnern Sie sich, dass self eine von NSView abgeleitete Klasse ist.
Anschließend wird die Farbe gesetzt und ein NSBezierPath in der Größe des Rechtecks gezeichnet.
- (void)drawRect:(NSRect)dirtyRect {
    NSRect bounds = [
self bounds];
    [[NSColor greenColor] set];
    [NSBezierPath fillRect:bounds];
}
Öffnen Sie nun den Interface Builder und ziehen Sie ein NSView (Custom View) auf das Programmfenster.
stacks_image_7338A659-7B3C-428D-926E-19E9FF458738
Platzieren Sie den NSView auf dem Programmfenster und verändern Sie die Eigenschaften des Objektes so, dass es sich an allen Seite des Fensters andockt und mit dem Fenster skaliert.
stacks_image_70F01170-7A1B-4068-A6C2-88FF7FF8C0CF
Ändern Sie nun noch die Klassenidentität dieses NSView auf die von Ihnen erstellte Klasse MyView.
stacks_image_B350ABEC-4B0D-4C2E-9F1B-89562638A419
Speichern Sie alle Änderungen. Wenn Sie jetzt Ihre Anwendung starten, wird eine Instanz von MyView erzeugt und die drawRect-Methode sorgt dafür, dass der zugewiesene View komplett grün gefüllt wird.
stacks_image_CA04CB5C-5A37-415B-ACD9-B889AC7AE81D
Ein wenig komplizierter wird es, wenn man zwei Rechtecke zeichnen möchte, die jeweils nur die Hälfe des View ausfüllen. Alles, was Sie tun müssen, ist die Größe und Position dieses Rechtecks zu berechnen. Aber das sollte Ihnen nicht sehr schwer fallen.
- (void)drawRect:(NSRect)dirtyRect {

    NSRect bounds = [
self bounds];

    NSRect leftRect = NSMakeRect(bounds.origin.x, bounds.origin.y,
     bounds.size.width /2, bounds.size.height);
    [[NSColor redColor] set];
    [NSBezierPath fillRect:leftRect];

    NSRect rightRect = NSMakeRect(bounds.origin.x + bounds.size.width /2 ,
     bounds.origin.y,bounds.size.width /2, bounds.size.height);
    [[NSColor blueColor] set];
    [NSBezierPath fillRect:rightRect];
}
Auch wenn Sie dieses Fenster skalieren, bleibt das Verhältnis des Rechtecks gleich. Denn immer, wenn Sie skalieren, wird automatisch die drawRect-Methode aufgerufen und ein neuer Wert für bounds ermittelt.
stacks_image_83EB7885-E085-4539-9D03-93C781C9C200
Sehr schön kann man hier erkennen, dass trotz objektorientierter Programmierung, die Methoden selbst noch sequenziell abgearbeitet werden. Setzt man die Farbe für diese View, werden alle nachfolgenden Zeichenvorgänge in dieser Farbe vorgenommen, bis Sie eine neue Farbe bestimmen. Ein explizites Setzen der Farbe für jedes zu zeichnende Objekt ist nicht nötig. Auch werden die Objekte in der Reihenfolge, wie sie im Code stehen, gezeichnet. Wie bei einer Leinwand können sich dann auch Objekte überlagern.
- (void)drawRect:(NSRect)dirtyRect {

    NSRect bounds = [
self bounds];

    NSRect leftRect = NSMakeRect(bounds.origin.x, bounds.origin.y,
     bounds.size.width /2, bounds.size.height);
    [[NSColor redColor] set];
    [NSBezierPath fillRect:leftRect];

    NSRect rightRect = NSMakeRect(bounds.origin.x + bounds.size.width /2 ,
     bounds.origin.y,bounds.size.width /2, bounds.size.height);
    [[NSColor blueColor] set];
    [NSBezierPath fillRect:rightRect];

    NSRect orangeRect = NSMakeRect(bounds.origin.x + 20, bounds.origin.y + 20,
     bounds.size.width - 40, bounds.size.height -40);
    [[NSColor orangeColor] set];
    [NSBezierPath fillRect:orangeRect];
}
stacks_image_6BAB95BF-C3DE-401D-A79D-011B86BD2B24