I have a custom view that will draw animations - just different lines, each line a different color. When user enters information, these lines appear originating at the button and creating lines to different UILabels.
I am following this tutorial techotopia.com core graphics iOS 7 tutorial
It says to make the UIView a custom class and put the drawing inside drawRect: - with your typical creating of context, adding lines, stroke, color, etc. OK fine, but how do I get multiple lines with different colors to be drawn simultaneously?
Do I need to create layers for each line? A new custom class and view for each line?
If I call CGPathCloseSubpathwill that allow me to create a new starting point?
How do I change the color for the new line, and do I need to create a new context for the new line?
Use UIBezierPath is easier than CGPath and CGContext.
-(void)drawRect:(CGRect)rect
{
UIBezierPath *line1 = [UIBezierPath bezierPath];
[line1 moveToPoint:CGPointMake(0, 0)];
[line1 addLineToPoint:CGPointMake(100, 0)];
[[UIColor redColor] set]; //Set color to red
[line1 stroke];
UIBezierPath *line2 = [UIBezierPath bezierPath];
[line2 moveToPoint:CGPointMake(0, 10)];
[line2 addLineToPoint:CGPointMake(100, 10)];
[[UIColor blueColor] set]; //Change color to blue
[line2 stroke];
}
Related
Hi I am doing the legend for the different polygon colors in a map, and I want to show a little square with the UIColor used for that certain item. I was thinking of using a UIImage and setting the background color to that color but I can't figure it out. What is the best way to go about this problem?
Thanks
If you need user interaction with this square than use UIView, in other case you need to use CAShapeLayer. There wont be any visual difference, but using layer is preferred if you have only show something without any interaction.
use [UIBezierPath bezierPathWithRect:(CGRect)rect]
and than with that path
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
Add that CAShapeLayer to your view's layer:
[self.view.layer addSublayer:shapeLayer];
I am trying to draw a Bezier path, an arc of a given angle, in response to a pan gesture. Here's what I have inside the function called by the pan gesture:
UIGraphicsBeginImageContext(self.frame.size);
UIBezierPath *path = [self createArcPath];
[[UIColor blackColor] setStroke];
[[UIColor redColor] setFill];
CGContextRef *ref = UIGraphicsGetCurrentContext();
path.lineWidth = 5;
[path fill];
[path stroke];
UIGraphicsEndImageContext();
And here is createArcPath:
- (UIBezierPath *)createArcPath
{
UIBezierPath *aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
radius:75
startAngle:0
endAngle:DEGREES_TO_RADIANS(135)
clockwise:YES];
return aPath;
}
I don't get an error, but I just don't get anything on my screen relating to the arc. What am I missing? This is in a method of a UIView subclass.
I also tried the following method in - (id)initWithFrame:
UIColor *color =[UIColor redColor];
UIGraphicsBeginImageContext(self.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, width);
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextSetStrokeColorWithColor(context, color.CGColor);
CGRect myOval = {100, 100, self.radius, self.radius};
CGContextAddEllipseInRect(context, myOval);
UIGraphicsEndImageContext();
I also don't see anything. What am I missing? Can these methods not be called from a UIView?
The UIGraphicsBeginImageContext/UIGraphicsEndImageContext calls create an off-screen context that you can draw into, then extract an image from. Since it's an off-screen context nothing shows on the screen.
What you probably want to do is create a custom subclass of UIView that overrides drawRect. In your code that responds to user gestures, change the data structure(s) that represent your drawing, then call setNeedsDisplay to trigger the system to ask your view to redraw itself by calling your drawRect method.
As an alternative you can set up your custom view to install a CAShapeLayer in the view, then change the path on the layer, then call setNeedsDisplay on the layer.
Is there a way to get a tableview seperator effect like the screenshot below, the effect has been used in the fast company app and shows two rows in the views being separated by a triangular seperator.
Any pointers on how this effect can be achieved in a tableview would be highly appreciated. The seperator at the bottom of the screen is semi transparent and the image associated with the next row shows through.
A link to the screenshot is here: https://s3-us-west-1.amazonaws.com/jjm.so/17427B2C-3837-4428-B82E-8D1C57BFA706B53CD936-AE93-4F2A-B3DB-7F7018A02CBA.jpg
There you go:
CGRect frame = imageView.bounds;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, frame.size.height)];
[path addLineToPoint:CGPointMake(0, frame.size.height-60)];
[path addLineToPoint:CGPointMake(frame.size.width/2, frame.size.height-20)];
[path addLineToPoint:CGPointMake(frame.size.width, frame.size.height-60)];
[path addLineToPoint:CGPointMake(frame.size.width, frame.size.height)];
[path closePath];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = path.CGPath;
mask.strokeColor = [UIColor clearColor].CGColor;
mask.fillColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.5].CGColor;
[imageView.layer addSublayer:mask];
I think you use ImageMasking on that, It may be Help you. Just simple create Image of Layer which is you required.and then Just add masking too Image.
I think that is a custom UIView inside the cell that is created by drawing a bezierPathto get the shape. The UIView is having a colour of 0,0,0 and alpha of 0.3-0.4 and is a subview of the cell.contentView. The tableview has separator as None,and the custom view lies at the bottom of the cell, thus rendering the effect that it is being used as a custom separator of triangle shape.
I copied the code below from the Stanford ios7 course for adding a Bezier path to a view. however, when I included this code in ViewDidLoad it didn't show anything on the screen
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(75, 10)];
[path addLineToPoint: CGPointMake(160, 150)];
[path addLineToPoint:CGPointMake(10, 150)];
[[UIColor whiteColor] setStroke];
[[UIColor whiteColor] setFill];
[path stroke];
[path fill];
Afterwards, I added this log statement NSLog(#"path: %#", path); which prints this ominous error message.
This is a serious error. This application, or a library it uses, is
using an invalid context and is thereby contributing to an overall
degradation of system stability and reliability. This notice is a
courtesy: please fix this problem. It will become a fatal error in an
upcoming update.
Can you explain what I am doing wrong?
I have accomplished this by creating a CAShapeLayer, and adding it as a sublayer of the view's layer. What's neat is that you can use the UIBezierPath's CGPath attribute to set up the layer.
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.strokeColor = [UIColor whiteColor].CGColor;
[self.view.layer addSublayer:layer];
The error message is exactly correct. You are using drawing commands, but you are not inside a drawing (graphics) context. Hence your commands are just thrown away (and are bad).
You should give drawing commands only when you are within a graphics context. There are two main such situations:
You're in a UIView subclass's drawRect:.
You've created an image graphics context with UIGraphicsBeginImageContextWithOptions.
You are in neither situation. You can make a bezier path object, constructing the path, but you cannot draw the object; commands like setStroke and stroke are thus illegal.
I have a weird issue with some basic drawing code here:
The code for this is just the following in a for-loop, I just want to draw some vertical lines into the view:
UIBezierPath* verticalLine = [UIBezierPath bezierPath];
[verticalLine moveToPoint:CGPointMake(currentXPosition, 0)];
[verticalLine addLineToPoint:CGPointMake(currentXPosition, self.frame.size.height)];
[verticalLine closePath];
verticalLine.lineWidth = 1;
[[UIColor blackColor] setStroke];
[verticalLine stroke];
I can't imagine a reason for it. Can you?
Thanks in advance,
Christian
EDIT: Drawing horizontal lines works perfectly well, they have normal width and don't fade out.