Canvas Drawing

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

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