custom View to display UIImage

[melmoup]

Hi,
Yes I know there's UIImageView.
I need a custom view to display a UIImage with some clipping and other image manipulation.
So I do

- (void)drawRect:(CGRect)rect
{
    [[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:10] addClip];
    [itemImage drawInRect:rect];
    
    CGRect innerRect  = CGRectInset(rect, 10, 10);
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:10];
    
    [path appendPath:[UIBezierPath bezierPathWithRoundedRect:innerRect cornerRadius:25]];
    path.usesEvenOddFillRule = YES;
    
    [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.5] set];
    [path fill];
}

The problem is that I have to refresh the image when it's retrieved (asyncronously) from disk or web, a refresh is also needed cause this custom UIView is inside a cell of a table View.
So I have to call [self setNeedsDisplay] on those events, that works but I'm under the impression that it slowing down my scrolling.

If I use UIImageView instead, and I setImage on those events the result is much better, but I don't have my customized drawing and clipping.

Am i doing something wrong?

p.s: Same happens if I just drawrInRect image without clipping and paths.

[Duncan C]

Originally Posted by melmoup

Hi,
Yes I know there's UIImageView.
I need a custom view to display a UIImage with some clipping and other image manipulation.
So I do

- (void)drawRect:(CGRect)rect
{
    [[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:10] addClip];
    [itemImage drawInRect:rect];
    
    CGRect innerRect  = CGRectInset(rect, 10, 10);
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:10];
    
    [path appendPath:[UIBezierPath bezierPathWithRoundedRect:innerRect cornerRadius:25]];
    path.usesEvenOddFillRule = YES;
    
    [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.5] set];
    [path fill];
}

The problem is that I have to refresh the image when it's retrieved (asyncronously) from disk or web, a refresh is also needed cause this custom UIView is inside a cell of a table View.
So I have to call [self setNeedsDisplay] on those events, that works but I'm under the impression that it slowing down my scrolling.

If I use UIImageView instead, and I setImage on those events the result is much better, but I don't have my customized drawing and clipping.

Am i doing something wrong?

p.s: Same happens if I just drawrInRect image without clipping and paths.

Do you get a noticeable slowdown in scrolling with this drawRect code? Is the slowdown only when you call setNeedsDisplay? And then, is it only for the instant when it's redrawing?

It is my understanding that drawRect drawing will slow down animations if you force your view to redraw itself frequently, but that it should be ok for static drawing.

If all you're doing is clipping your image and adding a mask, you could do the same thing with layers quite easily:


theImageView.layer.cornerRadius = 10; //creates rounded corners
theImageView.layer.masksToBounds = TRUE;

Then you could create a CAShapeLayer, set it up with the CGPath from the path code you already wrote, and add the shape layer as a sublayer of the image view.