Wrong coordinates after scaling canvas

Question

We have the red dot in (100; 100) coordinates. If we click to red dot after dragging - it will save it's (100; 100) coordinates. But if we scale in or out it will have coordinates completely different from (100; 100).

How to calculate x and y correctly after scaling?

class CanvasView(context: Context, attrs: AttributeSet?) : View(context, attrs) {

    companion object {
        private const val INVALID_POINTER_ID = -1
    }

    private var posX: Float = 0f
    private var posY: Float = 0f

    private var lastTouchX: Float = 0f
    private var lastTouchY: Float = 0f
    private var activePointerId = INVALID_POINTER_ID

    private val scaleDetector: ScaleGestureDetector
    private var scaleFactor = 1f

    private var prevMotionType = MotionEvent.ACTION_DOWN
    private var prevX = 0f
    private var prevY = 0f

    private val paint: Paint = Paint()

    constructor(mContext: Context) : this(mContext, null)

    init {
        scaleDetector = ScaleGestureDetector(context, ScaleListener())

        paint.strokeWidth = 1f
        paint.color = Color.RED
    }

    public override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.save()
        canvas.scale(scaleFactor, scaleFactor, pivotX, pivotY)
        canvas.translate(posX, posY)
        canvas.drawCircle(100f, 100f, 10f, paint)
        canvas.restore()
    }

    override fun onTouchEvent(ev: MotionEvent): Boolean {
        scaleDetector.onTouchEvent(ev)

        val action = ev.action
        when (action and MotionEvent.ACTION_MASK) {
            MotionEvent.ACTION_DOWN -> {
                val x = ev.x
                val y = ev.y

                lastTouchX = x
                lastTouchY = y
                activePointerId = ev.getPointerId(0)

                calculateIfClicked(ev)
            }

            MotionEvent.ACTION_MOVE -> {
                val pointerIndex = ev.findPointerIndex(activePointerId)
                val x = ev.getX(pointerIndex)
                val y = ev.getY(pointerIndex)

                if (!scaleDetector.isInProgress) {
                    val dx = x - lastTouchX
                    val dy = y - lastTouchY

                    posX += dx / scaleFactor
                    posY += dy / scaleFactor

                    invalidate()
                }

                lastTouchX = x
                lastTouchY = y

                calculateIfClicked(ev)
            }

            MotionEvent.ACTION_UP -> {
                activePointerId = INVALID_POINTER_ID

                calculateIfClicked(ev)
            }

            MotionEvent.ACTION_CANCEL -> {
                activePointerId = INVALID_POINTER_ID
            }

            MotionEvent.ACTION_POINTER_UP -> {
                val pointerIndex =
                    ev.action and MotionEvent.ACTION_POINTER_INDEX_MASK shr MotionEvent.ACTION_POINTER_INDEX_SHIFT
                val pointerId = ev.getPointerId(pointerIndex)
                if (pointerId == activePointerId) {
                    val newPointerIndex = if (pointerIndex == 0) 1 else 0
                    lastTouchX = ev.getX(newPointerIndex)
                    lastTouchY = ev.getY(newPointerIndex)
                    activePointerId = ev.getPointerId(newPointerIndex)
                }
            }
        }

        return true
    }

    private fun calculateIfClicked(ev: MotionEvent) {
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                prevMotionType = MotionEvent.ACTION_DOWN
                prevX = ev.x
                prevY = ev.y
            }

            MotionEvent.ACTION_MOVE -> prevMotionType = MotionEvent.ACTION_MOVE

            MotionEvent.ACTION_UP -> {
                val delta = Math.max(
                    Math.abs(Math.abs(ev.x) - Math.abs(prevX)),
                    Math.abs(Math.abs(ev.y) - Math.abs(prevY))
                )

                if (prevMotionType == MotionEvent.ACTION_DOWN ||
                    (prevMotionType == MotionEvent.ACTION_MOVE && delta < 5)
                ) {
                    val x = ev.x - posX * scaleFactor
                    val y = ev.y - posY * scaleFactor

                    Log.d("abcd", "x: $x, y: $y")
                }
            }
        }
    }

    private inner class ScaleListener : ScaleGestureDetector.SimpleOnScaleGestureListener() {
        override fun onScale(detector: ScaleGestureDetector): Boolean {
            scaleFactor *= detector.scaleFactor
            scaleFactor = Math.max(0.3f, Math.min(scaleFactor, 10.0f))

            invalidate()
            return true
        }
    }
}

x and y coordinates are wrong after scaling. They keep their position, but it's not that expected.

Answer 1

At first I decided to use this solution and it worked as expected. But then I used solution that pskink advised me to use. It simpler, shorter and rather more correct then my previous choice. Example:

interface OnMatrixChangeListener {
    fun onChange(theMatrix: Matrix)
}

class ChartView2(context: Context, attrs: AttributeSet?) : View(context, attrs), OnMatrixChangeListener {

    private var theMatrix = Matrix()
    private var detector = MatrixGestureDetector(theMatrix, this)
    private var paint = Paint()
    private var colors = intArrayOf(Color.RED, Color.GREEN, Color.BLUE)
    private var colorNames = arrayOf("RED", "GREEN", "BLUE")
    private var centers = arrayOf(PointF(100f, 100f), PointF(400f, 100f), PointF(250f, 360f))

    var inverse = Matrix()
    override fun onTouchEvent(event: MotionEvent): Boolean {
        if (event.action == MotionEvent.ACTION_DOWN) {
            theMatrix.invert(inverse)
            val pts = floatArrayOf(event.x, event.y)
            inverse.mapPoints(pts)
            for (i in colors.indices) {
                if (Math.hypot((pts[0] - centers[i].x).toDouble(), (pts[1] - centers[i].y).toDouble()) < 100)
                    Log.d("abcd", colorNames[i] + " circle clicked")
            }
        }
        detector.onTouchEvent(event)
        return true
    }

    override fun onDraw(canvas: Canvas) {
        canvas.concat(theMatrix)
        for (i in colors.indices) {
            paint.color = colors[i]
            canvas.drawCircle(centers[i].x, centers[i].y, 100f, paint)
        }
    }

    override fun onChange(theMatrix: Matrix) {
        invalidate()
    }
}

internal class MatrixGestureDetector(private val mMatrix: Matrix, listener: OnMatrixChangeListener) {

    private var ptpIdx = 0
    private val mTempMatrix = Matrix()
    private val mListener: OnMatrixChangeListener?
    private val mSrc = FloatArray(4)
    private val mDst = FloatArray(4)
    private var mCount: Int = 0

    init {
        this.mListener = listener
    }

    fun onTouchEvent(event: MotionEvent) {
        if (event.pointerCount > 2) {
            return
        }

        val action = event.actionMasked
        val index = event.actionIndex

        when (action) {
            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_POINTER_DOWN -> {
                val idx = index * 2
                mSrc[idx] = event.getX(index)
                mSrc[idx + 1] = event.getY(index)
                mCount++
                ptpIdx = 0
            }

            MotionEvent.ACTION_MOVE -> {
                for (i in 0 until mCount) {
                    val idx = ptpIdx + i * 2
                    mDst[idx] = event.getX(i)
                    mDst[idx + 1] = event.getY(i)
                }
                mTempMatrix.setPolyToPoly(mSrc, ptpIdx, mDst, ptpIdx, mCount)
                mMatrix.postConcat(mTempMatrix)
                mListener?.onChange(mMatrix)
                System.arraycopy(mDst, 0, mSrc, 0, mDst.size)
            }

            MotionEvent.ACTION_UP, MotionEvent.ACTION_POINTER_UP -> {
                if (event.getPointerId(index) == 0) ptpIdx = 2
                mCount--
            }
        }
    }
}