How to render a CALayer in the background - ios

I need to save screenshots from my app, so I've set up code like this, which works:
- (void)renderScreen {
UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
CGSize outputSize = keyWindow.bounds.size;
UIGraphicsBeginImageContext(outputSize);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CALayer *layer = [keyWindow layer];
[layer renderInContext:context];
CGContextRestoreGState(context);
UIImage *screenImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// now save the screen image, etc...
}
However, when the screen image becomes complex (lots of views), the renderInContext can take up to 0.8 seconds on an iPad 3, and the user interface locks up during that time, which interferes with some other functionality. So I moved the rendering to a background thread, like this:
- (void)renderScreen {
UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
CALayer *layer = [keyWindow layer];
[self performSelectorInBackground:#selector(renderLayer:) withObject:layer];
}
- (void)renderLayer:(CALayer *)layer {
UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
CGSize outputSize = keyWindow.bounds.size;
UIGraphicsBeginImageContext(outputSize);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
[layer renderInContext:context];
CGContextRestoreGState(context);
UIImage *screenImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// now save the screen image, etc...
}
That allows the interface to run smoothly again, but occasionally causes a crash with EXC_BAD_ACCESS on the renderInContext line. I tried checking for layer!=nil and [layer respondsToSelector:#selector(renderInContext:)] first, so I could avoid the crash, but both conditions always return true.
Then I read this SO comment, stating that a layer could mutate before the background operation runs and suggesting sending a copy of the layer to the background operation instead. This SO answer and this one got me started, and I ended up with this category to add a copy method to CALayer:
#import "QuartzCore/CALayer.h"
#interface CALayer (CALayerCopyable)
- (id)copy;
#end
#implementation CALayer (CALayerCopyable)
- (id)copy {
CALayer *newLayer = [CALayer layer];
newLayer.actions = [self.actions copy];
newLayer.anchorPoint = self.anchorPoint;
newLayer.anchorPointZ = self.anchorPointZ;
newLayer.backgroundColor = self.backgroundColor;
//newLayer.backgroundFilters = [self.backgroundFilters copy]; // iOS 5+
newLayer.borderColor = self.borderColor;
newLayer.borderWidth = self.borderWidth;
newLayer.bounds = self.bounds;
//newLayer.compositingFilter = self.compositingFilter; // iOS 5+
newLayer.contents = [self.contents copy];
newLayer.contentsCenter = self.contentsCenter;
newLayer.contentsGravity = [self.contentsGravity copy];
newLayer.contentsRect = self.contentsRect;
//newLayer.contentsScale = self.contentsScale; // iOS 4+
newLayer.cornerRadius = self.cornerRadius;
newLayer.delegate = self.delegate;
newLayer.doubleSided = self.doubleSided;
newLayer.edgeAntialiasingMask = self.edgeAntialiasingMask;
//newLayer.filters = [self.filters copy]; // iOS 5+
newLayer.frame = self.frame;
newLayer.geometryFlipped = self.geometryFlipped;
newLayer.hidden = self.hidden;
newLayer.magnificationFilter = [self.magnificationFilter copy];
newLayer.mask = [self.mask copy]; // property is another CALayer
newLayer.masksToBounds = self.masksToBounds;
newLayer.minificationFilter = [self.minificationFilter copy];
newLayer.minificationFilterBias = self.minificationFilterBias;
newLayer.name = [self.name copy];
newLayer.needsDisplayOnBoundsChange = self.needsDisplayOnBoundsChange;
newLayer.opacity = self.opacity;
newLayer.opaque = self.opaque;
newLayer.position = self.position;
newLayer.rasterizationScale = self.rasterizationScale;
newLayer.shadowColor = self.shadowColor;
newLayer.shadowOffset = self.shadowOffset;
newLayer.shadowOpacity = self.shadowOpacity;
newLayer.shadowPath = self.shadowPath;
newLayer.shadowRadius = self.shadowRadius;
newLayer.shouldRasterize = self.shouldRasterize;
newLayer.style = [self.style copy];
//newLayer.sublayers = [self.sublayers copy]; // this line makes the screen go blank
newLayer.sublayerTransform = self.sublayerTransform;
//newLayer.superlayer = self.superlayer; // read-only
newLayer.transform = self.transform;
//newLayer.visibleRect = self.visibleRect; // read-only
newLayer.zPosition = self.zPosition;
return newLayer;
}
#end
Then I updated renderScreen to send a copy of the layer to renderLayer:
- (void)renderScreen {
UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];
CALayer *layer = [keyWindow layer];
CALayer *layerCopy = [layer copy];
[self performSelectorInBackground:#selector(renderLayer:) withObject:layerCopy];
}
When I run this code, all the screen images are plain white. Obviously my copy method is not correct. So can someone help me with any of the following possible solutions?
How to write a copy method for CALayer that really works?
How to check that a layer passed into a background process is a valid target for renderInContext?
Any other way to render complex layers without locking up the interface?
UPDATE: I rewrote my CALayerCopyable category based on Rob Napier's suggestion to use initWithLayer. Simply copying the layer still gave me a plain white output, so I added a method to recursively copy all the sublayers. I still, however, get the plain white output:
#import "QuartzCore/CALayer.h"
#interface CALayer (CALayerCopyable)
- (id)copy;
- (NSArray *)copySublayers:(NSArray *)sublayers;
#end
#implementation CALayer (CALayerCopyable)
- (id)copy {
CALayer *newLayer = [[CALayer alloc] initWithLayer:self];
newLayer.sublayers = [self copySublayers:self.sublayers];
return newLayer;
}
- (NSArray *)copySublayers:(NSArray *)sublayers {
NSMutableArray *newSublayers = [NSMutableArray arrayWithCapacity:[sublayers count]];
for (CALayer *sublayer in sublayers) {
[newSublayers addObject:[sublayer copy]];
}
return [NSArray arrayWithArray:newSublayers];
}
#end

For this purpose, I'd use initWithLayer: rather than creating your own copy method. initWithLayer: is explicitly for creating "shadow copies of layers, for example, for the presentationLayer method."
You may also need to create copies of the sublayers. I can't remember immediately whether initWithLayer: does that for you. But initWithLayer: is how Core Animation works, so it's optimized for problems like this.

Related

iOS UIImageView memory not getting deallocated on ARC

I want to animate an image view in circular path and on click of image that image view need to change the new image. My problem is the images i allocated to the image view is not deallocated. And app receives memory warning and crashed. I surfed and tried lot of solutions for this problem but no use. In my case i need to create all ui components from Objective c class. Here am posting the code for creating image view and animation.
#autoreleasepool {
for(int i= 0 ; i < categories.count; i++)
{
NSString *categoryImage = [NSString stringWithFormat:#"%#_%ld.png",[categories objectAtIndex:i],(long)rating];
if (paginationClicked) {
if([selectedCategories containsObject:[categories objectAtIndex:i]]){
categoryImage = [NSString stringWithFormat:#"sel_%#",categoryImage];
}
}
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [self.mySprites objectForKey:categoryImage];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.clipsToBounds = NO;
[imageView sizeToFit];
imageView.accessibilityHint = [categories objectAtIndex:i];
// imageView.frame = CGRectMake(location.x+sin(M_PI/2.5)*(self.view.frame.size.width*1.5),location.y+cos(M_PI/2.5)*(self.view.frame.size.width*1.5) , 150, 150);
imageView.userInteractionEnabled = YES;
imageView.multipleTouchEnabled = YES;
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self
action:#selector(categoryTapGestureCaptured:)];
singleTap.numberOfTapsRequired = 1;
[imageView addGestureRecognizer:singleTap];
[categoryView addSubview:imageView];
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:location
radius:self.view.frame.size.width*1.5
startAngle:0.8
endAngle:-0.3+(0.1*(i+1))
clockwise:NO];
animation.path = path.CGPath;
imageView.center = path.currentPoint;
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
animation.duration = 1+0.25*i;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
// Apply it
[imageView.layer addAnimation:animation forKey:#"animation.trash"];
}
}
And this is the code to change the image on click.
for (UIImageView *subview in subviews) {
NSString *key = [NSString stringWithFormat:#"%#_%ld.png",subview.accessibilityHint,(long)rating];
if ([SelectedCategory isEqualToString:subview.accessibilityHint]) {
NSString *tempSubCategory = [categoryObj objectForKey:SelectedCategory];
if([selectedCategories containsObject:SelectedCategory]){
subview.image = [self.mySprites objectForKey:key];
[selectedCategories removeObject:SelectedCategory];
if (tempSubCategory.length != 0) {
subCategoriesAvailable = subCategoriesAvailable-1;
}
[self showNoPagination:subCategoriesAvailable+2];
}else{
if(selectedCategories.count != 2){
key = [NSString stringWithFormat:#"sel_%#",key];
subview.image = [self.mySprites objectForKey:key];
[selectedCategories addObject:SelectedCategory];
if ([SelectedCategory isEqualToString:#"Other"]) {
[self showCommentDialog];
}else{
if (tempSubCategory.length != 0) {
subCategoriesAvailable = subCategoriesAvailable+1;
}
[self showNoPagination:subCategoriesAvailable+2];
}
}
}
[self disableCategories];
break;
}
}
And i don't know what am doing wrong here. I tried nullifying on for loop but no use.
Code which i used for removing the image view
UIView *categoryView = [self.view viewWithTag:500];
NSArray *subviews = [categoryView subviews];
for (UIImageView *subview in subviews) {
if(![selectedCategories containsObject:subview.accessibilityHint]){
[subview removeFromSuperview];
subview.image = Nil;
}
}
Adding sprite reader code for reference
#import "UIImage+Sprite.h"
#import "XMLReader.h"
#implementation UIImage (Sprite)
+ (NSDictionary*)spritesWithContentsOfFile:(NSString*)filename
{
CGFloat scale = [UIScreen mainScreen].scale;
NSString* file = [filename stringByDeletingPathExtension];
if ([[UIScreen mainScreen] respondsToSelector:#selector(displayLinkWithTarget:selector:)] &&
(scale == 2.0))
{
file = [NSString stringWithFormat:#"%##2x", file];
}
NSString* extension = [filename pathExtension];
NSData* data = [NSData dataWithContentsOfFile:[NSString stringWithFormat:#"%#.%#", file,extension]];
NSError* error = nil;
NSDictionary* xmlDictionary = [XMLReader dictionaryForXMLData:data error:&error];
NSDictionary* xmlTextureAtlas = [xmlDictionary objectForKey:#"TextureAtlas"];
UIImage* image = [UIImage imageWithContentsOfFile:[NSString stringWithFormat:#"%#.%#", file,[[xmlTextureAtlas objectForKey:#"imagePath"]pathExtension]]];
CGSize size = CGSizeMake([[xmlTextureAtlas objectForKey:#"width"] integerValue],
[[xmlTextureAtlas objectForKey:#"height"] integerValue]);
if (!image || CGSizeEqualToSize(size, CGSizeZero)) return nil;
CGImageRef spriteSheet = [image CGImage];
NSMutableDictionary* tempDictionary = [[NSMutableDictionary alloc] init];
NSArray* xmlSprites = [xmlTextureAtlas objectForKey:#"sprite"];
for (NSDictionary* xmlSprite in xmlSprites)
{
CGRect unscaledRect = CGRectMake([[xmlSprite objectForKey:#"x"] integerValue],
[[xmlSprite objectForKey:#"y"] integerValue],
[[xmlSprite objectForKey:#"w"] integerValue],
[[xmlSprite objectForKey:#"h"] integerValue]);
CGImageRef sprite = CGImageCreateWithImageInRect(spriteSheet, unscaledRect);
// If this is a #2x image it is twice as big as it should be.
// Take care to consider the scale factor here.
[tempDictionary setObject:[UIImage imageWithCGImage:sprite scale:scale orientation:UIImageOrientationUp] forKey:[xmlSprite objectForKey:#"n"]];
CGImageRelease(sprite);
}
return [NSDictionary dictionaryWithDictionary:tempDictionary];
}
#end
Please help me to resolve this. Thanks in advance.
It looks like all the images are being retained by the dictionary(assumption) self.mySprites, as you are loading them with the call imageView.image = [self.mySprites objectForKey:categoryImage];
If you loaded the images into the dictionary with +[UIImage imageNamed:], then the dictionary initially contains only the compressed png images. Images are decompressed from png to bitmap as they are rendered to the screen, and these decompressed images use a large amount of RAM (that's the memory usage you're seeing labeled "ImageIO_PNG_Data"). If the dictionary is retaining them, then the memory will grow every time you render a new one to the screen, as the decompressed data is held inside the UIImage object retained by the dictionary.
Options available to you:
Store the image names in the self.mySprites dictionary, and load the images on demand. You should be aware that +[UIImage imageNamed:] implements internal RAM caching to speed things up, so this might also cause memory issues for you if the images are big, as the cache doesn't clear quickly. If this is an issue, consider using +[UIImage imageWithContentsOfFile:], although it requires some additional code (not much), which doesn't cache images in RAM.
Re-implement self.mySprites as an NSCache. NSCache will start throwing things out when the memory pressure gets too high, so you'll need to handle the case that the image is not there when you expect it to be, and load it from disk (perhaps using the above techniques)
CAKeyframeAnimation inherits from CAPropertyAnimation which in tern is inherited from CAAnimation.
If you see the delegate of CAAnimation class, it is strongly referenced as written below as it is declared -
/* The delegate of the animation. This object is retained for the
* lifetime of the animation object. Defaults to nil. See below for the
* supported delegate methods. */
#property(strong) id delegate;
Now you have added the reference of animation on imageView.layer, doing so the reference of imageView.layer will be strongly retained by CAAnimation reference.
Also you have set
animation.removedOnCompletion = NO;
which won't remove the animation from layer on completion
So if you are done with a image view then first removeAllAnimations from its layer and then release the image view.
I think as the CAAnimation strongly refers the imageView reference(it would also have increased it's retain count) and this could be the reason that you have removed the imageView from superview, after which it's retain count would still not be zero, and so leading to a leak.
Is there any specific requirement to set
animation.removedOnCompletion = NO;
since, setting
animation.removedOnCompletion = YES;
could solve the issue related to memory leak.
Alternatively, to resolve memory leak issue you can remove the corresponding animation on corresponding imageView' layer, by implementing delegate of CAAnimation, like as shown below -
/* Called when the animation either completes its active duration or
* is removed from the object it is attached to (i.e. the layer). 'flag'
* is true if the animation reached the end of its active duration
* without being removed. */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (flag) {
        NSLog(#"%#", #"The animation is finished. Do something here.");
    }
//Get the reference of the corresponding imageView
    [imageView.layer removeAnimationForKey:#"animation.trash"];
}
UIView *categoryView = [self.view viewWithTag:500];
NSArray *subviews = [categoryView subviews];
for (UIImageView *subview in subviews) {
if(![selectedCategories containsObject:subview.accessibilityHint]){
[subview.layer removeAnimationForKey:#"animation.trash"]; // either this
//or// [subview.layer removeAllAnimations]; //alternatively
[subview removeFromSuperview];
subview.image = Nil;
}
}

sequencing image using core animation, Recieving memory warnings

I am recieving memory warning using 100 of animating images so I tried to use Core Animation instead but that gives me the same problem. This is because I don't know how to use replaceSublayer in my current code
UIView* upwardView=[[UIView alloc]init];
[upwardView setFrame:CGRectMake(0, 0, 1024, 768)];
[self.view addSubview:upwardView];
NSArray *animationImages=[NSArray arrayWithObjects:[UIImage imageNamed:#"001.png"],[UIImage imageNamed:#"001.png"],[UIImage imageNamed:#"002.png"],[UIImage imageNamed:#"003.png"],....,nil];
CAKeyframeAnimation *animationSequence = [CAKeyframeAnimation animationWithKeyPath: #"contents"];
animationSequence.calculationMode = kCAAnimationLinear;
animationSequence.autoreverses = YES;
animationSequence.duration = 5.00;
animationSequence.repeatCount = HUGE_VALF;
NSMutableArray *animationSequenceArray = [[NSMutableArray alloc] init];
for (UIImage *image in animationImages)
{
[animationSequenceArray addObject:(id)image.CGImage];
}
CALayer *layer = [upwardView layer];
animationSequence.values = animationSequenceArray;
[layer addAnimation:animationSequence forKey:#"contents"];
I guess you need to add a few lines more. Just replace the last three lines and add the following line.
//Prepare CALayer
CALayer *layer = [CALayer layer];
layer.frame = self.view.frame;
layer.masksToBounds = YES;
[layer addAnimation:animationSequence forKey:#"contents"];
[upwardView.layer addSublayer:layer]; // Add CALayer to your desired view
For detail implementation check this reference

How to make my UIBezierPath animated with CAShapeLayer?

I'm trying to animate a UIBezierPath and I've installed a CAShapeLayer to try to do it. Unfortunately the animation isn't working and I'm not sure any of the layers are having any affect (as the code is doing the same thing it was doing before I had the layers).
Here is the actual code - would love any help. Draw2D is an implementation of UIView that is embedded in a UIViewController. All the drawing is happening inside the Draw2D class. The call to [_helper createDrawing... ] simply populates the _uipath variable with points.
Draw2D.h defines the following properties:
#define defaultPointCount ((int) 25)
#property Draw2DHelper *helper;
#property drawingTypes drawingType;
#property int graphPoints;
#property UIBezierPath *uipath;
#property CALayer *animationLayer;
#property CAShapeLayer *pathLayer;
- (void)refreshRect:(CGRect)rect;
below is the actual implementation :
//
// Draw2D.m
// Draw2D
//
// Created by Marina on 2/19/13.
// Copyright (c) 2013 Marina. All rights reserved.
//
#import "Draw2D.h"
#import"Draw2DHelper.h"
#include <stdlib.h>
#import "Foundation/Foundation.h"
#import <QuartzCore/QuartzCore.h>
int MAX_WIDTH;
int MAX_HEIGHT;
#implementation Draw2D
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
// Initialization code
if (self.pathLayer != nil) {
[self.pathLayer removeFromSuperlayer];
self.pathLayer = nil;
}
self.animationLayer = [CALayer layer];
self.animationLayer.frame = self.bounds;
[self.layer addSublayer:self.animationLayer];
CAShapeLayer *l_pathLayer = [CAShapeLayer layer];
l_pathLayer.frame = self.frame;
l_pathLayer.bounds = self.bounds;
l_pathLayer.geometryFlipped = YES;
l_pathLayer.path = _uipath.CGPath;
l_pathLayer.strokeColor = [[UIColor grayColor] CGColor];
l_pathLayer.fillColor = nil;
l_pathLayer.lineWidth = 1.5f;
l_pathLayer.lineJoin = kCALineJoinBevel;
[self.animationLayer addSublayer:l_pathLayer];
self.pathLayer = l_pathLayer;
[self.layer addSublayer:l_pathLayer];
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect :(int) points :(drawingTypes) type //:(Boolean) initial
{
//CGRect bounds = [[UIScreen mainScreen] bounds];
CGRect appframe= [[UIScreen mainScreen] applicationFrame];
CGContextRef context = UIGraphicsGetCurrentContext();
_helper = [[Draw2DHelper alloc ] initWithBounds :appframe.size.width :appframe.size.height :type];
CGPoint startPoint = [_helper generatePoint] ;
[_uipath moveToPoint:startPoint];
[_uipath setLineWidth: 1.5];
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
CGPoint center = CGPointMake(self.center.y, self.center.x) ;
[_helper createDrawing :type :_uipath :( (points>0) ? points : defaultPointCount) :center];
self.pathLayer.path = (__bridge CGPathRef)(_uipath);
[_uipath stroke];
[self startAnimation];
}
- (void) startAnimation {
[self.pathLayer removeAllAnimations];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
pathAnimation.duration = 3.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[self.pathLayer addAnimation:pathAnimation forKey:#"strokeEnd"];
}
- (void)drawRect:(CGRect)rect {
if (_uipath == NULL)
_uipath = [[UIBezierPath alloc] init];
else
[_uipath removeAllPoints];
[self drawRect:rect :self.graphPoints :self.drawingType ];
}
- (void)refreshRect:(CGRect)rect {
[self setNeedsDisplay];
}
#end
I know there's probably an obvious reason for why the path isn't animating as it's being drawing (as opposed to being shown immediately which is what happens now) but I've been staring at the thing for so long that I just don't see it.
Also, if anyone can recommend a basic primer on CAShapeLayers and animation in general I would appreciate it. Haven't come up across any that are good enough.
thanks in advance.
It looks like you're trying to animate within drawRect (indirectly, at least). That doesn't quite make sense. You don't animate within drawRect. The drawRect is used for drawing a single frame. Some animation is done with timers or CADisplayLink that repeatedly calls setNeedsDisplay (which will cause iOS to call your drawRect) during which you might draw the single frame that shows the progress of the animation at that point. But you simply don't have drawRect initiating any animation on its own.
But, since you're using Core Animation's CAShapeLayer and CABasicAnimation, you don't need a custom drawRect at all. Quartz's Core Animation just takes care of everything for you. For example, here is my code for animating the drawing of a UIBezierPath:
#import <QuartzCore/QuartzCore.h>
#interface View ()
#property (nonatomic, weak) CAShapeLayer *pathLayer;
#end
#implementation View
/*
// I'm not doing anything here, so I can comment this out
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
*/
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
}
*/
// It doesn't matter what my path is. I could make it anything I wanted.
- (UIBezierPath *)samplePath
{
UIBezierPath *path = [UIBezierPath bezierPath];
// build the path here
return path;
}
- (void)startAnimation
{
if (self.pathLayer == nil)
{
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [[self samplePath] CGPath];
shapeLayer.strokeColor = [[UIColor grayColor] CGColor];
shapeLayer.fillColor = nil;
shapeLayer.lineWidth = 1.5f;
shapeLayer.lineJoin = kCALineJoinBevel;
[self.layer addSublayer:shapeLayer];
self.pathLayer = shapeLayer;
}
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
pathAnimation.duration = 3.0;
pathAnimation.fromValue = #(0.0f);
pathAnimation.toValue = #(1.0f);
[self.pathLayer addAnimation:pathAnimation forKey:#"strokeEnd"];
}
#end
Then, when I want to start drawing the animation, I just call my startAnimation method. I probably don't even need a UIView subclass at all for something as simple as this, since I'm not actually changing any UIView behavior. There are definitely times that you subclass UIView with a custom drawRect implementation, but it's not needed here.
You asked for some references:
I would probably start with a review of Apple's Core Animation Programming Guide, if you haven't seen that.
For me, it all fell into place when I went through Mike Nachbaur's Core Animation Tutorial Part 4, actually reproducing his demo from scratch. Clearly, you can check out parts 1 through 3, too.

Rendering a random noise CALayer with Core Image is generating strange artifacts

I am programmatically creating a CALayer subclass which applies a bit of pixel noise to itself. The code works in that it renders noise in the layer, but there is a strange artifact on the image that I am unable to determine the root cause.
Here is a sample image with the noiseOpacity turned up to make the problem more visible.
The pink box is a UANoisyGradientLayer, a CAGradientLayer subclass with the following bits:
#interface UANoisyGradientLayer ()
#property (nonatomic, retain) CIContext *noiseContext;
#property (nonatomic, retain) CIFilter *noiseGenerator;
#property (nonatomic, retain) CIImage *noiseImage;
#end
#implementation UANoisyGradientLayer
#synthesize noiseOpacity = _noiseOpacity, noiseImage;
- (id)init {
self = [super init];
if (self) {
self.noiseOpacity = 0.10;
self.noiseContext = [CIContext contextWithOptions:nil];
self.noiseGenerator = [CIFilter filterWithName:#"CIColorMonochrome"];
[self.noiseGenerator setValue:[[CIFilter filterWithName:#"CIRandomGenerator"] valueForKey:#"outputImage"] forKey:#"inputImage"];
[self.noiseGenerator setDefaults];
self.noiseImage = [self.noiseGenerator outputImage];
}
return self;
}
- (void)drawInContext:(CGContextRef)ctx {
[super drawInContext:ctx];
CGRect extentRect = [self.noiseImage extent];
if (CGRectIsInfinite(extentRect) || CGRectIsEmpty(extentRect)) {
extentRect = self.bounds;
}
CGImageRef cgimg = [self.noiseContext createCGImage:self.noiseImage fromRect:extentRect];
CGContextSetBlendMode(ctx, kCGBlendModeOverlay);
CGContextSetAlpha(ctx, self.noiseOpacity);
CGContextDrawImage(ctx, self.bounds, cgimg);
CGImageRelease(cgimg);
}
Basically, I create the CIImage in init using a CIRandomGenerator as input to a CIColorMonochrome filter. Then, when it comes time to draw it, I create a CGImageRef out of it using self.bounds (the extent is always infinite or 0), and draw it to the context.
The result is mostly fine, but as you can see in the image, there seems to be some stretching going on. What is happening here?
Although not fixing the original problem, I approached this from a different angle and have duplicated the output. Instead of trying to generate a single image the size of the self.bounds, I am now generating an image that is only 64x64, then tiling it using CGContextDrawTiledImage. Because I am now sizing it at a fixed size, I could pull some code out of the drawInContext: method. And finally, because there was no more image generation done in the draw methods, I was able to make it a static var so it is only ever generated once! Here is the complete class:
static CGImageRef __noiseImage = nil;
static CGFloat __noiseImageWidth = 0.0;
static CGFloat __noiseImageHeight = 0.0;
#implementation UANoisyGradientLayer
#synthesize noiseOpacity = _noiseOpacity;
- (id)init {
self = [super init];
if (self) {
self.noiseOpacity = 0.1f;
self.needsDisplayOnBoundsChange = YES;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
CIContext *noiseContext = [CIContext contextWithOptions:nil];
CIFilter *noiseGenerator = [CIFilter filterWithName:#"CIColorMonochrome"];
[noiseGenerator setValue:[[CIFilter filterWithName:#"CIRandomGenerator"] valueForKey:#"outputImage"] forKey:#"inputImage"];
[noiseGenerator setDefaults];
CIImage *ciImage = [noiseGenerator outputImage];
CGRect extentRect = [ciImage extent];
if (CGRectIsInfinite(extentRect) || CGRectIsEmpty(extentRect)) {
extentRect = CGRectMake(0, 0, 64, 64);
}
__noiseImage = [noiseContext createCGImage:ciImage fromRect:extentRect];
__noiseImageWidth = CGImageGetWidth(__noiseImage);
__noiseImageHeight = CGImageGetHeight(__noiseImage);
});
}
return self;
}
- (void)drawInContext:(CGContextRef)ctx {
[super drawInContext:ctx];
if (self.noiseOpacity > 0) {
CGContextSaveGState(ctx);
CGPathRef path = [[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.cornerRadius] CGPath];
CGContextAddPath(ctx, path);
CGContextClip(ctx);
CGContextSetBlendMode(ctx, kCGBlendModeOverlay);
CGContextSetAlpha(ctx, self.noiseOpacity);
CGContextDrawTiledImage(ctx, CGRectMake(0, 0, __noiseImageWidth, __noiseImageHeight), __noiseImage);
CGContextRestoreGState(ctx);
}
}
#end
NOTE: CIColorMonochrome and CIRandomGenerator require iOS 6 (or newer). Make sure to include the required frameworks (CoreImage.framework and QuartzCore.framework).

iOS: Drawing a CGImage into a subclass of CALayer during custom property animation in correct resolution

I'm at the end of my wisdom...
I have a view which should display an animated circular section which is pre-rendered and available as png files (both retina and non-retina versions, correctly named; pie_p_000.png vs. pie_p_000#2x.png). This section should be animated according the change to some percentage value within the app. So I made a subclass of UIView which has a custom CALayer within its layer hierarchy. The plan is to implement a custom animatable property for the CALayer subclass and change pictures in the overridden method drawInContext:. So far so good, the plan worked and the animation is shown when I change the percentage value using the function setPercentageWithFloat: of the view (full source below).
The thing is: I really don't know why my iPhone4 always presents the low-res image. I tried already playing around with scale factors, but that didn't help. Either the images are presented in the right size and low-res or the images are presented double size.
Overriding display: and setting the contents property directly has the effect that the animation doesn't appear (during the animation no image is presented); after the animation time the final image is presented. In this case the correct resolution image is presented.
Btw: the following code is not very sophisticated in error-handling, flexibility and elegance yet as it is an attempt just to get that thing running ;) - so the image is still presented flipped and so on...
I hope that somebody has a hint for me.
Thanks
The view:
#import "ScrollBarView.h"
#import "ScrollBarLayer.h"
#implementation ScrollBarView
#synthesize sbl;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
- (void)setImagesWithName:(NSString*)imageName {
ScrollBarLayer *ssbl = [[ScrollBarLayer alloc] init];
ssbl.frame = CGRectMake(0, 0, 30, 30);
[ssbl setImagesWithName:imageName];
[self.layer addSublayer:ssbl];
self.sbl = ssbl;
[ssbl release];
}
- (void) dealloc {
self.sbl = nil;
[super dealloc];
}
- (void)setPercentageWithFloat:(CGFloat)perc {
if(perc > 1.0){
perc = 1.0;
} else if(perc < 0) {
perc = 0;
}
[self.sbl setPercentage:perc];
CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:#"percentage"];
ba.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
ba.duration = 0.8;
ba.toValue = [NSNumber numberWithFloat:perc];
[self.sbl addAnimation:ba forKey:nil];
}
#end
The View can be configured to work with different images (using the function setImagesWithName:) using different names (theName). Within this method the View adds the ScrollBarLayer to its layer property.
The Layer:
#import "ScrollBarLayer.h"
#implementation ScrollBarLayer
#synthesize filename;
#dynamic percentage;
- (id)init {
self = [super init];
if (self) {
}
return self;
}
- (void)setImagesWithName:(NSString*)imageName {
self.frame = CGRectMake(0, 0, 30, 30);
self.percentage = 0;
self.filename = imageName;
}
+ (BOOL) needsDisplayForKey:(NSString*)key {
if([key isEqualToString:#"percentage"]) {
return YES;
}
return [super needsDisplayForKey:key];
}
- (void) drawInContext:(CGContextRef)ctx {
int imageIdx = (int)roundf((float)199 * self.percentage);
NSString *thisfilename = [self.filename stringByAppendingString:[NSString stringWithFormat:#"%03d.png", i+1]];
UIImage* c = [UIImage imageNamed:thisfilename];
CGImageRef img = [c CGImage];
CGSize sz = CGSizeMake(CGImageGetWidth(img), CGImageGetHeight(img));
UIGraphicsBeginImageContextWithOptions(CGSizeMake(sz.width, sz.height), NO, 0.0);
CGContextDrawImage(ctx, CGRectMake(0, 0, sz.width, sz.height), img);
UIGraphicsEndImageContext();
}
- (void) dealloc {
self.pictures = nil;
self.filename = nil;
[super dealloc];
}
#end
I also would need light on this.
I think that the issue is between points and pixels... I think that you should check if the device has a retina display, and if so, you should replace the CGContextDrawImage(...) CGRect (in second parameter) for one with half width and height.
#define IS_RETINA_DISPLAY() ([[UIScreen mainScreen] respondsToSelector:#selector(scale)] == YES && [[UIScreen mainScreen] scale] == 2.00)
...
UIGraphicsBeginImageContextWithOptions(CGSizeMake(sz.width, sz.height), NO, 0.0);
if (IS_RETINA_DISPLAY())
{
CGContextDrawImage(ctx, CGRectMake(0, 0, sz.width/2.0f, sz.height/2.0f), img);
} else
{
CGContextDrawImage(ctx, CGRectMake(0, 0, sz.width, sz.height), img);
}
UIGraphicsEndImageContext();
...
But I'm not sure this gill give you a "smooth" result...

Resources