{"id":12780,"date":"2017-11-06T09:37:15","date_gmt":"2017-11-06T08:37:15","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=12780"},"modified":"2017-11-06T09:37:15","modified_gmt":"2017-11-06T08:37:15","slug":"android-disegnare-con-i-canvas","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/android-disegnare-con-i-canvas\/","title":{"rendered":"Android, disegnare con i Canvas"},"content":{"rendered":"<p>Nella <strong>programmazione Android<\/strong>, siamo abituati a vedere le immagini come dei contenuti statici, collocati nella cartella delle risorse Drawable. In alcuni casi, per\u00f2 pu\u00f2 rivelarsi utile disegnarle dinamicamente tramite codice Java. Quello che ci serve \u00e8 una sorta di foglio su cui poter imprimere delle forme geometriche in base alle nostre configurazioni: tutto ci\u00f2 esiste e passa sotto il nome di <strong>Canvas<\/strong>.<br \/>\nIn questo esempio, illustreremo l&#8217;utilizzo di un Canvas disegnando su una Bitmap per poi utilizzarla come contenuto di una ImageView.<br \/>\nIl layout dell&#8217;app \u00e8 il seguente:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:padding=\"16dp\"&gt;\r\n    &lt;ImageView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:id=\"@+id\/immagine\"\/&gt;\r\n&lt;\/RelativeLayout&gt;\r\n<\/pre>\n<p>Nel metodo <em>onCreate<\/em> dell&#8217;Activity, dopo aver recuperato il riferimento all&#8217;ImageView, chiediamo un Canvas per poter disegnare una nostra immagine. Supponiamo che il nostro scopo sia quello di avere uno sfondo blu ed un cerchio giallo in posizione centrale, quello che ci serve \u00e8:<\/p>\n<ul>\n<li><strong>richiedere un oggetto Bitmap<\/strong> che costituir\u00e0 il nostro prodotto finale. Nell&#8217;impostazione diremo di quanti punti vogliamo che sia composto sia orizzontalmente che verticalmente;<\/li>\n<li><strong>costruiamo un Canvas<\/strong> che usi come base di lavoro la Bitmap appena istanziata;<\/li>\n<li><strong>istanzieremo un Paint<\/strong> che costituisce lo strumento di disegno sul Canvas;<\/li>\n<li>disporremo che il <strong>Canvas disegni sulla Bitmap<\/strong> le forme che vorremo utilizzando i parametri da noi passati di volta in volta ed il Paint configurato.<\/li>\n<li>assegneremo la <strong>Bitmap come contenuto della ImaView<\/strong> posizionata nel layout.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_01.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12784\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_01-200x300.jpg\" alt=\"Android disegnare forme geometriche con i Canvas\" width=\"200\" height=\"300\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_01-200x300.jpg 200w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_01.jpg 418w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<p>Questo il codice per fare apparire sfondo e cerchio che desideriamo:<\/p>\n<pre class=\"lang:java decode:true\">@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\n\r\nImageView img= (ImageView) findViewById(R.id.immagine);\r\n\r\n\/\/ 1. preparazione Bitmap\r\nBitmap bmp=Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);\r\n\r\n\/\/ 2. istanziamo Canvas basato sulla Bitmap\r\nCanvas canvas=new Canvas(bmp);\r\n\r\n\/\/ 3. assegniamo sfondo blu al Drawable\r\ncanvas.drawColor(Color.BLUE);\r\n\r\n\/\/ 4. per disegnare il cerchio, abbiamo bisogno di un Paint\r\nPaint paint=new Paint();\r\n\r\n\/\/ 5. il Paint user\u00e0 il colore giallo\r\npaint.setColor(Color.YELLOW);\r\n\r\n\/\/ 6. usando il Paint disegniamo un cerchio nella Drawable\r\ncanvas.drawCircle(200,200, 100, paint);\r\n\r\n\/\/ 7. la Bitmap disegnata con il Canvas diventa il contenuto della ImageView\r\nimg.setImageBitmap(bmp);\r\n}<\/pre>\n<p>Dalla righe di codice appena viste, notiamo che il Paint non serve per assegnare un colore di sfondo alla Bitmap mentre ha un ruolo indispensabile per definire il tratto con cui il Canvas disegner\u00e0.<br \/>\nIl <strong>Canvas possiede molti metodi<\/strong> di cui <em>drawCircle<\/em> \u00e8 quello definito per il disegno di un cerchio. Le coordinate utilizzate sono rapportate al sistema di punti (400X400) che abbiamo posto alla base del nostro Bitmap. Per questo motivo, la coppia di coordinate ascissa e ordinata che rappresentano il centro del cerchio (valgono entrambe 200) costituiranno anche il centro dell&#8217;area a disposizione. Il raggio del cerchio sar\u00e0 invece di 100 punti.<br \/>\nPer <strong>assegnare la nuova immagine all&#8217;ImageView<\/strong>, baster\u00e0 utilizzare il riferimento al Drawable senza chiedere alcuna elaborazione al Canvas o ad altro oggetto.<br \/>\nPer arricchire l&#8217;immagine di nuovi tratti, si dovr\u00e0 eventualmente riconfigurare il Paint.<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_02.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12781\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_02-208x300.jpg\" alt=\"Android disegnare forme geometriche con i Canvas\" width=\"208\" height=\"300\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_02-208x300.jpg 208w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_02.jpg 420w\" sizes=\"auto, (max-width: 208px) 100vw, 208px\" \/><\/a><br \/>\nAd esempio, per aggiungere un cerchio celeste pi\u00f9 piccolo sopra quello giallo avremo bisogno del seguente codice:<\/p>\n<pre class=\"lang:java decode:true\">paint.setColor(Color.CYAN);\r\ncanvas.drawCircle(200,200, 50, paint);<\/pre>\n<p>Si presti attenzione che le immagini sono realizzate in sequenza perci\u00f2 invertendo i comandi che disegnano i cerchi (mettendo, quindi, prima quello pi\u00f9 piccolo e poi quello pi\u00f9 grande) vedremmo apparire solo il secondo in quanto risulterebbe sovrapposto al primo.<\/p>\n<p>Per il <strong>disegno di linee<\/strong>, si usa analogamente il metodo <em>drawLine<\/em> al quale passeremo due coppie di coordinate rappresentanti gli estremi del segmento.<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_03.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12782\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_03-216x300.jpg\" alt=\"\" width=\"216\" height=\"300\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_03-216x300.jpg 216w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_03.jpg 432w\" sizes=\"auto, (max-width: 216px) 100vw, 216px\" \/><\/a><br \/>\nAd esempio, per avere una linea di colore verde e spessore di 5 punti, che tagli il Drawable dall&#8217;angolo in altro a sinistra (coordinate: x=0 e y=0) a quello in basso<br \/>\na destra (coordinate: x=400 e y=400) dovremo utilizzare le seguenti righe di codice Java:<\/p>\n<pre class=\"lang:java decode:true\">paint.setColor(Color.GREEN);\r\npaint.setStrokeWidth(5);\r\ncanvas.drawLine(0,0,400,400, paint);<\/pre>\n<p>L&#8217;intuitivit\u00e0 dell&#8217;uso delle coordinate in questi metodi nonch\u00e9 il loro formato numerico permettono di utilizzarli in maniera pi\u00f9 dinamica come il seguente ciclo che offre una sorta di piccolo esercizio geometrico:<\/p>\n<pre class=\"lang:java decode:true\">for(int i=0;i&lt;400;i+=20)\r\n{\r\n   canvas.drawLine(i,0,400,i, paint);\r\n   canvas.drawLine(400,i,400-i,400, paint);\r\n   canvas.drawLine(400-i,400,0,400-i, paint);\r\n   canvas.drawLine(0,400-i,i,0, paint);\r\n}<\/pre>\n<p>Da ogni lato partiranno linee consecutive che raggiungeranno il lato adiacente. L&#8217;intreccio di tali forme comporr\u00e0 il disegno visibile in figura:<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_04.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-12783\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_04-215x300.jpg\" alt=\"\" width=\"215\" height=\"300\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_04-215x300.jpg 215w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2017\/01\/android-canvas-bitmap-paint_img_04.jpg 430w\" sizes=\"auto, (max-width: 215px) 100vw, 215px\" \/><\/a><\/p>\n<h2>Conclusioni<\/h2>\n<p>I Canvas offrono la possibilit\u00e0 di scendere un p\u00f2 pi\u00f9 in profondit\u00e0 rispetto all&#8217;alto livello cui \u00e8 abituato il programmatore. Con questi elementi riusciamo a gestire delle immagini da vicino ma con la comodit\u00e0 di tanti metodi intuitivi messi a disposizione dalla classe Canvas.<\/p>\n<p>Ora tocca a voi: provate ad utilizzarli e fateci sapere cosa ne pensate.<\/p>\n<p>Alla prossima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nella programmazione Android, siamo abituati a vedere le immagini come dei contenuti statici, collocati nella cartella delle&#8230;<\/p>\n","protected":false},"author":561,"featured_media":13222,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1682,1],"tags":[1278,1871,1870],"class_list":["post-12780","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-tutorial-pratici","tag-android","tag-bitmap","tag-canvas"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12780","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\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=12780"}],"version-history":[{"count":6,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12780\/revisions"}],"predecessor-version":[{"id":13317,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12780\/revisions\/13317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/13222"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=12780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=12780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=12780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}