Drawing, Canvas in Kotlin

By pjain      Published Dec. 17, 2019, 7:02 a.m. in blog Programming   

Android Drawing, Canvas

Canvas - android native ..

    Views  << ImageView, ViewGroup<<LinearLayout>>
Skia    OpenGLRenderer

Skia - software pure rendering - rarely used as hw accel OpenGLRenderer - very few outside Android core AOSP use this ..

  • Why draw manually vs PNG
  • vector - eg donut scales as target canvas size changes
    • much less than having ~6 variations of png resolutions
  • High perf very little code/memory
  • easily customizable - parametric eg white frosting on donut drawing

Basic Windowing Systems

SRC: https://www.youtube.com/watch?v=H05mF0qrBVA

  • Transparency

  • Paths - where to apply a graphical operation

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

    DiscretePathEffect(60f, 25f) // <-- breaks up the

  • Clipping built in to canvas

    • Canvas will Ignore anything that intersects the clipped shape - eg donut center will be clipped - real hole!
    • By having a clipped hole .. regardless of background image, will peek through the hole!
    • clip path options canvas.clipPath(holePath, Region.Op.DIFFERENCE)
    • Region.Op.DIFFERENCE hole ie in drawing over, this is prevented from being drawn on
    • Region.Op.INTERSECT - would be draw ONLY in intersection i.e. draw in HOLE only

Canvas Drawing Approaches

  • to draw a donut with a mustache

    • Get a canvas & bounds, then in onDraw
    • Draw background eg plate - white china ..
    • Set hole path - circular relative to bounds
    • set a clipPath(holePath, Region.Op.DIFFERENCE) // to exclude
    • draw a base circle // shows donut with hole excluded - eg background
    • draw the mustache - could be a function call to reuise it ..then passing in parms, color, etc. // NOTE the mustache will be clipped by donut hole!
  • Save & Restore state of canvas - by clipping, scale, rotate, etc.. canvas.save() // <-- spply clip path -- draw base with clipped hole .. canvas.restore() now draw the mustache - it will NOT be clipped

Canvas APIs REF

  • draw Circle, Square, Oval

    canvas.clipPath(holePath, Region.Op.DIFFERENCE) // this is hole .. Region.Op.INTERSECT would be ONLY HOLE private val basePaint = Paint().apply { color = 0xFFc6853b.toInt() } canvas.drawCircle(bounds.exactCenterX(), bounds.exactCenterY(), bounds.width() / 2f, // radius basePaint)


  • Get A Canvas - inherit from a View, or custom Drawable or bitmap // from a view eg for a customView class CustomView(...) : View(...) { override fun onDraw(canvas: Canvas?) { } }

    // from ??CustomView class CustomDrawable : Drawable() { override fun draw(c: Canvas?) { } }

    // from bitmap val image = Bitmap.createBitmap(100, 100, ARGB_8888) val canvas = Canvas(image)

OpenGL, Unity ..


There are no comments yet

Add new comment

Similar posts

Serverless Computing

Android Layouts Design 101

Custom Views

Animations in Kotlin