Ciao a tutti in questo nuovo tutorial affronteremo un argomento molto utile che vi farà capire come funzionano, a grandi linee, le applicazioni di grafica in generale.

Per iniziare creeremo una semplice UIView che, non appena viene chiamato il metodo “drawRect:” disegna un triangolo, in seguito vedremo come è possibile potenziare la nostra view aggiungendo livelli di disegno, figure già definite etc.

Inizio subito col spiegarvi la UIView su cui disegneremo, lascio a voi il compito poi di posizionarla come e dove meglio credete.
La sottoclasse che vado a creare la chiamo DrawView, appena aggiunta al mio progetto Xcode, vedo che nel file di implementazione (.m) sono già presenti dei metodi, tra questi “drawRect:” è degno di nota poiché solo all’interno di questo bisogna inserire il codice per il disegno, in più ricordiamoci che questo metodo non deve mai essere chiamato direttamente, se vogliamo che venga eseguito possiamo chiamare “setNeedsDisplay” o “setNeedsDisplayInRect:”.

Passiamo ora alla spiegazione delle funzioni che costruiscono la grafica: sono le funzioni di CGPath.
CGPath è sostanzialmente un “percorso” e come tale si parte da un punto e si arriva ad un altro, ad oltranza. Il percorso quindi è fatto di linee che possono essere curve o rette. Una volta creato il nostro percorso potremo fare sostanzialmente due cose: chiudere la figura (unire l’ultimo punto col punto di partenza) e riempirla con un colore o scegliere di chiuderla o meno e disegnare solo i contorni della figura con delle linee colorate di spessore a piacere.
Per disegnare effettivamente una figura si usano le funzioni CGContext.

Passiamo al lato pratico e vediamo come disegnare il nostro triangolo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

        // creo la figura
        CGMutablePathRef p = CGPathCreateMutable();
	// mi posiziono nel primo punto
	CGPathMoveToPoint(p, NULL, 150, 150);
	// creo la linea
	CGPathAddLineToPoint(p,NULL,300,300);
	// un'altra
	CGPathAddLineToPoint(p,NULL,100,400);
	// chiudo la figura
	CGPathCloseSubpath(p);
 
	// ottengo il context per il disegno
	CGContextRef c = UIGraphicsGetCurrentContext();
	// aggiungo la mia figura creata prima (il triangolo)
	CGContextAddPath(c,p);
	// imposto il colore di riempimento della mia figura
	CGContextSetRGBFillColor(c,1,0,0,1);
	// chiudo la figura (se non è già stata chiusa) e la "riempio" di colore
	CGContextFillPath(c);

Spero il codice si commenti da solo, molto semplice ed intuitivo.

Ora, per provare a disegnare delle linee, creiamo il bordo della nostra vista (magari si potrebbe usare per definire una vista “selezionata”…):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

-(void)drawBorder {
	// creo la figura
	CGMutablePathRef p = CGPathCreateMutable();
	// mi posiziono nel primo punto (0,0)
	CGPathMoveToPoint(p, NULL, 0, 0);
	// creo la linea superiore
	CGPathAddLineToPoint(p,NULL,self.bounds.size.width,0);
	// linea a destra
	CGPathAddLineToPoint(p,NULL,self.bounds.size.width,self.bounds.size.height);
	// linea in basso
	CGPathAddLineToPoint(p,NULL,0,self.bounds.size.height);
	// linea a sinistra (serve ? in teoria basterebbe usare una funziona che chiude la figura)
	CGPathAddLineToPoint(p,NULL,0,0);
 
	// ottengo il context per il disegno
	CGContextRef c = UIGraphicsGetCurrentContext();
	// aggiungo la mia figura (il bordo della view)
	CGContextAddPath(c,p);
	// imposto la larghezza della linea
	CGContextSetLineWidth(c,2);
	// imposto il colore della mia linea (o contorno della figura)
	CGContextSetRGBStrokeColor(c,0,1,0,1);
	// disegno la figura (in realtà il contorno della figura)
	CGContextStrokePath(c);
}

Il metodo deve necessariamente essere chiamato all’interno di “drawRect:” altrimenti non può funzionare, infatti nel mio progetto di esempio (link più sotto) questo metodo è privato.

Spero che il tutto vi sia abbastanza chiaro, se nutrite dei dubbi provate il mio progetto e scrivete nei commenti.

Nei prossimi tutorial scopriremo come strutturare in modo completo una view in modo che sia possibile facilmente aggiungere o togliere degli oggetti (figure) magari anche tramite il touch.