Come disegnare una linea con CoreGraphics

CoreGraphics

CoreGraphics è molto potente, ci permette di disegnare ed elaborare contenuti grafici molto velocemente.

Non è così facile da utilizzare, non ha un’interfaccia in Objective-C, ha alcuni concetti complessi da comprendere e per la maggior parte delle cose serve una buona conoscenza del settore.
Ma con un po’ di pratica e di studio risulterà utilissimo a chiunque.

Iniziamo a scoprire questo Framework da poche righe di codice. Partiamo disegnando una semplice linea. Sì lo so, è banale, ma necessario per imparare ad utilizzarlo.

Aggiungiamo al nostro progetto un oggetto di tipo UIView, andiamo nel file di implementazione (.m) e sovrascriviamo il metodo -drawRect: come di seguito. (i numeri li ho inseriti solo come riferimento, dovete ometterli)

- (void)drawRect:(CGRect)rect
{
	[super drawRect:rect];
	
1.
	CGContextRef context = UIGraphicsGetCurrentContext();
2.
	CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

3.	
	CGContextSetLineWidth(context, 1.0);

4.	
	CGContextMoveToPoint(context, 0.0, 10.0);

5.
	CGContextAddLineToPoint(context, rect.size.width, 10.0);

6.	
	CGContextStrokePath(context);
}

6 linee di codice, poche ma necessitano di una spiegazione:

1. Recuperiamo il Context grafico dell’oggetto, cioè il contenuto dove CoreImage andrà a scrivere i dati da disegnare.
2. Assegnamo un colore alla linea che vorremo creare. E’ necessario passare la rappresentazione CoreGraphics di UIColor, cioè CGColor.
3. Assegnamo uno spessore alla linea.
4. Adesso iniziano i calcoli per disegnare la linea vera e propria. Spostiamoci nel punto di partenza della linea stessa.
5. Aggiungiamo quindi una linea che va dal punto di partenza che abbiamo assegnato precedentemente, alla nuova coordinata.
6. Disegnamo la linea nel Context grafico.

Il lavoro all’interno di questa View è fatto, adesso passiamo al nostro ViewController, instanziamo la View ed aggiungiamola per vedere il risultato su schermo:

- (void)viewDidLoad {
	[super viewDidLoad];

	SampleDraw* sampleDraw = [[SampleDraw alloc] initWithFrame:CGRectMake(0.0, 100.0, self.view.frame.size.width, 30.0)];
	[self.view addSubview:sampleDraw];
}

Se tutto è andato secondo i nostri piani, vedremo la nostra view con una linea rossa che attraversa lo schermo.

Scritto il