Require help to crop an image area with rectangle box (like in WhatsApp image crop with gridlines)

TauseefssTauseefss USMember

Hi Folks,
We required some urgent help for one of the implementations of a feature in our Xamarin iOS app.
While trying to crop an image (we have completed the cropping part with translucent background while cropping the image),
we are facing difficulties in achieving the look and feel of a grid lines rectangle box over the cropping area.

The only thing we need right now is to incorporate the rectangle box over the crop area for better usability and to maintain the aspect ratio while cropping.
Any suggestion or help would be greatly appreciated. If anyone can point us in the right direction with an example piece or some brief explanation will be great.

Answers

  • TedRogersTedRogers USMember ✭✭✭✭

    @Tauseefss I would need to understand how you are doing the transparent rectangle. Possibly how you implemented that is making drawing the grid and corner handles more difficult. This is how I would do it and have done it minus the corners and grid.
    1. Put a view over top of your UIImageView and constrain leading, trailing, top, bottom so it is same size and position. I call mine HolyView. :smile:
    2. Make its background transparent.
    3. Implement Draw() to handle drawing of your the rectangular hole and grid and corners. I use a circle as I am doing it for profile pictures.

    My draw code looks like below. After doing ClearRect below, I would draw the gridlines and corner handles. I hope this helps.

    public override void Draw(CGRect rect)
    {
        //get graphics context
        using (CGContext g = UIGraphics.GetCurrentContext())
        {
            var holyRect = GetTransformedHolyRect();
            var fillColor = UIColor.FromRGBA(0f, 0f, 0f, 0.5f);
            g.SetFillColor(fillColor.CGColor);
            g.FillRect(rect);
    
            g.AddEllipseInRect(holyRect);
            g.Clip();
            g.ClearRect(holyRect);
        }
    }
    
Sign In or Register to comment.