Cropping a Canvas Before Returning From OnDraw

Nathan Sokalski 4,116

I have a custom View in which I override the OnDraw method. Before returning the Canvas, I want to crop it, but I cannot find a way to do this. SetViewport does not work, and none of the .Clip* methods seem to do anything. How can I control what part of the Canvas is actually used?

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 35,806 Microsoft Vendor

Do you mean that how to clip Canvas in Android?

If so, after Android API 26, Google has been released Clip methods for Canvas, you can refer to this documentation Canvas Public methods to get more details.

You could also use the following code to crop:

protected override void OnDraw(Canvas canvas)
{
    base.OnDraw(canvas);
    var bitmap = Bitmap.CreateBitmap(bitmapImage.Width, bitmapImage.Height, Bitmap.Config.Argb8888);
    canvas.SetBitmap(bitmap);
    var paint = new Paint(PaintFlags.AntiAlias);
    canvas.DrawCircle(100.0f, 100.0f, 50.0f, paint);
    paint.SetXfermode(new PorterDuffXfermode(PorterDuff.Mode.SrcOut));
    canvas.DrawBitmap(bitmap, 0, 0, paint);
}

Nathan Sokalski 4,116 Reputation points

2022-04-29T18:13:01.087+00:00
As I said in my original post, the .Clip* methods seem to be getting ignored. For example, the following lines have no effect on my result:

canvas.ClipPath(AndroidX.Core.Graphics.PathParser.CreatePathFromPathData("M0 0H220V220H0Z")); canvas.ClipOutRect(0, 0, 400, 400);

Is there something wrong with this code? I'm not sure I understand your code, what is the Bitmap you are creating? Where does your bitmapImage variable come from? Are there any tutorials on clipping and/or cropping? I looked at

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/curves/clipping

But that seems like it is more for bitmaps as well. What should I do?
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 35,806 Reputation points Microsoft Vendor

2022-05-02T01:26:19.793+00:00

Are you using HC or above or otherwise using hardware acceleration?

If so, the method ClipPath is unsupported and problematic.

You can refer to Hardware acceleration to get more details.

In addition, ClipRect means:

Intersect the current clip with the specified rectangle, which is expressed in local coordinates.

For this reason, you need to use Canvas.save（）/restore（） to save modifications to the matrix/clip state.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 35,806 Reputation points Microsoft Vendor

2022-05-06T07:59:27.297+00:00

May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.
Nathan Sokalski 4,116 Reputation points

2022-05-06T15:45:31.003+00:00

I haven't actually attempted to use the Save/Restore methods yet, but I managed to achieve my goal by using the Translate method to crop the top/left, and a combination of the Scale method & manually scaling the coordinates to crop the bottom/right. But I will be sure to keep Save & Restore in mind if my solution stops working & the next time I have a similar task. Thanks for your help!