Should I be able to override drawInContext() and draw outside the bounds of my CALayer? Even though my layer has maskToBounds set to NO (the default) my drawInContext() is called with a clip set to the bounds of my layer and I am unable to draw outside of it.
My test layer does something like this:
-(void)drawInContext:(CGContextRef)context
{
[super drawInContext:context];
NSLog(#"mask to bounds=%d", self.masksToBounds); // NO
CGRect clip = CGContextGetClipBoundingBox(context);
NSLog(#"clip=%f,%f,%f,%f", clip.origin.x, clip.origin.y, clip.size.width, clip.size.height); // reports the bounds
CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGContextBeginPath(context);
CGContextSetLineWidth(context, 5.0);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 500, 0.0); // wider than my layer...
CGContextStrokePath(context);
}
and here is how I set it up:
- (void)viewDidLoad
{
[super viewDidLoad];
CALayer *layer = [[MyLayer alloc] init];
layer.needsDisplayOnBoundsChange=YES;
layer.frame = CGRectMake(50, 50, 200, 200);
[self.view.layer addSublayer:layer];
}
Is this just a limitation of core animation layers? (Do I need to draw in the layer above this layer?)
thanks.
There is no way for a layer's contents to overflow its bounds; however, you can add a sublayer that overflows by specifying a frame that stretches outside the bounds and setting the masksToBounds property to NO (the default).
Related
I have taken a UiView subclass but it's background color is not changing
This class I am using these method
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:CGRectMake(50, 80, 200, 200)];
if (self)
{
// Initialization code
}
return self;
}
- (void)drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor darkGrayColor]setFill];
CGContextClearRect(context, rect);
CGContextSetLineWidth(context, 2.0);
CGContextBeginPath(context);
CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
CGContextMoveToPoint(context, 1, 1);
CGContextAddLineToPoint(context, 100, 100);
CGContextStrokePath(context); // and draw
}
I am calling this class to main view controller
Newclass *obj =[[Newsclass alloc]init];
obj.backgroundColor =[UIColor redColor];
[self.view addsubview :obj];
but background color by default show black color. It is not changing
if i implemented background-color code init with frame method or
draw rect method than not changing.
if i code it
- (id)initWithCoder:(NSCoder*)aDecoder
than it's method not called
please suggest me UIview subclass black background color how to change
First of all, you should do the color part in UIView file.
if (self = [super initWithFrame:CGRectMake(220,60, 100, 300)])
{
self.backgroundColor =[UIColor greenColor];
}
how ever you don't need to do in this case... ;)
it will definitely change your background color. But what happens next is that Draw rect method is called ,your color is no more visible as the draw rect method draws a view above it (whatever you draw in that method).
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect rectangle = CGRectMake(0,0,200,300);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextFillRect(context, rectangle);
}
You just cannot directly set the background color of cgcontext, you have to fill that context with color.
please make sure that you replace rectangle by rectangular frame of your view. It works like a charm for me.
I have two rectangles (two closed sub cgpaths).
Rectangle B is small and is present inside Rectangle A. All edges within it.
Is there a direct way to fill color area external to the rectangle B.
CAShapeLayer fillExternalColor something like that? If not a direct way, how to do this programmatically?
A - Purple color
B - Yellow color
So I tried drawing A and then drawing B. I wanted B to be of clear color (for now I put Yellow) but then I see purple color of A..
I found CGRectIntersection method that gives AnB and CGRectUnion method that gives AuB.
Is there a method that gives the rest of the area which is AuB - AnB?
You are using a CAShapeLayer. If your fillColor and your strokeColor are both opaque (alpha 1.0), you can simply set the layer's backgroundColor to fill those pixels that are within the layer's bounds but outside of its stroked and filled path.
My test code:
#implementation ViewController {
CAShapeLayer *layer;
}
- (void)viewDidLoad {
[super viewDidLoad];
layer = [CAShapeLayer layer];
layer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 250, 250)].CGPath;
layer.fillColor = [UIColor yellowColor].CGColor;
layer.strokeColor = [UIColor whiteColor].CGColor;
layer.lineWidth = 4;
layer.backgroundColor = [UIColor purpleColor].CGColor;
[self.view.layer addSublayer:layer];
}
- (void)viewDidLayoutSubviews {
layer.frame = self.view.bounds;
}
#end
Result:
I wanted to add red border inner rectangle on UIImage with masked outer part.
I came through this page. The following code is using CGContextEOFillPath can be helpful to others like me. (Some of the code is gathered from other pages.)
-(UIImage ) imageByDrawingBorderRectOnImage:(UIImage )image theRect:(CGRect)theRect
{
// begin a graphics context of sufficient size
UIGraphicsBeginImageContext(image.size);
// draw original image into the context
[image drawAtPoint:CGPointZero];
// get the context for CoreGraphics
CGContextRef ctx = UIGraphicsGetCurrentContext();
// set stroking color and to draw rect
[[UIColor redColor] setStroke];
// drawing with a red stroke color
CGContextSetRGBStrokeColor(ctx, 1.0, 0.0, 0.0, 1.0);
// the line width to 3
CGContextSetLineWidth(ctx, 3.0);
// Add Stroke Rectangle,
CGContextStrokeRect(ctx, theRect);
// Now draw fill outside part with partial alpha gray color
// drawing with a gray stroke color
CGMutablePathRef aPath = CGPathCreateMutable();
// outer rectangle
CGRect rectangle = CGRectMake( 0, 0, image.size.width, image.size.height);
CGPathAddRect(aPath, nil, rectangle);
// innter rectangle
CGPathAddRect(aPath, nil, theRect);
// set gray transparent color
CGContextSetFillColorWithColor(ctx, [UIColor colorWithRed:0.75 green:0.75 blue:0.75 alpha:0.5].CGColor);
// add the path to Context
CGContextAddPath(ctx, aPath);
// This method uses Even-Odd Method to draw in outer rectangle
CGContextEOFillPath(ctx);
// make image out of bitmap context
UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
// free the context
UIGraphicsEndImageContext();
return retImage;
}
Regards.
Assuming A is the bigger shape, B is the smaller, inner shape, and bounds refers to the containing rect of A (probably the bounds of the view)
Clip shape B to the context (-addClip should do it)
CGContextClearRect the bounds
Fill shape A
Edit, found the source of this code
Given HoleView : UIView you must set:
self.opaque = NO;
self.backgroudColor = [UIColor clearColor];
and in drawRect:
[[UIColor purpleColor] setFill];
UIRectFill(A);
CGRect gapRectIntersection = CGRectIntersection(B, A);
[[UIColor clearColor] setFill];
UIRectFill(gapRectIntersection);
kCAFillRuleEvenOdd
Specifies the even-odd winding rule. Count the total number of path crossings. If the number of crossings is even, the point is outside the path. If the number of crossings is odd, the point is inside the path and the region containing it should be filled.
Available in OS X v10.6 and later.
Declared in CAShapeLayer.h.
Refer to :CAShapeLayer Class reference
I have a progress view that I'm trying to animate the change in progress. How do you go about doing that? Below is the code to draw the progress.
Thanks in advance
- (void)drawRect:(CGRect)rect {
// Drawing code.
CGContextRef context = UIGraphicsGetCurrentContext();
// draw the background
CGContextSaveGState(context);
UIBezierPath *outerPath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:0];
[outerPath addClip];
CGPoint backgroundStartPoint = CGPointMake(0.0f, 0.0f);
CGPoint backgroundEndPoint = CGPointMake(0.0f, CGRectGetHeight(rect));
CGContextDrawLinearGradient(context, _backgroundGradient, backgroundStartPoint, backgroundEndPoint, 0);
CGContextRestoreGState(context);
// draw the progress
CGContextSaveGState(context);
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, 1.0f, 1.0f) cornerRadius: 0];
[innerPath addClip];
[_glossTintColor setFill];
CGRect progressRect = CGRectMake(0, 0, CGRectGetWidth(rect)*_progress, CGRectGetHeight(rect));
CGContextFillRect(context, progressRect);
CGContextRestoreGState(context);
}
Whenever the progress changes, trigger a redraw using [view setNeedsDisplay];
See the UIView reference on setNeedsDisplay.
For example, lets say that custom view you have created has a property called progress, the instance variable is called _progress. Lets also suppose that property gets updated by some event/timer/additional thread.
- (void)setProgress:(float)progress
{
_progress = progress;
[self setNeedsDisplay];
}
That overrides the original setter and adds the functionality mentioned above.
I wondered if anyone knows how to get a shadaow effect like the one in things as per the screenshot. To me it looks like the shadow effect is created by having a shadow at the bottom of the cell above and the top of the cell below.
I can create the one from the cell above using the code below but can't figure out how to do it on the cell underneath as it doesn't get shown it's as if the cells are rendered in reverse order in terms of the z-index.
self.layer.shadowOffset = CGSizeMake(0, 2);
self.layer.shadowColor = [[UIColor blackColor] CGColor];
self.layer.shadowRadius = 2;
self.layer.shadowOpacity = 0.5;
CGFloat top = self.layer.bounds.origin.y;
CGFloat left = self.layer.bounds.origin.x;
CGFloat width = self.layer.bounds.size.width;
CGRect shadowFrame = CGRectMake(left, top, width, 44);
CGPathRef shadowPath = [UIBezierPath bezierPathWithRect:shadowFrame].CGPath;
self.layer.shadowPath = shadowPath;
Any suggestions much appreciated.
Things http://www.purplesmash.com/images/Things.jpg
Just create hollow rectangle while drawing with CoreGraphics (align it exactly that hollow part cover your cell visible view) and set shadow for context - this will save performance for you.
UPDATE:
I've tried this inside my cell drawRect: method
// Creating path which will hold our hollow rectangle
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(-8.0f, -8.0f, 336.0f, 96.0f));
CGPathAddRect(path, NULL, CGRectMake(-5.0f, 0.0f, 330.0f, 80.0f));
// Saving current graphics context state
CGContextSaveGState(context);
// Configuring shadow
CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 0.0f), 6.0f,
[[UIColor blackColor] CGColor]);
// Adding our path
CGContextAddPath(context, path);
// Configure hollow rectangle fill color
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
// Fill rectangle and keep hollow part transparent
CGContextEOFillPath(context);
// Restore graphics context
CGContextRestoreGState(context);
Of course additional improvement will be pre-calculate CGMutablePathRef path somewhere in initialization or in this method by condition if(path == NULL). Colors can be retained too. If this should be last row of your cell update, than maybe you don't event need to save context state.
You probably need to do this by drawing the shadows as part of the checked cell instead of setting the shadow properties on the surrounding cells.
I'd do it by adding one or two CAGradientLayers as children of the checked cell's contentView.layer.
I have edited this in light of the suggestion from moonlight. I put that code into a method addInnerTopShadow when a cell needs that I call the method. I have added another method addInnerBottomShadow which puts in the shadow at the bottom.
I call these methods in the drawRect method and when I want to change between the states I call the method:
[cell setNeedsDisplay];
This allows me to toggle the state of the cell without doing things like
[self.tableView reloadData];
As the methods suggest I have outer shadow methods that put a shadow on the first and last cells but that's another issue and has been answered many times. I now have my app working exactly how I want. So thanks to Rob and Moonlight.
-(void)addInnerBottomShadow
{
CGContextRef context = UIGraphicsGetCurrentContext();
// Creating path which will hold our hollow rectangle
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(0, 44, 480, 80));
CGPathAddRect(path, NULL, CGRectMake(0, 54, 480, 96));
// Saving current graphics context state
CGContextSaveGState(context);
// Configuring shadow
CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 0.0f), 6.0f, [[UIColor blackColor] CGColor]);
// Adding our path
CGContextAddPath(context, path);
// Configure hollow rectangle fill color
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
// Fill rectangle and keep hollow part transparent
CGContextEOFillPath(context);
CGContextClipToRect(context, self.bounds);
// Restore graphics context
CGContextRestoreGState(context);
}
-(void)addInnerTopShadow
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(-8.0f, -8.0f, 336.0f, 96.0f));
CGPathAddRect(path, NULL, CGRectMake(-5.0f, 0.0f, 330.0f, 80.0f));
// Saving current graphics context state
CGContextSaveGState(context);
// Configuring shadow
CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 0.0f), 7.0f, [[UIColor blackColor] CGColor]);
// Adding our path
CGContextAddPath(context, path);
// Configure hollow rectangle fill color
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
// Fill rectangle and keep hollow part transparent
CGContextEOFillPath(context);
CGContextClipToRect(context, self.bounds);
// Restore graphics context
CGContextRestoreGState(context);
}
Trying to figure out what I'm doing wrong here. Have tried several things, but I never see that elusive rectangle on the screen. Right now, that's all I want to do -- just draw a single rectangle on the screen.
I'm getting an "invalid context" on everything but the CGContextSetRGBFillColor(). Getting the context after that seems kinda wrong to me, but I'm not at home looking at the examples I was using last night.
Have I messed up something else as well? I really would like to get at least this much done tonight...
- (id)initWithCoder:(NSCoder *)coder
{
CGRect myRect;
CGPoint myPoint;
CGSize mySize;
CGContextRef context;
if((self = [super initWithCoder:coder])) {
NSLog(#"1");
currentColor = [UIColor redColor];
myPoint.x = (CGFloat)100;
myPoint.y = (CGFloat)100;
mySize.width = (CGFloat)50;
mySize.height = (CGFloat)50;
NSLog(#"2");
// UIGraphicsPushContext (context);
NSLog(#"3");
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, currentColor.CGColor);
CGContextAddRect(context, myRect);
CGContextFillRect(context, myRect);
}
return self;
}
Thanks,
Sean.
Starting with a View-based template, create a project named Drawer. Add a UIView class to your project. Name it SquareView (.h and .m).
Double-click DrawerViewController.xib to open it in Interface Builder. Change the generic view there to SquareView in the Identity Inspector (command-4) using the Class popup menu. Save and go back to Xcode.
Put this code in the drawRect: method of your SquareView.m file to draw a large, crooked, empty yellow rectangle and a small, green, transparent square:
- (void)drawRect:(CGRect)rect;
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0.0, 1.0); // yellow line
CGContextBeginPath(context);
CGContextMoveToPoint(context, 50.0, 50.0); //start point
CGContextAddLineToPoint(context, 250.0, 100.0);
CGContextAddLineToPoint(context, 250.0, 350.0);
CGContextAddLineToPoint(context, 50.0, 350.0); // end path
CGContextClosePath(context); // close path
CGContextSetLineWidth(context, 8.0); // this is set from now on until you explicitly change it
CGContextStrokePath(context); // do actual stroking
CGContextSetRGBFillColor(context, 0.0, 1.0, 0.0, 0.5); // green color, half transparent
CGContextFillRect(context, CGRectMake(20.0, 250.0, 128.0, 128.0)); // a square at the bottom left-hand corner
}
You don't have to call this method for the drawing to happen. Your view controller will tell the view to draw itself at least once when the program launches and the NIB files are activated.
You are not supposed to put CG code in initWithCoder. That message should only be used for INITIALIZATION purpose.
Put your drawing code in:
- (void)drawRect:(CGRect)rect
If you are subclassing a UIView...