No effect of reordering sublayers - iphone

I have a UIView subclass that instantiates three sibling sublayers of its layer. Two of the sublayers have their content set to images files; and the third has a graphic drawn in the
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
method. The problem is that my drawing layer always appears behind the image layers. I've tried reordering the sublayers array and altering the zPosition properties of the sublayers to no avail. What am I missing?
- (void)setupLayers
{
CALayer *rootLayer = [self layer];
_meterLayer = [CALayer layer];
[_meterLayer setContents:(id)[[UIImage imageNamed:#"HealthMeterRadial60x60.png"] CGImage]];
_pointerLayer = [CALayer layer];
[_pointerLayer setContents:(id)[[UIImage imageNamed:#"HealthMeterRadialPointer60x60.png"] CGImage]];
_labelLayer = [CALayer layer];
[self set_labelText:#"Health"];
[rootLayer addSublayer:_meterLayer];
[rootLayer insertSublayer:_pointerLayer above:_meterLayer];
[rootLayer insertSublayer:_labelLayer above:_pointerLayer];
}
And the drawLayerInContext method:
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
if( layer = _labelLayer) {
//draw graphics ... omitted for clarity; works, but always behind images
}
}

The solution to the problem is to draw the content of _labelLayer to an image context and set it's content property to the resulting CGImage. When setting up the layers:
// create a layer for the name of the meter
_labelLayer = [CALayer layer];
[_labelLayer setFrame:CGRectMake(0, 0, rootLayer.frame.size.width, rootLayer.frame.size.height)];
[self set_labelText:#"Health"];
[_labelLayer setContents:(id)[[self labelImageContent] CGImage]];
Then to draw the contents to a CGImage:
- (UIImage *)labelImageContent {
NSAssert( _labelText != nil, #"No label set for radial meter");
// get a frame for our layer and start a context to make an image
CGRect rect = _labelLayer.frame;
UIGraphicsBeginImageContext(rect.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
// measure the size of our text first to know where to position
CGSize textsize = [_labelText sizeWithFont:[UIFont systemFontOfSize:10]];
const char *text = [_labelText cStringUsingEncoding:NSUTF8StringEncoding];
size_t textlen = strlen(text);
// this is just a testing rectangle
CGContextSetRGBFillColor(ctx, 1, 0, 0, 0.5);
CGContextFillRect(ctx,rect);
/* save our context before writing text */
CGContextSaveGState(ctx);
CGContextSelectFont(ctx, "Helvetica", 9, kCGEncodingMacRoman);
CGContextSetTextDrawingMode(ctx, kCGTextFill);
/* this will flip our text so that it is readable */
CGAffineTransform flipTransform = CGAffineTransformMakeTranslation(0.0f, rect.size.height);
flipTransform = CGAffineTransformScale(flipTransform, 1.0f, -1.0f);
// write our title in black
float opaqueBlack[] = {0,0,0,1};
CGContextSetFillColor(ctx, opaqueBlack);
CGContextConcatCTM(ctx, flipTransform);
CGContextShowTextAtPoint(ctx, rect.origin.x + 0.5*(60-textsize.width), rect.origin.y + 40 - 0.5 * textsize.height - 5, text, textlen);
/* get our graphics state back */
CGContextRestoreGState(ctx);
UIImage *labelPic = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return labelPic;
}
df

Related

UIView: Draw at double the size

I have a UIView with a dynamically generated graphic context. Its normal size is 100x100, but it can be scaled up to 200x200, so I want its size to be actually 200x200 in order to appear nicely and not blurred however it is displayed.
How can always draw it 200x200 in drawRect, being it displayed at a size of 100 or at a size of 200? If I'm showing it at 100x100, the rect passed to drawRect is smaller than the area I need to draw into.
My code:
- (void) drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
// prevent the drawings to be flipped
CGContextTranslateCTM(ctx, 0, rect.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextDrawImage(ctx, CGRectMake(0, 0, rect.size.width, rect.size.height), [UIImage imageNamed:#"actionBg.png"].CGImage);
// generate the overlay
if ([self isActive] == NO && self.fullDelay != 0) { // TODO: remove fullDelay check!
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.0);
CGContextRef overlayCtx = UIGraphicsGetCurrentContext();
int segmentSize = (rect.size.height / [self fullDelay]);
for (int i=0; i<[self fullDelay]; i++) {
float alpha = 0.9 - (([self fullDelay] * 0.1) - (i * 0.1));
[[UIColor colorWithRed:120.0/255.0 green:14.0/255.0 blue:14.0/255.0 alpha:alpha] setFill];
if (currentDelay > i) {
CGRect r = CGRectMake(0, i * segmentSize, rect.size.width, segmentSize);
CGContextFillRect(overlayCtx, r);
}
[[UIColor colorWithRed:1 green:1 blue:1 alpha:0.3] setFill];
CGRect line = CGRectMake(0, (i * segmentSize) + segmentSize - 1 , rect.size.width, 1);
CGContextFillRect(overlayCtx, line);
}
UIImage *overlay = UIGraphicsGetImageFromCurrentImageContext();
UIImage *overlayMasked = [TDUtilities maskImage:overlay withMask:[UIImage imageNamed:#"actionMask.png"]];
// prevent the drawings to be flipped
CGContextTranslateCTM(ctx, 0, rect.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
// put the overlay
CGContextSetBlendMode(ctx, kCGBlendModeMultiply);
CGContextDrawImage(ctx, rect, overlayMasked.CGImage);
CGContextSetBlendMode(ctx, kCGBlendModeNormal);
UIGraphicsEndImageContext();
}
// prevent the drawings to be flipped
CGContextTranslateCTM(ctx, 0, rect.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
// draw the delay symbol
CGContextDrawImage(ctx, rect, [UIImage imageNamed:#"delaySymbol.png"].CGImage);
CGContextSetAlpha(ctx, 0.8);
// draw the symbol
NSString *imgName = [K_ACTION_IMAGES objectAtIndex:[self actionType]];
CGContextDrawImage(ctx, rect, [UIImage imageNamed:imgName].CGImage);
CGContextSetAlpha(ctx, 1);
// draw the delay number
imgName = [NSString stringWithFormat:#"%d.png", [self fullDelay]];
CGContextDrawImage(ctx, rect, [UIImage imageNamed:imgName].CGImage);
// draw the priority number
imgName = [NSString stringWithFormat:#"%d.png", [self actionType]];
CGContextDrawImage(ctx, CGRectMake(32, 0, rect.size.width, rect.size.height), [UIImage imageNamed:imgName].CGImage);
}
Have you called setNeedsDisplay method for you view after setting its frame

drawRect at double the size

If I override drawRect in order to display an image and place a dinamically-generated overlay on it (see code), whenever I scale up the image it is drawn in a very blurry way as the result of the scaling.
The image is composed of two pieces, an image drawn from a png (whose original size is 2x the wanted one, so it should not give problems when scaled, but it does) and the other is dinamically generated according to the rect size, so it should also adapt to the current rect size, but it doesn't.
Any help?
- (void) drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextDrawImage(ctx, CGRectMake(0, 0, rect.size.width, rect.size.height), [UIImage imageNamed:#"actionBg.png"].CGImage);
// generate the overlay
if ([self isActive] == NO && self.fullDelay != 0) { // TODO: remove fullDelay check!
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.0);
CGContextRef overlayCtx = UIGraphicsGetCurrentContext();
int segmentSize = (rect.size.height / [self fullDelay]);
for (int i=0; i<[self fullDelay]; i++) {
float alpha = 0.9 - (([self fullDelay] * 0.1) - (i * 0.1));
[[UIColor colorWithRed:120.0/255.0 green:14.0/255.0 blue:14.0/255.0 alpha:alpha] setFill];
if (currentDelay > i) {
CGRect r = CGRectMake(0, i * segmentSize, rect.size.width, segmentSize);
CGContextFillRect(overlayCtx, r);
}
[[UIColor colorWithRed:1 green:1 blue:1 alpha:0.3] setFill];
CGRect line = CGRectMake(0, (i * segmentSize) + segmentSize - 1 , rect.size.width, 1);
CGContextFillRect(overlayCtx, line);
}
UIImage *overlay = UIGraphicsGetImageFromCurrentImageContext();
UIImage *overlayMasked = [TDUtilities maskImage:overlay withMask:[UIImage imageNamed:#"actionMask.png"]];
// prevent the drawings to be flipped
CGContextTranslateCTM(overlayCtx, 0, rect.size.height);
CGContextScaleCTM(overlayCtx, 1.0, -1.0);
CGContextSetBlendMode(ctx, kCGBlendModeMultiply);
CGContextDrawImage(ctx, rect, overlayMasked.CGImage);
CGContextSetBlendMode(ctx, kCGBlendModeNormal);
UIGraphicsEndImageContext();
}
The problem is that you are drawing overlayMasked as a CGImage with CGContextDrawImage, which knows nothing of scale. Either you will have to double the size yourself manually if you're in a double-scale situation, or you should use UIImage, which knows about scale.

Multiple CGContextRef in drawRect

In overriding a UIView drawRect, I draw the main image with CGContextDrawImage. Over it I need to draw another image (with a multiply blend mode), so I actually need to draw over it.
This second image needs to be prepares since it's generated dynamically (it has to be masked, may be different size and so), so in the end I need to generate it. How can I get a second context where I can draw and mask this second image before applying it over the main one with? If I draw on the current context, it gets directly drawn no the main one before I can mask it.
- (void) drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextDrawImage(ctx, CGRectMake(0, 0, rect.size.width, rect.size.height), [UIImage imageNamed:#"actionBg.png"].CGImage);
// prevent the drawings to be flipped
CGContextTranslateCTM(ctx, 0, rect.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
// generate the overlay
if ([self isActive] == NO && self.fullDelay != 0) { // TODO: remove fullDelay check!
int segmentSize = (ACTION_SIZE / [self fullDelay]);
for (int i=0; i<[self fullDelay]; i++) {
float alpha = 0.9 - (([self fullDelay] * 0.1) - (i * 0.1));
[[UIColor colorWithRed:120.0/255.0 green:14.0/255.0 blue:14.0/255.0 alpha:alpha] setFill];
if (currentDelay > i) {
CGRect r = CGRectMake(0, i * segmentSize, ACTION_SIZE, segmentSize);
CGContextFillRect(ctx, r);
}
[[UIColor colorWithRed:1 green:1 blue:1 alpha:0.3] setFill];
CGRect line = CGRectMake(0, (i * segmentSize) + segmentSize - 1 , ACTION_SIZE, 1);
CGContextFillRect(ctx, line);
}
UIImage *overlay = UIGraphicsGetImageFromCurrentImageContext();
UIImage *overlayMasked = [TDUtilities maskImage:overlay withMask:[UIImage imageNamed:#"actionMask.png"]];
}
}
Here overlayMasked now contains the correct image, but since I've prepared it using the main context, its is not all messed. Thanks
Thanks
You can create a bitmap context using either UIGraphicsBeginImageContextWithOptions or CGBitmapContextCreate. After you're finished drawing in the bitmap context, you can get an image using UIGraphicsGetImageFromCurrentImageContext or CGBitmapContextCreateImage (as appropriate), and then release the context using either UIGraphicsEndImageContext or CGContextRelease.

Help rotating a UIImage

I have to rotate a UIImage before I save it out to file. I've tried a number of methods, some of which seem to work for other people, but all it seems to do it turn my image solid white. Here's my code:
CGFloat radians = 90.0f * M_PI/180;
UIGraphicsBeginImageContext(image.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextConcatCTM(ctx, CGAffineTransformMakeRotation(radians));
CGContextDrawImage(ctx, CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage);
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Can anyone spot what I'm doing wrong? The variable "image" is a UIImage.
- (UIImage *)imageRotatedByRadians:(CGFloat)radians
{
// calculate the size of the rotated view's containing box for our drawing space
UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.size.width, self.size.height)];
CGAffineTransform t = CGAffineTransformMakeRotation(radians);
rotatedViewBox.transform = t;
CGSize rotatedSize = rotatedViewBox.frame.size;
// Create the bitmap context
UIGraphicsBeginImageContext(rotatedSize);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);
//Rotate the image context
CGContextRotateCTM(bitmap, radians);
// Now, draw the rotated/scaled image into the context
CGContextScaleCTM(bitmap, 1.0, -1.0);
CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2, self.size.width, self.size.height), [self CGImage]);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
I believe you are not taking into account that the coordinate system for iPhone and Quartz Coordinate system are different.
try putting these two lines before CGContextConcatCTM.
// to account for Quartz coordinate system.
CGContextScaleCTM(cx, 1, -1);
CGContextTranslateCTM(ctx, 0, -longerSide); // width or height depending on the orientation
I suggest to put your image in UIImageView and then use following code:
- (void)setupRotatingButtons
{
// call this method once; make sure "self.view" is not nil or the button
// won't appear. the below variables are needed in the #interface.
// center: the center of rotation
// radius: the radius
// time: a CGFloat that determines where in the cycle the button is located at
// (note: it will keep increasing indefinitely; you need to use
// modulus to find a meaningful value for the current position, if
// needed)
// speed: the speed of the rotation, where 2 * 3.1415 is **roughly** 1 lap a
// second
center = CGPointMake(240, 160);
radius = 110;
time = 0;
speed = .3 * 3.1415; // <-- will rotate CW 360 degrees per .3 SECOND (1 "lap"/s)
CADisplayLink *dl = [CADisplayLink displayLinkWithTarget:self selector:#selector(continueCircling:)];
[dl addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
}
- (void)continueCircling:(CADisplayLink *)dl
{
time += speed * dl.duration;
//here rotate your image view
yourImageView.transform = CGAffineTransformMakeRotation(time);
}
Use following code to rotate:
UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"image1.png"]];
[imageView setFrame:CGRectMake(0.0f, 0.0f,100.0f, 100.0f)];
[self.view addSubview:imageView];
self.imageView.transform = CGAffineTransformMakeRotation((90.0f * M_PI) / 180.0f);

Make Background of UIView a Gradient Without Sub Classing

Is there a way to make the background of a UIView a gradient without subclassing it? I'd rather not use an image file to accomplish this either. It just seems obtuse to have to subclass UIView just to draw a gradient for the background.
You can use +[UIColor colorWithPatternImage:] to produce a patterned background. Example (bring your own CGGradient):
// Allocate color space
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
// Allocate bitmap context
CGContextRef bitmapContext = CGBitmapContextCreate(NULL, 320, 480, 8, 4 * 320, colorSpace, kCGImageAlphaNoneSkipFirst);
//allocate myGradient
CGFloat locationList[] = {0.0f, 1.0f};
CGFloat colorList[] = {0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f};
CGGradientRef myGradient = CGGradientCreateWithColorComponents(colorSpace, colorList, locationList, 2);
// Draw Gradient Here
CGContextDrawLinearGradient(bitmapContext, myGradient, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 480.0f), 0);
// Create a CGImage from context
CGImageRef cgImage = CGBitmapContextCreateImage(bitmapContext);
// Create a UIImage from CGImage
UIImage *uiImage = [UIImage imageWithCGImage:cgImage];
// Release the CGImage
CGImageRelease(cgImage);
// Release the bitmap context
CGContextRelease(bitmapContext);
// Release the color space
CGColorSpaceRelease(colorSpace);
// Create the patterned UIColor and set as background color
[targetView setBackgroundColor:[UIColor colorWithPatternImage:image]];
It will probably be simpler to just create a UIView subclass though. It will use less memory as well.
You could do:
Swift >= 4.0:
let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [UIColor.red.cgColor, UIColor.white.cgColor]
view.layer.insertSublayer(gradient, at: 0)
Swift 3.0:
let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [UIColor.red().cgColor, UIColor.white().cgColor]
view.layer.insertSublayer(gradient, at: 0)
Swift <= 2.3:
let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [UIColor.redColor().CGColor, UIColor.whiteColor().CGColor]
view.layer.insertSublayer(gradient, atIndex: 0)
Objective-C:
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.view.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
[self.view.layer insertSublayer:gradient atIndex:0];
Make sure to add the QuartzCore framework to your project as well (at least for Objective-C)...
#import <QuartzCore/QuartzCore.h>
I agree with rpetrich, it would be cleaner to just do the UIView subclass. For an example of how to do this, see my response in this question. If you wanted, you could create a generic gradient UIView subclass and simply place that behind the views you want to have gradient backgrounds.
I change the adopted answer to my edition
+(void) setBlackGradientToView:(UIView*)targetView
{
CGRect frame = targetView.frame;
// Allocate color space
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//allocate myGradient
CGFloat locationList[] = {0.0f, 1.0f};
CGFloat colorList[] = {0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f};
CGGradientRef myGradient = CGGradientCreateWithColorComponents(colorSpace, colorList, locationList, 2);
// Allocate bitmap context
CGContextRef bitmapContext = CGBitmapContextCreate(NULL, frame.size.width, frame.size.height, 8, 4 * frame.size.width, colorSpace, kCGImageAlphaPremultipliedLast);
//Draw Gradient Here
CGContextDrawLinearGradient(bitmapContext, myGradient, CGPointMake(0.0f, 0.0f), CGPointMake(0, frame.size.height), 0);
// Create a CGImage from context
CGImageRef cgImage = CGBitmapContextCreateImage(bitmapContext);
// Create a UIImage from CGImage
UIImage *uiImage = [UIImage imageWithCGImage:cgImage];
// Release the CGImage
CGImageRelease(cgImage);
// Release the bitmap context
CGContextRelease(bitmapContext);
// Release the color space
CGColorSpaceRelease(colorSpace);
//Create the patterned UIColor and set as background color
[targetView setBackgroundColor:[UIColor colorWithPatternImage:uiImage]];
//return uiImage;
}