How can i handle the rotation issue with Preview & FaceDetection

Question

i got some issue nagging me for quite some time now.

I got my custom Camera-App that shows a live Preview. Aswell i am using the FaceDetection for getting a better focus on peoples faces. When i check my taken Pictures in Gallery i can see the Rectangle correctly. The next step is to make the FaceDetection-Rectangle visible in the Live-Preview. So i decided to use a canvas that gets the coordinates from the Preview-Rectangle and transform them to coordinates that can be used by the canvas.

My problem is that i had to rotate the Preview by 90degrees that it shows the Preview correctly. So when i also rotate the View of the canvas before i draw it, the rectangle shows correctly and moves the right axis aswell. BUT the rectangle can move out of screen on left and right, and only uses about half of the available height. I assume that the rotating causes the trouble, but i can't manage to put things right. Someone got an idea?

Screenshot (i added purple lines to show the top/bottom-parts that cant be reached by red rectangle):

Preview:

        mCamera = Camera.open();
        mCamera.getParameters();
        mCamera.setDisplayOrientation(90);          
        mCamera.setFaceDetectionListener(new FaceDetectionListener() {

            @Override
            public void onFaceDetection(Face[] faces, Camera camera) {

                        if(mDraw != null) {
                            mDraw.update(f.rect, f);
                        }
                    }
                }
            }
        });
        mCamera.startFaceDetection();
}

private DrawOnTop  mDraw = null;
public void setDrawOnTop(DrawOnTop d) {
    this.mDraw = d;
}

DrawOnTop:

public DrawOnTop(Context context) {
    super(context);
    myColor = new Paint();

    myColor.setStyle(Paint.Style.STROKE);
    myColor.setColor(Color.RED);
}

@Override
protected void onDraw(Canvas canvas) {
        rect.set((((rect.left+1000)*1000) / WIDTH_DIVISOR),(((rect.top+1000)*1000) / HEIGHT_DIVISOR),(((rect.right+1000)*1000) / WIDTH_DIVISOR),(((rect.bottom+1000)*1000) / HEIGHT_DIVISOR ));         
        setRotation(90);
        canvas.drawRect(rect, myColor);
}

public void update(Rect rect, Face face) {
    this.invalidate();
    this.rect = rect;
    this.face = face;
}

----------------------------------------------------------------------------------------

---

EDIT: i came to the conclusion that this is a rare but known bug and that there is so far no other solution but forcing the application to landscape-mode. Works ok, but dimensions look a bit stretched or clinched depending on which perspective the user is operating.

Answer 1

EDIT: I misread the question and talked about the wrong rectangle. This is what i meant:

Basically, you just need to scale the purple rectangle. Find ut where it is defined, then put it onto a canvas and do the following:

float screenWidth = /*get the width of your screen here*/;
float xScale = rect.width / screenWidth;

float screenHeight = /*get the height of your screen here*/;
float yScale = rect.height / screenWidth;

canvas.setScaleX(xScale);
canvas.setScaleY(yScale);

This way, the coordinates will be translated properly.

SECOND EDIT (in response to your comment): You can also do this with views, if you like. Have fun.