Framing the Canvas (November 2014)

Framing the Canvas (November 2014)

[Presented at Berlin DevFest 2014 and Droidcon NL 2014]

This talk will guide you through a topic that is often ignored: the Canvas API. Even if there's only scarce documentation for it, the Canvas API is at the heart of everything that shows a UI on Android. You'll need to tame this powerful and mysterious creature if you want to create great custom views and brilliant, lightweight UIs for your apps.

What is a Canvas? How do you Paint? Can you draw Paths? What is Skia, and who invited it anyway? What actually happens during a drawing pass? What are Shaders? What are Filters? Is it true that text is basically impossible to measure correctly? What shape does a Shape have if noone's painting it? These and other questions will get an answer during this session. Well, some of them will not, probably.

Connect the dots in the spotty documentation the Android team has assembled, and become a true pixel pusher!

4580c218737149bf44d012a110612010?s=128

Sebastiano Poggi

November 22, 2014
Tweet

Transcript

  1. Framing the Canvas Get your Paint together, follow the Path

    and get to master Shaders
  2. Sebastiano Poggi Insult/stalk me on: @seebrock3r +SebastianoPoggi rock3r Android Software

    Craftsman in London
  3. CC-BY-NC Joe Benjamin on Flickr

  4. Paint on the Canvas CC-BY-NC-ND anna gutermuth on Flickr

  5. Painting on the Canvas

  6. • Base for any Android UI • Drawing on a

    buffer • Hardware or Software • API: Canvas, Paint, … Canvas CC-BY Cara St.Hilaire on Flickr
  7. WELL GOOGLE, IF WE COULD HAVE SOME DOCUMENTATION EVERY NOW

    AND THEN YEAH, THAT’D BE GREAT
  8. We should love Skia • Underneath Canvas • Native code

    • 2D graphics rendering toolkit • Basic painting • Advanced features walcor on DeviantArt
  9. • Text is a pain • Weird quirks • E.g.,

    no proper arcs • No documentation …but Skia kinda sucks Eugenio Marletti on Medium
  10. Google • Draw using HWUI • Subset of Skia •

    Honeycomb and later • With limitations (of course) • Revert to software buffer OK, Canvas is still cool
  11. Unsupported ops on HW Google

  12. Good read Hardware Acceleration on Android Developers website http://goo.gl/HgV8D

  13. Using the Canvas • Transforms using matrices and Cameras •

    Views must use it on the UI thread • Or go with a SurfaceView • Canvas is stateful
  14. State of the art 1.Call save() — or saveToCount() 2.Do

    your stuff 3.Restore original state: restore() — or restoreToCount()
  15. Seb’s top tip

  16. Seb’s top tip Alpha composite overlaps, the framework way 1.int

    state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state);
  17. Seb’s top tip Alpha composite overlaps, the framework way 1.int

    state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas
  18. Seb’s top tip Alpha composite overlaps, the framework way 1.int

    state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas
  19. Seb’s top tip Alpha composite overlaps, the framework way 1.int

    state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas
  20. Seb’s top tip Alpha composite overlaps, the framework way 1.int

    state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer
  21. Seb’s top tip Alpha composite overlaps, the framework way 1.int

    state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer
  22. Seb’s top tip Alpha composite overlaps, the framework way 1.int

    state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer PROFIT!
  23. Seb’s top tip Alpha composite overlaps, the framework way 1.int

    state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas PROFIT!
  24. Surfacing ideas CC-BY-NC-SA arbyreed on Flickr

  25. Painting on the Canvas

  26. Surfaces and flingers • Draw on surfaces • Buffers •

    SurfaceFlinger • SW or HW backing CC-BY-NC-SA Nicolas Hoizey on Flickr
  27. Good read AOSP Graphics on AOSP Source website http://goo.gl/i5iVwH

  28. Layers • Offscreen buffers • Every Canvas has one •

    Can be blitted with a Paint • Different types of layer CC-BY-NC-SA Doug88888 on Flickr
  29. View Layer types (3.0+) • NONE: no buffer • SOFTWARE:

    bitmap buffer • HARDWARE: HW-backed texture • Can improve performances (e.g., animations)
  30. CC-BY Brandon Morse on Flickr Pushing pixels

  31. Pushing pixels

  32. Canvas API Paint Shape Path Matrix Color Drawable Bitmap Camera

    Movie NinePatch Picture Interpolator SurfaceTexture Typeface
  33. Drawable Canvas API Shape Path Color Bitmap Camera Movie Picture

    Interpolator SurfaceTexture Typeface Matrix NinePatch Paint
  34. Paint it (black) • Knows how to draw the pixels

    • All drawing calls need a Paint • Handles text as well • TextPaint subclass CC-BY-NC-ND Mark Chadwick on Flickr
  35. Skia pipeline Adapted from Laurence Gonsalves’ post on Xenomachina

  36. Good read Android's 2D Canvas Rendering Pipeline by Laurence Gonsalves

    on Xenomachina http://goo.gl/4W5R0Z
  37. Effective painting • Steps have two phases each • “Two-pass”

    strategy • Effects modify steps output • Second passes default to identity CC-BY-NC-SA ClintJCL on Flickr
  38. Mask filters • Rasterization phase • Affect alpha mask •

    Not HW accelerated • Blur and Emboss P S T R
  39. Good read Blurring Images (series) by Mark Allison on Styling

    Android http://goo.gl/zZVs2V
  40. Shaders • Shading phase • Similar to OpenGL shaders •

    Not programmable • TileMode CC-BY-NC-SA Andreas Köberle on Flickr P S T R
  41. A Shady bunch Shader BitmapShader ComposeShader *Gradient Use a Bitmap

    as texture when painting Combine two different shaders and mix them with a Xfermode Paint using a Linear, Radial or Sweep gradient P S T R
  42. Color Filters • Adjust colours after Shaders • Uniform transformation

    for all pixels ColorFilter ColorMatrixColorFilter LightingColorFilter PorterDuffColorFilter Apply a 4x5 colour matrix transform Multiply SRC colours by a colour, and then add a second colour Apply a colour to the SRC colour using a Porter-Duff mode P S T R
  43. Transfer modes • Second step of Transfer phase • Blend

    SRC image onto DST through mask Xfermode AvoidXfermode PixelXorXfermode PorterDuffXfermode Draw (or don’t draw) pixels based on the “distance” from a reference Exclusive-OR source and destination pixels. Drops the alpha channel! Blends the source and destination colours using a Porter-Duff mode P S T R
  44. Q&A

  45. We’re hiring! natasha@novoda.com LONDON BERLIN LIVERPOOL