How to draw a rectangle? - iphone

I want to draw a filled rectangle in my viewContoller's view.
I wrote the code below in viewDidLoad. But there is no change.
What is wrong?
CGRect rectangle = CGRectMake(0, 100, 320, 100);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextFillRect(context, rectangle);

You can't do it in a viewController.
You need to extend your View and add the code under "drawRect:"
this will change the drawing logic of your view.
-(void) drawRect:(CGRect)rect{
[super drawRect:rect];
CGRect rectangle = CGRectMake(0, 100, 320, 100);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextFillRect(context, rectangle);
}

modern 2018 solution..
override func draw(_ rect: CGRect) {
let r = CGRect(x: 5, y: 5, width: 10, height: 10)
UIColor.yellow.set()
UIRectFill(r)
}
that's it.

Just for clarity:
If You need to draw a rectangle which has the same fill and border color, then You can replace:
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
with:
[[UIColor redColor] set];

You can't render directly in viewDidLoad; it's the views themselves that would have to run this in their drawRect method.
The easiest way to "draw" a rectangle is to place a UIView with a background color & border in your view. (You can set the border via the view's CALayer's methods. i.e. myView.layer.borderColor = [[UIColor redColor] CGColor];)

Related

issue with drawing two CGMutablePathRef

So I can't seem to be able to draw 2 CGMutablePathRef. Here's the code:
CGRect mainRect = CGRectMake(2, 2, rect.size.width-4, 210);
CGMutablePathRef mainPathRef = createRoundedRectForRect(mainRect, 4);
if (self.imageExists_){
[[UIColor colorWithRed:0 green:0 blue:0 alpha:1.0] set];
CGContextAddPath(context, mainPathRef);
CGContextClip(context);
UIGraphicsBeginImageContext(mainRect.size);
//need to flip the images to that it is drawn appropriately as CALayer uses a different coordinate system
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0.0, 210);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, mainRect, self.highlightItem_.highlightStoryImage.CGImage);
UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[scaledImage drawAtPoint:CGPointMake(0, 0)];
CGContextRestoreGState(context);
this draws the image just fine on the path I specified, clipped. But then I want to draw another rounded rect below it, so I did:
[[UIColor colorWithRed:0 green:0 blue:0 alpha:1.0] set];
CGFloat colors [] = {
0.20, 0.20, 0.20, 1.0,
0.17, 0.17, 0.17, 1.0
};
CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);
CGColorSpaceRelease(baseSpace), baseSpace = NULL;
CGContextSaveGState(context);
CGRect commentRect = CGRectMake(2, 215, rect.size.width-4, rect.size.height - 215);
CGMutablePathRef pathRef = createRoundedRectForRect(commentRect, 3);
CGContextAddPath(context, pathRef);
CGContextClip(context);
CGPoint startPoint = CGPointMake(CGRectGetMidX(commentRect), CGRectGetMinY(commentRect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(commentRect), CGRectGetMaxY(commentRect));
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGGradientRelease(gradient), gradient = NULL;
CGContextRestoreGState(context);
CGContextAddPath(context, pathRef);
CGContextDrawPath(context, kCGPathStroke);
Any idea why this doesn't work?
You've clipped the drawing to the first rect, but haven't reset the clipping path before drawing the second time. You need to save the graphics state before the first clipping path is invoked, I believe.
Your first snippet should look something like this:
CGContextSaveGState(...);
CGContextAddPath(...);
CGContextClip(...);
UIGraphicsBeginImageContext(...);
... rest of your drawing code...
CGContextRestoreGState(...);
and then the second code snippet.

Draw a Line in UIView between 2 image views

I want to draw line between to imageviews (like linking the images..) in UIView. I have used
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 2.0);
CGContextMoveToPoint(context, 0,0); //start at this point
CGContextAddLineToPoint(context, 20, 20); //draw to this point
CGContextStrokePath(context);
But here, my context is null. I dono whether i have to import any framework or import any headers. Any suggestion or sample will be appreciated.
Thanks in advance.
The very easy way is use label with height 1.:)
UILabel *seperator=[[UILabel alloc]initWithFrame:CGRectMake(0, 53, 233, 1)];
seperator.backgroundColor=[UIColor redColor];
[loginView addSubview:seperator];
UIGraphicsBeginImageContext(image_signature.image.size);
[yourImageView.image drawInRect:CGRectMake(0, 0, yourImageView.image.size.width, yourImageView.image.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.0, 0.0, 1.0);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), 0, 0);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), 20, 20);
CGContextStrokePath(UIGraphicsGetCurrentContext());
[yourImageView setImage:UIGraphicsGetImageFromCurrentImageContext()];
UIGraphicsEndImageContext();
...and "yourImageView" is an imageview where you will draw the line. I suggest you to draw the line on each upper imageview, at the very bottom, it's an option.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
CGContextSetLineWidth(context, 5.0);
CGContextMoveToPoint(context, 90, 90.0);
CGContextAddLineToPoint(context, 120.0, 150.0);
CGContextStrokePath(context);

How to get diagram with images as a boarder line in iOS?

I drew rectangle diagram with boarder dotted blue line. I would like to rectangle diagram with same images as a boarder line. That means i want to replace dots with images
My Code:
- (void)drawRect:(CGRect)rect
{
context =UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
CGFloat dashPattern[10] = {3.0, 2.0};
CGContextSetLineDash(context, 0, dashPattern, 2);
CGContextSetRGBFillColor(context, 0.0, 1.0, 0.0, 1.0);
CGContextSetLineWidth(context, 10.0);
CGContextAddRect(context, self.bounds);
CGContextDrawPath(context, kCGPathFillStroke);
CGContextClosePath(context);
CGContextStrokePath(context);
}
Can i set image instead of dots? Please give any suggestions to me. Thanks in advance.
I don't try yet, but maybe you can use:
CGContextSetStrokeColorWithColor(context, [UIColor colorWithPatternImage:myImage].CGColor);

Drawing a line with a shadow, but only want to keep shadow. IOS

I am trying to draw a line with a shadow but I do not want to keep the line but only the shadow.
I have attempted to set the stroke color of the line to clear but when I do that the shadow also disappears.
The following code creates 2 lines, i only want to keep the shadow because it looks nicer and its not pixelated like the line.
Is this possible?
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.0, 0.0, 1.0);
CGContextSetShouldAntialias(UIGraphicsGetCurrentContext(), YES);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat components[4] = {0.0, 0.0, 0.0, 1.0};
CGColorRef shadowColor = CGColorCreate(colorSpace, components);
CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(10,10), 4.0, shadowColor);
Thanks.
So you can't do this directly because the shadow reflects the path, so if you make the path transparent, the shadow will also be transparent. There are a few workarounds I can think of (depends on exactly what you're doing) but one sneaky way would just be to draw the shadow far enough below the path that you can just draw over it, basically erasing it. For example, if the background is white, this will accomplish what you want:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 1.0);
CGContextSetLineWidth(context, 10.0);
CGContextMoveToPoint(context, 10.0, 30.0);
CGContextAddLineToPoint(context, 310.0, 30.0);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat components[4] = {0.0, 0.0, 0.0, 1.0};
CGColorRef shadowColor = CGColorCreate(colorSpace, components);
CGContextSetShadowWithColor(context, CGSizeMake(0.0f,20.0f), 4.0, shadowColor);
CGContextStrokePath(context);
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
CGContextSetLineWidth(context, 10.0);
CGContextMoveToPoint(context, 10.0, 30.0);
CGContextAddLineToPoint(context, 310.0, 30.0);
CGContextStrokePath(context);
}
hope this helps.
why dont you just draw your line as a shadow. Dont have the shadow drawn but instead draw a black line with .25 or less alpha and offset it to where you would expect the shadow to be.

UINavigationBar gradient details

I'm trying to recreate the look of a UINavigationBar. The background of the bar is drawn using a gradient, but it's unclear exactly what the default colors and points are in it. Has anyone done anything in this area?
From one of my projects. Adjust the colors to your liking. It also can show a background image if you want (imageReady), else it draws the navbar like Apple's
// #Lighter r,g,b,a #Darker r,g,b,a
#define MAIN_COLOR_COMPONENTS { 0.153, 0.306, 0.553, 1.0, 0.122, 0.247, 0.482, 1.0 }
#define LIGHT_COLOR_COMPONENTS { 0.478, 0.573, 0.725, 1.0, 0.216, 0.357, 0.584, 1.0 }
#implementation UINavigationBar (UINavigationBarCategory)
- (void)drawRect:(CGRect)rect {
if (imageReady) {
UIImage *img = [UIImage imageNamed: #"navigation_background.png"];
[img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
} else {
// Render yourself instead.
// You will need to adjust the MAIN_COLOR_COMPONENTS and LIGHT_COLOR_COMPONENTS to match your app
// emulate the tint colored bar
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat locations[2] = { 0.0, 1.0 };
CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();
CGFloat topComponents[8] = LIGHT_COLOR_COMPONENTS;
CGGradientRef topGradient = CGGradientCreateWithColorComponents(myColorspace, topComponents, locations, 2);
CGContextDrawLinearGradient(context, topGradient, CGPointMake(0, 0), CGPointMake(0,self.frame.size.height/2), 0);
CGGradientRelease(topGradient);
CGFloat botComponents[8] = MAIN_COLOR_COMPONENTS;
CGGradientRef botGradient = CGGradientCreateWithColorComponents(myColorspace, botComponents, locations, 2);
CGContextDrawLinearGradient(context, botGradient,
CGPointMake(0,self.frame.size.height/2), CGPointMake(0, self.frame.size.height), 0);
CGGradientRelease(botGradient);
CGColorSpaceRelease(myColorspace);
// top Line
CGContextSetRGBStrokeColor(context, 1, 1, 1, 1.0);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, self.frame.size.width, 0);
CGContextStrokePath(context);
// bottom line
CGContextSetRGBStrokeColor(context, 0, 0, 0, 1.0);
CGContextMoveToPoint(context, 0, self.frame.size.height);
CGContextAddLineToPoint(context, self.frame.size.width, self.frame.size.height);
CGContextStrokePath(context);
}
}
#end