How to draw four boundary corner in canvas for qr code scanner

Question

I need to draw in canvas four boundary corner for qr code scanner. Here is example (I need to draw this four blue boundary corner).

I know how to draw rectangle:

 val rectF = RectF(left, top, right, bottom)
            canvas.drawRoundRect(rectF, radius, radius, paint)

But it is possible to draw only for boundary corners (without edge).

Please, help me.

Answer 1

You can achieve it by simply using the drawPath() method of Canvas ::

Use the below method to draw boundaries with rounded corners :

fun drawBoundaries(canvas: Canvas) {

    val paint = Paint()
    paint.color = Color.RED
    paint.style = Paint.Style.STROKE
    paint.strokeWidth = 20f
    paint.isAntiAlias = true

    // Adjust according to your requirements..
    val length = canvas.width * 0.25f
    val corner = length * 0.25f
    val left = 50f
    val top = 50f
    val right = canvas.width - 50f
    val bottom = canvas.height - 50f

    val path = Path()

    // Top-Left corner..
    path.moveTo(left, top + length)
    path.lineTo(left, top + corner)
    path.cubicTo(left, top + corner, left, top, left + corner, top)
    path.lineTo(left + length, top)

    // Top-Right corner..
    path.moveTo(right - length, top)
    path.lineTo(right - corner, top)
    path.cubicTo(right - corner, top, right, top, right, top + corner)
    path.lineTo(right, top + length)

    // Bottom-Right corner..
    path.moveTo(right, bottom - length)
    path.lineTo(right, bottom - corner)
    path.cubicTo(right, bottom - corner, right, bottom, right - corner, bottom)
    path.lineTo(right - length, bottom)

    // Bottom-Left corner..
    path.moveTo(left + length, bottom)
    path.lineTo(left + corner, bottom)
    path.cubicTo(left + corner, bottom, left, bottom, left, bottom - corner)
    path.lineTo(left, bottom - length)

    // Draw path..
    canvas.drawPath(path, paint)
}

Answer 2

One way is just to draw eight lines in the right pattern

val lengthF = 100.0f // Length of stand out from corners

canvas.drawLine(left,top, left + lengthF, top, paint) // Top Left to right
canvas.drawLine(left,top, left, top + lengthF, paint) // Top Left to bottom
canvas.drawLine(right,top, right - lengthF, top, paint) // Top Right to left
canvas.drawLine(right,top, right, top + lengthF, paint) // Top Right to Bottom
canvas.drawLine(left,bottom, left + lengthF, bottom, paint) // Bottom Left to right
canvas.drawLine(left,bottom, left, bottom - lengthF, paint) // Bottom Left to top
canvas.drawLine(right,bottom, right - lengthF, bottom, paint) // Bottom right to left
canvas.drawLine(right,bottom, right, bottom - lengthF, paint) // Bottom right to top

Update for rounded corners keeping it to API level 1

val paint = Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);

val lengthF = 40.0f; // Standout of straight part
val radius = 20f;

canvas.drawLine(left + radius, top, left + lengthF, top, paint) // Top Left to right
canvas.drawLine(left,top + radius, left, top + lengthF, paint) // Top Left to bottom
val rectTL = RectF(left,top, left + (radius*2), top + (radius*2))
canvas.drawArc(rectTL,180f, 90f, false, paint);

canvas.drawLine(right - radius,top, right - lengthF, top, paint); // Top Right to left
canvas.drawLine(right,top + radius, right, top + lengthF, paint); // Top Right to Bottom
val rectTR = RectF(right - (radius*2),top, right, top + (radius*2));
canvas.drawArc(rectTR,270f, 90f, false, paint);

canvas.drawLine(left + radius,bottom, left + lengthF, bottom, paint); // Bottom Left to right
canvas.drawLine(left,bottom - radius, left, bottom - lengthF, paint); // Bottom Left to top
val rectBL = RectF(left,bottom - (radius*2), left + (radius*2), bottom);
canvas.drawArc(rectBL,90f, 90f, false, paint);

canvas.drawLine(right - radius,bottom, right - lengthF, bottom, paint); // Bottom right to left
canvas.drawLine(right,bottom - radius, right, bottom - lengthF, paint); // Bottom right to top
val rectBR = RectF(right - (radius*2),bottom - (radius*2), right, bottom);
canvas.drawArc(rectBR,0f, 90f, false, paint);

Can do similar with a Path