{"id":3763,"date":"2010-06-25T09:30:52","date_gmt":"2010-06-25T07:30:52","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3763"},"modified":"2010-06-25T09:36:52","modified_gmt":"2010-06-25T07:36:52","slug":"t057-disegnamo-all-interno-di-una-uiview","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t057-disegnamo-all-interno-di-una-uiview\/","title":{"rendered":"T#057 – Disegnamo all’interno di una UIView"},"content":{"rendered":"

\"\"<\/a> Ciao a tutti in questo nuovo tutorial affronteremo un argomento molto utile che vi far\u00e0 capire come funzionano, a grandi linee, le applicazioni di grafica in generale.<\/p>\n

Per iniziare creeremo una semplice UIView che, non appena viene chiamato il metodo “drawRect:<\/strong>” disegna un triangolo, in seguito vedremo come \u00e8 possibile potenziare la nostra view aggiungendo livelli di disegno, figure gi\u00e0 definite etc.<\/p>\n

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

Passiamo ora alla spiegazione delle funzioni che costruiscono la grafica: sono le funzioni di CGPath<\/strong>.
\nCGPath \u00e8 sostanzialmente un “percorso” e come tale si parte da un punto e si arriva ad un altro, ad oltranza. Il percorso quindi \u00e8 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.
\nPer disegnare effettivamente una figura si usano le funzioni CGContext<\/strong>.<\/p>\n

Passiamo al lato pratico e vediamo come disegnare il nostro triangolo:<\/p>\n

\r\n        \/\/ creo la figura\r\n        CGMutablePathRef p = CGPathCreateMutable();\r\n\t\/\/ mi posiziono nel primo punto\r\n\tCGPathMoveToPoint(p, NULL, 150, 150);\r\n\t\/\/ creo la linea\r\n\tCGPathAddLineToPoint(p,NULL,300,300);\r\n\t\/\/ un'altra\r\n\tCGPathAddLineToPoint(p,NULL,100,400);\r\n\t\/\/ chiudo la figura\r\n\tCGPathCloseSubpath(p);\r\n\r\n\t\/\/ ottengo il context per il disegno\r\n\tCGContextRef c = UIGraphicsGetCurrentContext();\r\n\t\/\/ aggiungo la mia figura creata prima (il triangolo)\r\n\tCGContextAddPath(c,p);\r\n\t\/\/ imposto il colore di riempimento della mia figura\r\n\tCGContextSetRGBFillColor(c,1,0,0,1);\r\n\t\/\/ chiudo la figura (se non \u00e8 gi\u00e0 stata chiusa) e la \"riempio\" di colore\r\n\tCGContextFillPath(c);\r\n<\/pre>\n
Spero il codice si commenti da solo, molto semplice ed intuitivo.<\/p>\n
Ora, per provare a disegnare delle linee, creiamo il bordo della nostra vista (magari si potrebbe usare per definire una vista “selezionata”…):<\/p>\n
\r\n-(void)drawBorder {\r\n\t\/\/ creo la figura\r\n\tCGMutablePathRef p = CGPathCreateMutable();\r\n\t\/\/ mi posiziono nel primo punto (0,0)\r\n\tCGPathMoveToPoint(p, NULL, 0, 0);\r\n\t\/\/ creo la linea superiore\r\n\tCGPathAddLineToPoint(p,NULL,self.bounds.size.width,0);\r\n\t\/\/ linea a destra\r\n\tCGPathAddLineToPoint(p,NULL,self.bounds.size.width,self.bounds.size.height);\r\n\t\/\/ linea in basso\r\n\tCGPathAddLineToPoint(p,NULL,0,self.bounds.size.height);\r\n\t\/\/ linea a sinistra (serve ? in teoria basterebbe usare una funziona che chiude la figura)\r\n\tCGPathAddLineToPoint(p,NULL,0,0);\r\n\r\n\t\/\/ ottengo il context per il disegno\r\n\tCGContextRef c = UIGraphicsGetCurrentContext();\r\n\t\/\/ aggiungo la mia figura (il bordo della view)\r\n\tCGContextAddPath(c,p);\r\n\t\/\/ imposto la larghezza della linea\r\n\tCGContextSetLineWidth(c,2);\r\n\t\/\/ imposto il colore della mia linea (o contorno della figura)\r\n\tCGContextSetRGBStrokeColor(c,0,1,0,1);\r\n\t\/\/ disegno la figura (in realt\u00e0 il contorno della figura)\r\n\tCGContextStrokePath(c);\r\n}\r\n<\/pre>\n
Il metodo deve necessariamente essere chiamato all’interno di “drawRect:” altrimenti non pu\u00f2 funzionare, infatti nel mio progetto di esempio (link pi\u00f9 sotto) questo metodo \u00e8 privato.<\/p>\n
Spero che il tutto vi sia abbastanza chiaro, se nutrite dei dubbi provate il mio progetto<\/a> e scrivete nei commenti.<\/p>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ciao a tutti in questo nuovo tutorial affronteremo un argomento molto utile che vi far\u00e0 capire come…<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[70,1],"tags":[277,276,37,278,281,70,1],"class_list":["post-3763","post","type-post","status-publish","format-standard","hentry","category-grafica-e-design","category-tutorial-pratici","tag-cgcontext","tag-cgpath","tag-classi","tag-drawrect","tag-francesco-burelli","tag-grafica-e-design","tag-tutorial-pratici"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=3763"}],"version-history":[{"count":8,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3763\/revisions"}],"predecessor-version":[{"id":3779,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3763\/revisions\/3779"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=3763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}