Tweet
Tweet

Slide 1

Slide 1 text

Canvas Drawing Ryan Harter @rharter

Slide 2

Slide 2 text

Canvas Drawing

Slide 3

Slide 3 text

How Android Draws Views

Slide 4

Slide 4 text

How Android Draws Views Canvas

Slide 5

Slide 5 text

How Android Draws Views Canvas Skia

Slide 6

Slide 6 text

How Android Draws Views Canvas Skia OpenGLRenderer

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 text

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)

Slide 11

Slide 11 text

Canvas Drawing

Slide 12

Slide 12 text

Canvas Drawing

Slide 13

Slide 13 text

Canvas Drawing

Slide 14

Slide 14 text

Canvas Drawing

Slide 15

Slide 15 text

Canvas Drawing

Slide 16

Slide 16 text

Canvas Drawing

Slide 17

Slide 17 text

Canvas Drawing

Slide 18

Slide 18 text

Canvas Drawing

Slide 19

Slide 19 text

Canvas Drawing

Slide 20

Slide 20 text

Canvas Drawing

Slide 21

Slide 21 text

Canvas Drawing

Slide 22

Slide 22 text

Canvas Drawing

Slide 23

Slide 23 text

Canvas Drawing

Slide 24

Slide 24 text

Canvas Drawing

Slide 25

Slide 25 text

Canvas Drawing Circle

Slide 26

Slide 26 text

Canvas Drawing Circle Other Circle

Slide 27

Slide 27 text

Canvas Drawing

Slide 28

Slide 28 text

Canvas Drawing

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

// draw the base Canvas Drawing

Slide 39

Slide 39 text

// draw the base Canvas Drawing

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

// draw the base Canvas Drawing canvas.clipPath(holePath, Region.Op.DIFFERENCE) canvas.clipPath(holePath, Region.Op.DIFFERENCE) private val holePath = Path()

Slide 46

Slide 46 text

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()

Slide 47

Slide 47 text

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()

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

// 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

Slide 52

Slide 52 text

// 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

Slide 53

Slide 53 text

// 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

Slide 54

Slide 54 text

// clip the hole // Clip the hole // draw the base Canvas Drawing // draw the base

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

// 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)

Slide 58

Slide 58 text

// 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)

Slide 59

Slide 59 text

// 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)

Slide 60

Slide 60 text

// 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)

Slide 61

Slide 61 text

// 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)

Slide 62

Slide 62 text

// 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)

Slide 63

Slide 63 text

// 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)

Slide 64

Slide 64 text

, // 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( ) ) ,

Slide 65

Slide 65 text

, // 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( ) ) ,

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

// 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)

Slide 68

Slide 68 text

// 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)

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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!

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

// 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 } }

Slide 75

Slide 75 text

// 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 } }

Slide 76

Slide 76 text

// 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 } }

Slide 77

Slide 77 text

// 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) } }

Slide 78

Slide 78 text

// 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) } }

Slide 79

Slide 79 text

// 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) } }

Slide 80

Slide 80 text

// 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) } }

Slide 81

Slide 81 text

// 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) } }

Slide 82

Slide 82 text

// 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) } }

Slide 83

Slide 83 text

// 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) } }

Slide 84

Slide 84 text

// 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) } }

Slide 85

Slide 85 text

// 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) } }

Slide 86

Slide 86 text

// 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) } }

Slide 87

Slide 87 text

// 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) } }

Slide 88

Slide 88 text

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)

Slide 89

Slide 89 text

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) } }

Slide 90

Slide 90 text

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 } }

Slide 91

Slide 91 text

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() } }

Slide 92

Slide 92 text

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() } }

Slide 93

Slide 93 text

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() } }

Slide 94

Slide 94 text

// 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!

Slide 95

Slide 95 text

// 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!

Slide 96

Slide 96 text

// 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)

Slide 97

Slide 97 text

// 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()

Slide 98

Slide 98 text

// 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)

Slide 99

Slide 99 text

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()

Slide 100

Slide 100 text

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()

Slide 101

Slide 101 text

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()

Slide 102

Slide 102 text

// 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)

Slide 103

Slide 103 text

// 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!

Slide 104

Slide 104 text

Canvas Drawing Ryan Harter @rharter