Question

‘m developing an application in which I’m pasting images, doing drawing and painting on canvas. This app can also Scale up/down the canvas or drag it to different location. My problem is: I can’t get the correct canvas coordinates after scaling or dragging the canvas. I want to draw finger paint after the canvas is scaled or dragged but unable to retrieve the right place where i’ve touched…

@Override
public boolean onTouchEvent(MotionEvent event) {

    scaleListener.onTouchEvent(event);

    synchronized(thread.getSurfaceHolder()){

        switch ( event.getAction() & MotionEvent.ACTION_MASK ){

            case MotionEvent.ACTION_DOWN :
                // Remember our initial down event location.
                savedMatrix.set(m_matrix);
                start.set(event.getX() , event.getY());
                mode = DRAG;                
            break;

            case MotionEvent.ACTION_POINTER_DOWN :

                oldDist = spacing(event);
                if (oldDist > 10f) {

                    savedMatrix.set(m_matrix);
                    m_matrix.getValues(matrixValues);
                    midPoint(mid, event);
                    mode = ZOOM;
                }

             break;

            case MotionEvent.ACTION_UP :
            case MotionEvent.ACTION_POINTER_UP :
                    mode = NONE;

            break;

            case MotionEvent.ACTION_MOVE :

                if(mode==DRAG && isDragAllowd){
                        m_matrix.set(savedMatrix);
                        rebound(event.getX() , event.getY());
                }
                else if(mode==ZOOM){

                    float newDist = spacing(event);
                    if (newDist > 10f){

                            m_matrix.set(savedMatrix);

                            float scale = newDist/oldDist;
                            m_matrix.getValues(matrixValues);
                            float currentScale = matrixValues[Matrix.MSCALE_X];

                            // limit zoom
                            if (scale * currentScale > maxZoom){
                                    scale = maxZoom / currentScale;
                                    //scale = maxZoom;
                            }
                            else if (scale * currentScale < minZoom){
                                    scale = minZoom / currentScale;
                                    //scale = minZoom;
                            }

                            m_matrix.postScale(scale, scale, mid.x, mid.y);
                            m_matrix.getValues(matrixValues);

                  }

            }
       break;

    }

    return true; //done with this event so consume it


    }       

}

@Override
protected void onDraw(Canvas canvas){
    super.onDraw(canvas);

            canvas.drawColor(Color.WHITE);
        canvas.drawBitmap(currentBitmap, m_matrix, null);
        c2.drawColor(Color.BLACK); 
        commandManager.executeAll(c2); // Drawing all the Paints on Canvas c2
        // Overlay bitmap it's a transparent layour 
            canvas.drawBitmap(overlayBitmap, 0, 0, pTouch);

}

when user zoom the bitmap he is not able to draw over it , after zooming drawing doesn’t happen at proper place.

Answer 1

use the following equation for transformed the points, after that user will not face an any difficulty painting during zoom or after scrolling.

 float f1 = (( motionEvent.getX() - m_transformedPoints[0] )/( m_transformedPoints[2] - m_transformedPoints[0] ))*currentBitmapWidth;
     float f2 = (( motionEvent.getY() - m_transformedPoints[1] )/( m_transformedPoints[3] - m_transformedPoints[1] ))*currentBitmapHeight; 

    //calculate the transformed view in onDraw Method
    this.m_transformedPoints[0] = 0.0F;
    this.m_transformedPoints[1] = 0.0F;
    this.m_transformedPoints[2] = currentBitmapWidth;
    this.m_transformedPoints[3] = currentBitmapHeight;
    this.m_matrix.mapPoints(this.m_transformedPoints);