Saturday 26 September 2020

How to draw lines on an ImageView using canvas which are unaffected by zooming or scaling?

I am drawing lines on an ImageView by doing something like this:

    Bitmap imageBitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
    Bitmap duplicateBitmap = Bitmap.createBitmap(imageBitmap.getWidth(),imageBitmap.getHeight(),Bitmap.Config.RGB_565);

    Canvas targetCanvas = new Canvas(duplicateBitmap);
    targetCanvas.drawBitmap(imageBitmap,0,0,null);
    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStrokeWidth(3f);
    targetCanvas.drawLine(0f,100f, imageBitmap.getWidth(),100f,paint);
    imageView.setImageDrawable(new BitmapDrawable(getResources(),duplicateBitmap));

Which looks okay when not zoomed in.

But when I zoom in the line becomes thick. (Which is expected behavior)

Now, how to draw lines on an image view so that when the user zooms in the thickness of the line is unaffected?

P.S: I tried "zooming in" the image first and then draw lines on the image. (upon button click or something). But that didn't work, the line was still very thick.

I also found that when the image is of lower resolution the drawn lines are thicker. So I assume that drawing on an image is somehow related to image resolution too.

I was thinking of masking the ImageView with a high res canvas but that would be memory inefficient. Also, I am clueless about how to actually implement this.

I somehow believe that this thread has answers to my question but I am totally unaware of JavaScript. Also, I think the answers to this question can solve my problem.

Kotlin or Java will both will work for me



from How to draw lines on an ImageView using canvas which are unaffected by zooming or scaling?

No comments:

Post a Comment