Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Canvas Drawing

E86c7de302b490b7f2a67e54960510d0?s=47 Ryan Harter
November 05, 2017

Canvas Drawing

Introduction to 2D drawing on Android using the Canvas API from #droidconSF.

E86c7de302b490b7f2a67e54960510d0?s=128

Ryan Harter

November 05, 2017
Tweet

Transcript

  1. Canvas Drawing Ryan Harter @rharter

  2. Canvas Drawing

  3. How Android Draws Views

  4. How Android Draws Views Canvas

  5. How Android Draws Views Canvas Skia

  6. How Android Draws Views Canvas Skia OpenGLRenderer

  7. How To Get A Canvas class CustomView(...) : View(...) {

    override fun onDraw(canvas: Canvas?) { } }
  8. How To Get A Canvas class CustomView(...) : View(...) {

    override fun onDraw(canvas: Canvas?) { } } class CustomDrawable : Drawable() { override fun draw(canvas: Canvas?) { } }
  9. How To Get A Canvas class CustomView(...) : View(...) {

    override fun onDraw(canvas: Canvas?) { } } class CustomDrawable : Drawable() { override fun draw(canvas: Canvas?) { } } val image = Bitmap.createBitmap(100, 100, ARGB_8888) val canvas = Canvas(image)
  10. How To Get A Canvas class CustomView(...) : View(...) {

    override fun onDraw(canvas: Canvas?) { } } class CustomDrawable : Drawable() { override fun draw(canvas: Canvas?) { } } val image = Bitmap.createBitmap(100, 100, ARGB_8888) val canvas = Canvas(image)
  11. Canvas Drawing

  12. Canvas Drawing

  13. Canvas Drawing

  14. Canvas Drawing

  15. Canvas Drawing

  16. Canvas Drawing

  17. Canvas Drawing

  18. Canvas Drawing

  19. Canvas Drawing

  20. Canvas Drawing

  21. Canvas Drawing

  22. Canvas Drawing

  23. Canvas Drawing

  24. Canvas Drawing

  25. Canvas Drawing Circle

  26. Canvas Drawing Circle Other Circle

  27. Canvas Drawing

  28. Canvas Drawing

  29. private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing
  30. private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing
  31. private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing
  32. private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing what
  33. private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing what how
  34. private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing
  35. private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing
  36. private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing
  37. private val basePaint = Paint().also { it.color = 0xFFc6853b.toInt() }\

    canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) Canvas Drawing private val basePaint = Paint().also { it.color = 0xFFc6853b.toInt() }\ canvas.drawCircle( bounds.exactCenterX(), // center x bounds.exactCenterY(), // center y bounds.width() / 2f, // radius basePaint) // draw the base
  38. // draw the base Canvas Drawing

  39. // draw the base Canvas Drawing

  40. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

  41. canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE) // draw the base Canvas Drawing

  42. canvas.clipPath(holePath, Region.Op.INTERSECT) canvas.clipPath(holePath, Region.Op.INTERSECT) // draw the base Canvas Drawing

  43. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

  44. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

  45. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

    private val holePath = Path()
  46. fun onBoundsChange(bounds: Rect?) { super.onBoundsChange(bounds) bounds?.let { holePath.reset() holePath.addCircle( it.exactCenterX(),

    it.exactCenterY(), it.width() / 6F, Path.Direction.CW) }\ }\ fun onBoundsChange(bounds: Rect?) { super.onBoundsChange(bounds) bounds?.let { holePath.reset() holePath.addCircle( it.exactCenterX(), it.exactCenterY(), it.width() / 6F, Path.Direction.CW) }\ }\ Canvas Drawing canvas.clipPath(holePath, canvas.clipPath(holePath, private val holePath = Path() private val holePath = Path()
  47. fun onBoundsChange(bounds: Rect?) { super.onBoundsChange(bounds) bounds?.let { holePath.reset() holePath.addCircle( it.exactCenterX(),

    it.exactCenterY(), it.width() / 6F, Path.Direction.CW) }\ }\ fun onBoundsChange(bounds: Rect?) { super.onBoundsChange(bounds) bounds?.let { holePath.reset() holePath.addCircle( it.exactCenterX(), it.exactCenterY(), it.width() / 6F, Path.Direction.CW) }\ }\ Canvas Drawing canvas.clipPath(holePath, canvas.clipPath(holePath, private val holePath = Path() private val holePath = Path()
  48. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

  49. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

    // draw the stache
  50. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

    // draw the stache
  51. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

    // draw the stache canvas.save() canvas.restore() canvas.save() canvas.restore() // draw the base // draw the stache
  52. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

    // draw the stache canvas.save() canvas.restore() canvas.save() canvas.restore() // draw the base // draw the stache
  53. // draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE)

    canvas.save() canvas.restore() canvas.save() canvas.restore() // draw the base
  54. // clip the hole // Clip the hole // draw

    the base Canvas Drawing // draw the base
  55. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base
  56. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base
  57. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f)
  58. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f)
  59. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f)
  60. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f)
  61. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f)
  62. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f) CornerPathEffect(40f) CornerPathEffect(40f)
  63. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f) CornerPathEffect(40f) CornerPathEffect(40f)
  64. , // draw the icing // draw the icing //

    clip the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f) CornerPathEffect(40f) CornerPathEffect(40f) ComposePathEffect( ComposePathEffect( ) ) ,
  65. , // draw the icing // draw the icing //

    clip the hole // Clip the hole // draw the base Canvas Drawing // draw the base DiscretePathEffect(60f, 25f) DiscretePathEffect(60f, 25f) CornerPathEffect(40f) CornerPathEffect(40f) ComposePathEffect( ComposePathEffect( ) ) ,
  66. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base ComposePathEffect( ComposePathEffect() )
  67. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base ComposePathEffect( ComposePathEffect() ) canvas.drawCircle( bounds.exactCenterX(), bounds.exactCenterY(), bounds.width() / 2.1f, icingPaint)
  68. // draw the icing // draw the icing // clip

    the hole // Clip the hole // draw the base Canvas Drawing // draw the base ComposePathEffect( ComposePathEffect() ) canvas.drawCircle( bounds.exactCenterX(), bounds.exactCenterY(), bounds.width() / 2.1f, icingPaint)
  69. Canvas Drawing // draw the icing // draw the icing

    // clip the hole // Clip the hole // draw the base // draw the base
  70. Canvas Drawing // draw the sprinkles! // draw the icing

    // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles!
  71. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { } }
  72. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // calculate the position // calculate the position } }
  73. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // move the canvas // move the canvas // calculate the position // calculate the position } }
  74. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // move the canvas // move the canvas // draw the sprinkle // draw the sprinkle // calculate the position // calculate the position } }
  75. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // move the canvas // move the canvas // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position } }
  76. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // move the canvas // move the canvas // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance // calculate the position // calculate the position } }
  77. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // calculate the position // calculate the position // move the canvas // move the canvas // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  78. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // calculate the position // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  79. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  80. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  81. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  82. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  83. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  84. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  85. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  86. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  87. // draw the sprinkles! // draw the sprinkles! Canvas Drawing

    sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f, cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) } }
  88. sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f,

    cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f, cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) // draw the sprinkles! // draw the sprinkles! Canvas Drawing sprinkles.forEach { sprinkles.forEach { } } // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy)
  89. sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f,

    cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f, cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) // draw the sprinkles! // draw the sprinkles! Canvas Drawing sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) } }
  90. sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f,

    cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f, cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) // draw the sprinkles! // draw the sprinkles! Canvas Drawing sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) // restore the canvas // restore the canvas } }
  91. sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f,

    cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f, cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) // draw the sprinkles! // draw the sprinkles! Canvas Drawing sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.restore() canvas.restore() } }
  92. sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f,

    cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f, cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) // draw the sprinkles! // draw the sprinkles! Canvas Drawing sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.restore() canvas.restore() } }
  93. sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f,

    cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) sprinklePaint.color = it.color canvas.drawRoundRect( cx - 7f, cy - 22f, cx + 7f, cy + 22f, 10f, 10f, sprinklePaint) // draw the sprinkles! // draw the sprinkles! Canvas Drawing sprinkles.forEach { sprinkles.forEach { // draw the sprinkle // draw the sprinkle // restore the canvas // restore the canvas // calculate the position // calculate the position // move the canvas // move the canvas val modDistance = holeRadius + padding + (ringRadius - padding * 2) * it.distance canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.save() canvas.rotate(it.angle, cx, cy) canvas.translate(0f, modDistance) canvas.rotate(it.rotation, cx, cy) canvas.restore() canvas.restore() } }
  94. // draw the sprinkles! Canvas Drawing // draw the icing

    // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles!
  95. // draw the sprinkles! Canvas Drawing // draw the icing

    // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles!
  96. // draw the sprinkles! Canvas Drawing // draw the icing

    // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles! canvas.scale(0.5f, 0.5f, bounds.width() / 2f, bounds.height() / 2f)
  97. // draw the sprinkles! Canvas Drawing // draw the icing

    // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles! canvas.scale(0.5f, 0.5f, bounds.width() / 2f, bounds.height() / 2f) canvas.restore() canvas.save()
  98. // draw the sprinkles! Canvas Drawing // draw the icing

    // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles! canvas.restore() canvas.save() canvas.scale(0.5f, 0.5f, bounds.width() / 2f, bounds.height() / 2f)
  99. canvas.scale(scale, scale, bounds.width() / 2f, bounds.height() / 2f) canvas.scale(scale, scale,

    bounds.width() / 2f, bounds.height() / 2f) // draw the sprinkles! Canvas Drawing // draw the icing // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles! canvas.restore() canvas.save()
  100. canvas.scale(scale, scale, bounds.width() / 2f, bounds.height() / 2f) canvas.scale(scale, scale,

    bounds.width() / 2f, bounds.height() / 2f) // draw the sprinkles! Canvas Drawing // draw the icing // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles! canvas.restore() canvas.save()
  101. canvas.scale(scale, scale, bounds.width() / 2f, bounds.height() / 2f) canvas.scale(scale, scale,

    bounds.width() / 2f, bounds.height() / 2f) // draw the sprinkles! Canvas Drawing // draw the icing // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles! canvas.restore() canvas.save()
  102. // draw the sprinkles! Canvas Drawing // draw the icing

    // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles! canvas.restore() canvas.save() canvas.scale(scale, scale, bounds.width() / 2f, bounds.height() / 2f) canvas.scale(scale, scale, bounds.width() / 2f, bounds.height() / 2f)
  103. // draw the sprinkles! Canvas Drawing // draw the icing

    // draw the icing // clip the hole // Clip the hole // draw the base // draw the base // draw the sprinkles!
  104. Canvas Drawing Ryan Harter @rharter