Share
Quartz 2D è il motore di disegno 2D di Apple, un componente importante del framework Core Graphics. Spesso si può vedere Quartz 2D denominato Core Graphics o semplicemente CG.
Quartz 2D utilizza il "modello del pittore". Nel modello del pittore, ogni operazione di disegno successiva applica uno strato di "pittura" a una "tela" di output, spesso chiamata pagina. Pensa a questo come a un artista che lavora su un dipinto. Se l'artista dipingesse l'intera tela blu e poi dipingesse delle nuvole sulla tela, le nuvole copriranno l'azzurro sottostante. Una volta che qualcosa viene "dipinto" sulla tela, non può essere modificato ma aggiungendo altra vernice sopra di essa.
Tutti i disegni in Quartz 2D sono fatti attraverso un contesto grafico di tipo CGContextRef. Con un riferimento a un contesto grafico, è possibile utilizzare le funzioni di Quartz 2D per disegnare nel contesto, eseguire operazioni, come la conversione del contesto e modificare i parametri dello stato grafico, come la larghezza della linea e il colore di riempimento. Quartz 2D è un'AP basata su C, pertanto richiamerai le funzioni C che passano nel contesto come parametro.
Per disegnare sullo schermo su iOS, devi creare una sottoclasse a UIView e scavalca il suo drawRect (_ :)metodo. È dentro questo drawRect (_ :) metodo che farai qualsiasi disegno personalizzato. Dovresti mai chiama il drawRect (_ :) metodo direttamente nel tuo codice. Se è necessario aggiornare lo schermo con i nuovi comandi di disegno, è necessario chiamare i metodi setNeedsDisplay () o setNeedsDisplayInRect (_ :).
Quando si utilizza Quartz 2D su iOS, le coordinate (0,0) è in alto a sinistra dello schermo. La coordinata x aumenta man mano che ti sposti verso destra e la coordinata y aumenta man mano che ti sposti verso il basso.
Nel corso di questo tutorial, potresti voler consultare la guida alla programmazione di Quartz 2D. Lo scopo di questo tutorial è quello di iniziare a utilizzare Quartz 2D. C'è molto che non sarà coperto e per apprezzare appieno tutto ciò che Quartz 2D ha da offrire ti suggerisco di leggere la guida alla programmazione.
Con questa breve introduzione, cominciamo a utilizzare Quartz 2D.
Accentsconagua
UIView per il disegnoSupponendo che tu abbia un progetto aperto e sei pronto per iniziare a lavorare con Quartz 2D, i passaggi che devi compiere sono abbastanza semplici. Dovrai creare una classe che sia una sottoclasse di UIView, aggiungere un vista dalla libreria degli oggetti al progetto in Interface Builder e imposta la classe della vista su UIView sottoclasse che hai creato. Facciamo questo passo dopo passo.
UIViewVai a File > Nuovo > File… . Sotto il iOS sezione, selezionare fonte e quindi scegliere Cocoa Touch Class come il modello.
Sullo schermo che segue, dai un nome alla tua classe, assicurati che sia un UIView sottoclasse e imposta la lingua su veloce. stampa Il prossimo e scegli dove salvare la tua nuova classe.
Se visualizzi l'origine della tua classe appena creata, vedrai il file drawRect (_ :) metodo. Attualmente è commentato, ma lo cambieremo tra qualche istante.
importare la classe UIKit DrawLineView: UIView / * // Sostituire solo drawRect: se si esegue un disegno personalizzato. // Un'implementazione vuota influisce negativamente sulle prestazioni durante l'animazione. override func drawRect (rect: CGRect) // Codice disegno * /
Apri lo storyboard del progetto e apri il Libreria di oggetti sulla destra. Nel campo di ricerca in basso, inserisci "UIView"per filtrare gli oggetti a cui non siamo interessati.
Trascina a UIView istanza sul controller della vista. Con la vista selezionata, apri il Identity Inspector a destra e cambia Classe a qualunque cosa tu abbia chiamato la sottoclasse.
Qualsiasi codice aggiunto all'interno di drawRect (_ :) il metodo verrà disegnato quando il UIView la sottoclasse è istanziata. La vista configura automaticamente l'ambiente di disegno in modo da poter iniziare a disegnare immediatamente. La vista configura il CGContextRef menzionato all'inizio di questa lezione ed è all'interno del drawRect (_ :) metodo che otterrete un riferimento ad esso.
Per farci iniziare rapidamente, ho fornito un progetto iniziale che ha tutte le viste già cablate e pronte per l'uso. Il UIView le sottoclassi prendono il nome dal comando di disegno che esploreremo. Ad esempio, quando stiamo imparando a disegnare linee, la classe corrispondente sarà nominata DrawLinesView.
Puoi scaricare il progetto iniziale da GitHub. Inizieremo la codifica nel prossimo passaggio.
Prima di poter fare qualsiasi disegno, è necessario ottenere un riferimento al contesto grafico. Questo è compiuto come segue.
let context = UIGraphicsGetCurrentContext ()
Questo restituisce un tipo opaco, CGContextRef, e tu passerai questo contesto nelle funzioni C per fare il disegno personalizzato. Ora che sappiamo come ottenere un riferimento al contesto grafico, possiamo iniziare ad esplorare i comandi di disegno.
Se hai scaricato il progetto iniziale, apri DrawLineView.swift e aggiungi quanto segue al drawRect (_ :) metodo.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextSetStrokeColorWithColor (context, UIColor.redColor (). CGColor) CGContextMoveToPoint (context, 0, 0) CGContextAddLineToPoint (context, 200, 200) CGContextStrokePath (context)
Per prima cosa prendiamo un riferimento al contesto del disegno come discusso in precedenza. Poiché questo è qualcosa che faremo per ogni esempio, non menzionerò questo nei prossimi esempi.
Il CGContextSetStrokeColorWithColor (_: _ :) la funzione imposta il colore con cui la linea verrà disegnata o accarezzata. I parametri che passiamo sono il contesto grafico e il nuovo colore del tratto.
Se pensi al contesto grafico come alla tela di un pittore, allora il CGContextMoveToPoint (_: _: _ :) la funzione sposta il pennello su un punto particolare sulla tela da cui iniziare o continuare a disegnare. Immagina di disegnare su un pezzo di carta, sollevare la mano e spostarsi su una parte diversa del foglio e continuare a disegnare. Essenzialmente questo è ciò che questo metodo realizza. Passiamo nel contesto grafico e una coordinata x e y per iniziare il disegno.
Il CGContextAddLineToPoint (_: _: _ :) la funzione assume come parametri il contesto grafico, il valore x per la fine del segmento di linea e il valore y per la fine del segmento di linea. Dopo aver aggiunto il segmento di linea, il punto corrente verrà impostato sul punto finale del segmento di linea. Abbiamo iniziato l'operazione di disegno su (0,0), dopo questa operazione di disegno il cursore o il pennello è a (200.200).
Infine, per fare il disegno reale è necessario chiamare il CGContextStrokePath (_ :) funzione che passa nel contesto grafico. Questa funzione disegna semplicemente una linea lungo il percorso specificato.
Costruisci ed esegui il progetto di esempio per vedere l'effetto.
Aperto DrawRectangleView.swift e aggiungi quanto segue al drawRect (_ :) metodo. A questo punto dovresti avere familiarità con le prime due linee.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextSetStrokeColorWithColor (context, UIColor.redColor (). CGColor) lascia rectangle = CGRectMake (50,50, frame.size.width-100, frame.size.height- 100) CGContextAddRect (contesto, rettangolo) CGContextStrokePath (contesto)
Il CGRectMake (_: _: _: _ :) la funzione fa parte di CGGeometry e fornisce un modo semplice per creare un file CGRect struttura. Come suggerisce il nome, CGRect è una struttura che contiene la posizione e le dimensioni di un rettangolo. UN CGRect ha due campi, origine e taglia, quale area CGPoint e a CGSize rispettivamente. Se non si ha familiarità con questi tipi di dati, consultare una lettura rapida nel riferimento CGGeometry.
Creiamo una costante, rettangolo, usando il CGRectMake (_: _: _: _ :) funzione e chiama il CGContextAddRect (_: _ :) funzione, che prende come parametri il contesto grafico e a CGRect. Infine, chiamiamo CGContextStrokePath (contesto) disegnare il rettangolo.
Costruisci ed esegui il progetto per vedere il rettangolo disegnato sullo schermo.
Aperto DrawCircleView.swift e aggiorna il drawRect (_ :) metodo come segue.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextSetStrokeColorWithColor (context, UIColor.redColor (). CGColor) lascia rectangle = CGRectMake (50,50, frame.size.width-100, frame.size.height- 100) CGContextAddEllipseInRect (contesto, rettangolo) CGContextStrokePath (contesto)
Forse ti starai chiedendo perché stiamo chiamando CGRectMake (_: _: _: _ :) quando disegniamo un cerchio? Il rettangolo è l'area in cui il cerchio deve adattarsi. Nel codice sopra, creiamo un cerchio usando un quadrato. Se vuoi disegnare un ovale o un'ellisse, devi rendere il rettangolo più rettangolare.
Quindi chiamiamo il CGContextAddEllipseInRect (_: _ :) funzione, che prende come parametri il contesto grafico e il rettangolo in cui disegnare l'ellisse. Il cerchio viene disegnato chiamando CGContextStrokePath (_ :), passando nel contesto grafico.
Aperto DrawArcView.swift e aggiungi il seguente codice all'interno del drawRect (_ :) metodo.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextSetStrokeColorWithColor (context, UIColor.redColor (). CGColor) CGContextAddArc (context, 100,100,50,3.14,0,1) CGContextStrokePath (context)
Il CGContextAddArc (_: _: _: _: _: _: _ :) la funzione richiede alcuni parametri:
Per disegnare forme più complesse, devi creare un tracciato e accarezzarlo. Dai un'occhiata al drawRect (_ :) metodo in DrawPathView.swift.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextSetStrokeColorWithColor (context, UIColor.redColor (). CGColor) CGContextMoveToPoint (context, 25, 150) CGContextAddLineToPoint (context, 175, 150) CGContextAddLineToPoint (context, 100, 50 ) CGContextAddLineToPoint (context, 25, 150) CGContextStrokePath (context)
Nel drawRect (_ :) metodo, chiamiamo CGContextAddLineToPoint (_: _: _ :) un numero di volte per creare un triangolo. Si noti che il triangolo non è riempito, solo accarezzato. Nel prossimo passaggio, vedremo come riempire il triangolo con il colore.
Aperto FillPathView.swift e aggiorna il drawRect (_ :) metodo come mostrato di seguito.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextMoveToPoint (context, 25, 150) CGContextAddLineToPoint (context, 175, 150) CGContextAddLineToPoint (context, 100, 50) CGContextAddLineToPoint (context, 25, 150) CGContextSetFillColorWithColor (contesto , UIColor.redColor (). CGColor) CGContextFillPath (context)
Nel passaggio precedente, abbiamo tracciato un tracciato, ma puoi anche riempire un tracciato con un colore particolare. In quanto sopra drawRect (_ :) metodo, iniziamo creando un percorso per lo stesso triangolo dell'esempio precedente. Questa volta impostiamo un colore di riempimento usando il CGContextSetFillColorWithColor (_: _ :) funzione e chiamata CGContextFillPath (_ :) piuttosto che CGContextStrokePath (_ :).
Oltre a riempire tracciati, puoi anche riempire ellissi e rettangoli. In questo esempio, riempiremo un'ellisse. Riempire un rettangolo, tuttavia, è molto simile. La documentazione ti dirà come è fatto. Aggiorna il drawRect (_ :) metodo in FillEllipseView.swift come mostrato di seguito.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextSetLineWidth (context, 8.0) CGContextSetStrokeColorWithColor (context, UIColor.redColor (). CGColor) lascia rectangle = CGRectMake (50,50, frame.size.width-100, frame.size.height-100) CGContextAddEllipseInRect (contesto, rettangolo) CGContextStrokePath (contesto) CGContextSetFillColorWithColor (contesto, UIColor.greenColor (). CGColor) CGContextFillEllipseInRect (contesto, rettangolo)
La maggior parte di questo codice dovrebbe essere familiare ormai. Stiamo usando una nuova funzione, CGContextSetLineWidth (_: _ :), per impostare la larghezza della linea e chiamiamo CGContextFillEllipseInRect (_: _ :) per riempire l'ellisse. Questa funzione prende come parametri il contesto grafico e il rettangolo in cui riempire l'ellisse.
Il CGContextAddLines (_: _: _ :) la funzione è una funzione utile quando hai un numero di segmenti di linea retta connessi che desideri disegnare. Qui ricreiamo il triangolo di prima negli esempi, usando il CGContextAddLines (_: _: _ :) funzione. Aggiungere il seguente codice a AddLinesView.swift.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextSetStrokeColorWithColor (context, UIColor.redColor (). CGColor) lascia lines = [CGPointMake (25,150), CGPointMake (175,150), CGPointMake (100,50), CGPointMake ( 25.150)] CGContextAddLines (context, lines, 4) CGContextStrokePath (context)
Il CGContextAddLines (_: _: _ :) la funzione assume come parametri il contesto grafico, una matrice di valori che specifica i punti iniziale e finale dei segmenti di linea da disegnare come CGPoint strutture e il numero di elementi nella matrice. Si noti che il primo punto nell'array specifica il punto iniziale.
Con Quartz 2D, è facile disegnare sfumature. Sono supportati sia i gradienti lineari che quelli radiali. In questo esempio, disegneremo un gradiente lineare. La documentazione ti aiuterà se sei interessato a disegnare gradienti radiali. Aggiungi il seguente a DrawGradientView.swift.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () lascia colorspace = CGColorSpaceCreateDeviceRGB () lascia colors = [UIColor.redColor (). CGColor, UIColor.blueColor (). CGColor] lascia locazioni: [CGFloat] = [0.0 , 0.5] let gradient = CGGradientCreateWithColors (spazio colore, colori, posizioni) let startPoint = CGPointMake (0,0) let endPoint = CGPointMake (200.200) CGContextDrawLinearGradient (context, gradient, startPoint, endPoint, 0)
Il CGContextDrawLinearGradient (_: _: _: _: _ :) la funzione prende come parametri:
CGGradient strutturaUN CGGradient la struttura definisce una transizione graduale tra i colori su un'area. Ha uno spazio colore, due o più colori e una posizione per ogni colore. Le costanti colorspace, colori, e posizioni nell'esempio sopra rappresentano queste parti che costituiscono il CGGradient.
Per disegnare il gradiente, chiamiamo il CGContextDrawLinearGradient (_: _: _: _: _ :) funzione, passando nel contesto grafico, il CGGradient, valori iniziali e finali e 0 per indicare che il riempimento dovrebbe estendersi oltre la posizione di partenza.
Un'ombra è un'immagine disegnata sotto e sfalsata da un oggetto grafico in modo tale che l'ombra imiti l'effetto di una fusione di una sorgente di luce sull'oggetto grafico. - Guida alla programmazione 2D al quarzo
Ci sono due funzioni che puoi usare per disegnare le ombre, CGContextSetShadow (_: _: _ :) e CGContextSetShadowWithColor (_: _: _: _ :). Quando si usa CGContextSetShadow (_: _: _ :), tutti gli oggetti disegnati sono ombreggiati usando un colore nero con 1/3 alfa. Il CGContextSetShadowWithColor (_: _: _: _: funzione consente di specificare un colore per l'ombra.
Vediamo come funziona in pratica. Aggiungi il seguente a SetShadowWithColor.swift.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () CGContextSaveGState (context) let shadowOffset = CGSizeMake (-15,20) CGContextSetShadowWithColor (context, shadowOffset, 3, UIColor.greenColor (). CGColor) CGContextSetStrokeColorWithColor (context, UIColor .redColor (). CGColor) let rectangle = CGRectMake (50,50, frame.size.width-100, frame.size.height-100) CGContextAddRect (contesto, rettangolo) CGContextStrokePath (contesto) CGContextRestoreGState (contesto)
Quando si disegnano le ombre, è necessario salvare lo stato del contesto grafico, apportare le modifiche richieste e ripristinare lo stato della grafica. Noi chiamiamo CGContextSaveGState (_ :) per salvare lo stato corrente del contesto grafico, specificare un offset per l'ombra, shadowOffset, e chiama il CGContextSetShadowWithColor (_: _: _: _ :) funzione. Questa funzione assume come parametri:
Il resto del codice dovrebbe esserti familiare. Infine, ripristiniamo il contesto grafico chiamando CGContextRestoreGState (_ :), passando nel contesto grafico.
Ho pensato che sarebbe stato divertente terminare questo tutorial disegnando una semplice faccia felice usando ciò che abbiamo imparato durante questo tutorial. Aggiungi il seguente a DrawHappyFaceView.swift.
override func drawRect (rect: CGRect) let context = UIGraphicsGetCurrentContext () lascia face = CGRectMake (50,50, frame.size.width-100, frame.size.height-100) CGContextAddEllipseInRect (context, face) CGContextSetFillColorWithColor (context, UIColor.yellowColor (). CGColor) CGContextFillEllipseInRect (context, face) lascia leftEye = CGRectMake (75,75,10,10) CGContextSetFillColorWithColor (context, UIColor.blackColor (). CGColor) CGContextFillEllipseInRect (context, leftEye) lascia rightEye = CGRectMake ( 115,75,10,10) CGContextFillEllipseInRect (context, rightEye) CGContextSetLineWidth (context, 3.0) CGContextAddArc (context, 100,100,30,3,14,0,1) CGContextStrokePath (context)
L'implementazione del drawRect (_ :) il metodo dovrebbe avere senso ora e dovresti avere una faccia felice disegnata sullo schermo.
Questo porta a termine questo tutorial. Ora dovresti avere una conoscenza di base su come eseguire disegni personalizzati usando il motore di disegno 2D di Quartz. Spero tu abbia imparato qualcosa di utile leggendo questo tutorial.
