How to draw a Rectangle to position of face?

Question

I am making a face detection app, with each frame from the camera preview, I get all the faces on that frame. It works well, I got all faces with the position of the landmark for each face.

Now, I draw a Rectangle to the position I received on that each frame. I have a problem, my Rectangle does not match face

Here is a screenshot:

I think position I received is of image, not on screen.

This is code i get position:

.addOnSuccessListener {
                    val faceId = ArrayList<Int>()
                    //get all face
                    for (i in it) {

                        // landmark (mouth, ears, eyes, cheeks, and nose available)
                        drawLandmarkRect(i)
                        drawLandmarkPosition(i, FirebaseVisionFaceLandmark.BOTTOM_MOUTH)
                        drawLandmarkPosition(i, FirebaseVisionFaceLandmark.LEFT_EAR)
                        drawLandmarkPosition(i, FirebaseVisionFaceLandmark.RIGHT_EAR)
                        drawLandmarkPosition(i, FirebaseVisionFaceLandmark.NOSE_BASE)
                        drawLandmarkPosition(i, FirebaseVisionFaceLandmark.LEFT_MOUTH)
                        drawLandmarkPosition(i, FirebaseVisionFaceLandmark.RIGHT_MOUTH)
                        drawLandmarkPosition(i, FirebaseVisionFaceLandmark.LEFT_CHEEK)
                        drawLandmarkPosition(i, FirebaseVisionFaceLandmark.RIGHT_CHEEK)

                    }
                    activity.graphicOverlay.drawAgain()
                    activity.checkMlCallback = 1
                    imageYUV.close()
                }

This is code of function drawLandmarkRect, drawLandmarkPosition:

fun drawLandmarkRect(face: FirebaseVisionFace){
    activity.graphicOverlay.rect.add(face.boundingBox)
}

fun drawLandmarkPosition(face: FirebaseVisionFace, idLandmark: Int){
    val pos = face.getLandmark(idLandmark)?.position
    pos?.let{
        activity.graphicOverlay.pX.add(it.x)
        activity.graphicOverlay.pY.add(it.y)
    }
}

This is code i draw:

class GraphicOverlay(context: Context=): View(context) {

private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
var pX = ArrayList<Float>()
var pY = ArrayList<Float>()
var rect = ArrayList<Rect>()

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    drawCircle(canvas); 
    drawRect(canvas)
    }
}

fun drawCircle(canvas: Canvas){
    for (item in 0 until pX.size){
        canvas.drawCircle(pX[item], pY[item], 5f, paint)
    }
}

fun drawRect(canvas: Canvas){
    paint.apply {
        strokeWidth = 3f
        style = Paint.Style.STROKE
        color = Color.parseColor("#fdc51162")
    }
    for (item in rect){
        canvas.drawRect(item, paint)
    }
}

fun drawAgain(){
    postInvalidate()
  }
}

What should I do?

Answer 1

Sloved:

Problem is i division width, height with a number when create a newInstance ImageReader:

imageReader = ImageReader.newInstance(camOutputSizeWidth/quality, camOutputSizeHeight/quality, ImageFormat.YUV_420_888, 1)

Answer 2

You can use Canvas to draw rectangle on face check it, it may work for you.