add onTouchEvent()

Author: solygambas

22-minipaint/README.md

@@ -2,15 +2,15 @@
 
 A simple line drawing app, using a canvas.
 
-<!-- <p align="center">
+<p align="center">
 <img src="screenshot.png" style="width:528px;max-width: 100%;">
-</p> -->
+</p>
 
 ## Features
 
 - creating a custom view for drawing.
 - displaying the canvas.
 - setting up a paint and a path for drawing.
-- drawing following the user's touch.
+- drawing following the user's touch with onTouchEvent().
 
 Based on [Drawing on Canvas Objects](https://developer.android.com/codelabs/advanced-android-kotlin-training-canvas#0) by Google Codelabs (2022).

22-minipaint/app/src/main/java/com/hfad/minipaint/MyCanvasView.kt

@@ -1,26 +1,91 @@
 package com.hfad.minipaint
 
 import android.content.Context
-import android.graphics.Bitmap
-import android.graphics.Canvas
+import android.graphics.*
+import android.view.MotionEvent
 import android.view.View
+import android.view.ViewConfiguration
 import androidx.core.content.res.ResourcesCompat
 
+private const val STROKE_WIDTH = 12f
+
 class MyCanvasView(context: Context) : View(context) {
     private lateinit var extraCanvas: Canvas
     private lateinit var extraBitmap: Bitmap
+    private lateinit var frame: Rect
     private val backgroundColor = ResourcesCompat.getColor(resources, R.color.colorBackground, null)
+    private val drawColor = ResourcesCompat.getColor(resources, R.color.colorPaint, null)
+    private val paint = Paint().apply {
+        color = drawColor
+        isAntiAlias = true
+        isDither = true
+        style = Paint.Style.STROKE
+        strokeJoin = Paint.Join.ROUND
+        strokeCap = Paint.Cap.ROUND
+        strokeWidth = STROKE_WIDTH
+    }
+    private val touchTolerance = ViewConfiguration.get(context).scaledTouchSlop
 
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
         super.onSizeChanged(w, h, oldw, oldh)
         if (::extraBitmap.isInitialized) extraBitmap.recycle() // avoid memory leak
         extraBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
         extraCanvas = Canvas(extraBitmap)
         extraCanvas.drawColor(backgroundColor)
+        // add a rectangular frame
+        val inset = 40
+        frame = Rect(inset, inset, w - inset, h - inset)
+        extraCanvas.drawRect(frame, paint)
     }
 
     override fun onDraw(canvas: Canvas) {
         super.onDraw(canvas)
         canvas.drawBitmap(extraBitmap, 0f, 0f, null)
     }
+
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        motionTouchEventX = event.x
+        motionTouchEventY = event.y
+
+        when (event.action) {
+            MotionEvent.ACTION_DOWN -> touchStart()
+            MotionEvent.ACTION_MOVE -> touchMove()
+            MotionEvent.ACTION_UP -> touchUp()
+        }
+        return true
+    }
+
+    private fun touchStart() {
+        path.reset()
+        path.moveTo(motionTouchEventX, motionTouchEventY)
+        currentX = motionTouchEventX
+        currentY = motionTouchEventY
+    }
+
+    private fun touchMove() {
+        val dx = Math.abs(motionTouchEventX - currentX)
+        val dy = Math.abs(motionTouchEventY - currentY)
+        if (dx >= touchTolerance || dy >= touchTolerance) {
+            // QuadTo() adds a quadratic bezier from the last point,
+            // approaching control point (x1,y1), and ending at (x2,y2).
+            path.quadTo(currentX, currentY, (motionTouchEventX + currentX) / 2, (motionTouchEventY + currentY) / 2)
+            currentX = motionTouchEventX
+            currentY = motionTouchEventY
+            // Draw the path in the extra bitmap to cache it.
+            extraCanvas.drawPath(path, paint)
+        }
+        invalidate()
+    }
+
+    private fun touchUp() {
+        path.reset()
+    }
+
+    companion object {
+        private var path = Path()
+        private var motionTouchEventX = 0f
+        private var motionTouchEventY = 0f
+        private var currentX = 0f
+        private var currentY = 0f
+    }
 }