It's the arts! Playing around with the Android canvas
•Download as PPTX, PDF•
8 likes•3,897 views
A workshop about using the Canvas in Android Including how to draw on canvas, make transformations, composited drawings and animated views
Recommended
More Related Content
What's hot
Viewers also liked
Similar to It's the arts! Playing around with the Android canvas
Similar to It's the arts! Playing around with the Android canvas (20)
More from Sergi Martínez
More from Sergi Martínez (8)
Recently uploaded
Recently uploaded (20)
It's the arts! Playing around with the Android canvas
- 1. It’s the arts! Playing with the Android canvas (or Let’s have a pretext to vandalize art)
- 3. Today Introduction to canvas Composing and transforming Animations!
- 5. But first, setup things: http://sergiandreplace.com/canvas
- 7. How we paint things in Android?
- 9. Renderscript (using a hammer to crack a nut) (and not really for drawing)
- 11. What is exactly a “canvas”?
- 12. A Canvas works for you as a pretense, or interface, to the actual surface upon which your graphics will be drawn — it holds all of your "draw" calls
- 14. Tl;dr: Canvas is the class that translates drawing actions into a Bitmap
- 15. To draw something you need 4 components (almost always)
- 16. A Bitmap to hold the pixels
- 17. a Canvas to host the draw calls (writing into the bitmap)
- 18. a drawing primitive (e.g. Rect, Path, text, Bitmap)
- 19. and a Paint (to describe the colors and styles for the drawing)
- 21. Tag 1_01_start
- 22. Let’s put a smile on that face
- 27. Remember Bitmap + Canvas + Paint +Primitive = Drawing
- 28. Oh, crap!
- 29. Let’s improve that smile
- 31. Much better, but… a bit too straight
- 32. RectF allows to reuse coordinates
- 33. Bellisima! but…
- 35. Tag start_1_02
- 36. In this case, the Paint is not needed
- 37. Why so serious?
- 38. Here comes the cape crusader!
- 40. Let’s get crazy with the rects!
- 41. Let’s talk about Bitmaps
- 42. Loading a bitmap
- 43. But…
- 44. A loaded Bitmap is immutable We can’t draw in it!
- 47. Bitmaps must be recycled Recycle marks it as GCable Still exists, but we can’t draw
- 48. Bitmaps are huge
- 49. Stored in memory with no compression
- 51. Why to load a huge bitmap if target draw is small?
- 57. Painting on the activity is cool, but…
- 58. Painting views is cooler
- 59. Anatomy of a drawing view
- 60. 1. Create needed objects 2. Measure 3. Draw accordingly 4. Repeat 2 & 3 when needed
- 62. onDraw is executed everytime the view needs to be redrawn (or a part of it)
- 63. We can request a onDraw with invalidate() (or postInvalidate if not in UI thread)
- 64. onDraw receives a ready-to-use-canvas
- 66. Tag 2_01_start
- 67. MyFirstDrawingView extends from ImageView But it adds no behaviour. To work!
- 69. 1. ImageView add src
- 70. 1. ImageView add src 2. MyFirstDrawingView adds a Vignette
- 71. 3. View class draws background 1. ImageView add src 2. MyFirstDrawingView adds a Vignette
- 72. 3. View class draws background 1. ImageView add src 2. MyFirstDrawingView adds a Vignette
- 74. Basically, shaders modify the behaviour of Paint object
- 75. BitmapShader Allows to tile a Bitmap
- 77. ComposeShader allows to mix two shaders with an Xfermode (a really crazy thing)
- 81. We want our view to vignette the image set in the layout
- 82. You have to: Create a RadialGradient (psst, getMeasuredHeight & getMeasuredWidth) Assign to the Paint object Use canvas.drawPaint(Paint) to fill it
- 83. Pro: Avoid instantiate in the onDrawMethod (onSizeChanged is your friend) Use the drawable size, not the View size Check ScaleMode and Padding behaviour
- 85. PorterDuffModes define images will blend
- 89. Don’t worry, trial and error
- 90. We could also save a layer
- 91. Saving layers allows us to make transformations
- 92. Example Save layer Transform canvas 45º Draw square Restore canvas
- 93. More on transformations later on
- 94. We can setup a Paint on saving It will be applied on restoring
- 97. Create a new bitmap to hold the image Create a temporary canvas for it Draw the imageView image on the canvas Save the canvas using a paint with the PorterDuff setup the bounds of the drawable mask Draw the mask on the temporary canvas Restore the temporary canvas Draw the bitmap on the real canvas
- 98. Pro: Optimize it to avoid instatiation in the onDraw Play around with ratios
- 99. Transformations
- 100. Mainly matrixes and camera
- 101. Stoping too obvious jokes before is too late
- 102. Remember matrixes from school?
- 103. Haha. Don’t worry
- 104. But remember Operations order is important
- 105. Matrixes are used for Translate Rotate Scale Skew
- 107. We must use preOperation and postOperation to concatenat
- 108. So Matrix.preRotate Matrix.setScale Rotates and scales So Matrix.setRotate Matrix.postScale Rotates and scales
- 109. Canvas has unity matrix by default
- 110. Be careful!
- 118. Cameras allow us to create 3D matrixes So 3D transformations (axes x, y and z + perspective)
- 119. We perform transformations on camera And then, we get the corresponding matrix
- 121. Tag 2_03_start
- 122. First part objective Make an image turn
- 123. You have to: Calculate center Create a matrix Set the rotation of the matrix Create a new Bitmap as big as view Create the canvas of that Bitmap Draw image on the canvas with the matrix Draw the resulting bitmap on the main canvas
- 124. Pro: Connect a seekBar with the rotation (wow!) Do it without and with optimization (is it noticeable?)
- 125. Remember!
- 126. All these operations and stuff is cute
- 127. Combined are WOW!
- 128. Animations
- 129. We are not going to talk about Animation or Animator class
- 130. But how to move all the things we learned
- 131. Basically, a onPaint calling invalidate()
- 132. Things to keep in mind
- 133. Speed
- 134. We want to achieve as FPS as possible
- 135. NO INSTATIATION!!
- 138. Create appropiate flags for the status (boolean or enum, up to you)
- 139. Create controls methods (start, stop, rewind, whatever)
- 140. Time between onDraw calls changes
- 142. deltaTime = System.currentTimeMillis() - startTime; progress = (float) deltaTime / duration);
- 143. Animation pattern (well, my pattern)
- 144. Make the methods setup the states
- 145. In the onDraw
- 147. Keep in mind what to draw after & before the animation
- 148. Cache, cache and cache
- 149. Include also animating states
- 150. Animating states should change flags and/or call invalidate
- 151. Animating states must calculate progress
- 152. Interpolators
- 153. Used to add realism to the animations
- 158. So, interopolators are just functions
- 159. f(delta time) = interpolated time
- 160. deltaTime = System.currentTimeMillis() - startTime; progress = (float) deltaTime / duration);
- 161. deltaTime = System.currentTimeMillis() - startTime; interpolatedTime = interpolator.getInterpolation ((float) deltaTime / duration);
- 163. Tag 3_01_start
- 164. Newspaper effect!
- 165. Newspaper effect!
- 166. Follow the pattern and fill it up comments
- 167. Pro: Make things parametized Add stop/pause Make real effect (add scale and alpha)
- 168. Did you finish the exercise?
- 169. So we are finished
- 170. There are many other things in Canvas
- 171. Believe me
- 172. Just check drawing text stuff
- 173. Whoever made the TextView is my hero
- 174. Whoever made EditText is my God
- 175. Hope you enjoyed
- 176. Willing to see the things you make with all this
- 177. Share them in the GDG group!