iOS Load CGImage into CGLayer and draw on top

Question

I need to load an image into a CGLayer and draw some paths over it.

The below code doesn't quite work: it doesn't allow me to draw the paths over the image (there are gaps in the paths). Please see the below image. The black square is an image and the dotted red line is a path drawn over it. You can see that if I just draw into the view alongside the image, the paths display correctly

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
    float scale = [UIScreen mainScreen].scale;
    CGRect bounds = CGRectMake(0, 0, rect.size.width *scale, rect.size.height *scale);

    if(layer == nil)
    {
        layer = CGLayerCreateWithContext(context, bounds.size, NULL);
        layerContext = CGLayerGetContext(layer);
        CGContextScaleCTM(layerContext, scale, scale);
        viewRect = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
    }

    CGContextSaveGState(layerContext);
    UIGraphicsBeginImageContext (bounds.size);
    UIImage *image = [UIImage imageNamed:@"testimage.png"];
    CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);

    CGContextTranslateCTM(layerContext, 0, image.size.height);
    CGContextScaleCTM(layerContext, 1.0, -1.0);
    CGContextDrawImage(layerContext, imageRect, image.CGImage);
    UIGraphicsEndImageContext();


    CGContextRestoreGState(layerContext);
    UIBezierPath *bezierPath = path.bezierPath;
    CGContextAddPath(layerContext, bezierPath.CGPath);
    CGContextSetLineWidth(layerContext, path.width);
    CGContextSetStrokeColorWithColor(layerContext, path.color.CGColor);
    CGContextSetLineCap(layerContext, kCGLineCapRound);
    CGContextStrokePath(layerContext);


    CGContextDrawLayerInRect(context, viewRect, layer);


    self.empty = NO;
}

Answer 1

Solution:

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
    float scale = [UIScreen mainScreen].scale;
    CGRect bounds = CGRectMake(0, 0, rect.size.width *scale, rect.size.height *scale);

    if(layer == nil)
    {
        layer = CGLayerCreateWithContext(context, bounds.size, NULL);
        layerContext = CGLayerGetContext(layer);
        CGContextScaleCTM(layerContext, scale, scale);
        viewRect = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);

        CGContextSaveGState(layerContext);
        UIImage *image = [UIImage imageNamed:@"image.png"];
        UIGraphicsBeginImageContext (image.size);
        CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);
        CGContextTranslateCTM(layerContext, 0, image.size.height);
        CGContextScaleCTM(layerContext, 1.0, -1.0);
        CGContextDrawImage(layerContext, imageRect, image.CGImage);
        UIGraphicsEndImageContext();
        CGContextRestoreGState(layerContext);
    }

    UIBezierPath *bezierPath = path.bezierPath;
    CGContextAddPath(layerContext, bezierPath.CGPath);
    CGContextSetLineWidth(layerContext, path.width);
    CGContextSetStrokeColorWithColor(layerContext, path.color.CGColor);
    CGContextSetLineCap(layerContext, kCGLineCapRound);
    CGContextStrokePath(layerContext);

    CGContextDrawLayerInRect(context, viewRect, layer);

    self.empty = NO;
}