I want to draw a single path, which can overlap itself. What I want is like a snap of Moves below:
Can I achieve this just fill a single CGPathRef on iOS?
I created two paths, a gray one and red one below:
There are two overlaps on the gray line, one for itself and one for the red line. The red overlap, you can see it clearly, is above (or below) the gray one. But the gray overlap is just merged.
The Moves trace line is a single line, maybe is not implemented by a single path fill or stroke.
Here's my code:
[[UIColor colorWithWhite:0.0 alpha:0.3] setStroke];
CGFloat lineWidth = 10.0;
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = lineWidth;
[path moveToPoint:CGPointMake(300, 50)];
[path addLineToPoint:CGPointMake(20, 400)];
[path addLineToPoint:CGPointMake(300, 400)];
[path addLineToPoint:CGPointMake(20, 50)];
[path stroke];
[[UIColor colorWithRed:1.0 green:0.5 blue:0.5 alpha:0.5] setStroke];
UIBezierPath *anotherPath = [UIBezierPath bezierPath];
anotherPath.lineWidth = lineWidth;
[anotherPath moveToPoint:CGPointMake(160, 50)];
[anotherPath addLineToPoint:CGPointMake(300, 200)];
[anotherPath stroke];
Related
I need to draw a separator line with some dots on it. I have decided I will do this using the draw method, as opposed to including images of the separator. I will do this for performance and for customisability, as the separator changes sometimes.
Now I have looked into the draw() method on UIView and I have noticed that Apple suggests using GLKView when drawing using OpenGL.
For a simple separator, won't it be too much of a hassle to call OpenGL? Or is the OpenGL overhead negligible? When would I want to use the native UIKit draw() then?
FYI I don't know either method, but want to learn both methods, so don't reply "what you know best". I am simply asking about performance.
OpenGL uses GPU instead of CPU for computation. If you are making something like a gaming app, then you can think of using OpenGL. I believe you want to draw a line in an iOS App. For that you can either use drawRect method in UIView or create a shapeLayer and add it as a sublayer.
The following examples will show you:
CAShapeLayer *simpleLine = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 80)];
[path addLineToPoint:CGPointMake(300, 80)];
simpleLine.lineWidth = 1.0;
simpleLine.path = path.CGPath;
simpleLine.strokeColor = [[UIColor blackColor] CGColor];
[[self.view layer] addSublayer:simpleLine];
For using drawRect, you are supposed to do this inside a Custom UIView as opposed to the above method.
- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 80)];
[path addLineToPoint:CGPointMake(300, 80)];
path.lineWidth = 1.0;
[[UIColor blueColor] setStroke];
[path stroke];
}
If your separator parameters changes and if you are making an app, it's better to use drawRect method. You can call this method anytime by using [CustomUIView setNeedsDisplay:YES]
Edit
What you're asking for is circle over line. You can do that by drawing UIBezierPath for line first and then add UIBezierPath for circle later.
Normal Line
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10.0, 10.0)];
[path addLineToPoint:CGPointMake(100.0, 100.0)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor redColor] CGColor];
shapeLayer.lineWidth = 3.0;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
[self.view.layer addSublayer:shapeLayer];
Dotted Line
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10.0, 10.0)];
[path addLineToPoint:CGPointMake(100.0, 100.0)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor redColor] CGColor];
shapeLayer.lineWidth = 3.0;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
shapeLayer.lineDashPattern = #[#4, #2];
[self.view.layer addSublayer:shapeLayer];
I want to draw a triangle with dynamic values with base down and sharp edge up. How can I do that?
This should do it.
- (void)drawRect:(CGRect)rect {
//This set the line color
[[UIColor blueColor] setStroke];
[[UIColor redColor] setFill];
UIBezierPath *path = [UIBezierPath bezierPath];
//Starting point
[path moveToPoint:CGPointMake(0, 0)];
//Vertice one
[path addLineToPoint:CGPointMake(1, 1)];
//Vertice two
[path addLineToPoint:CGPointMake(0, 1)];
[path closePath];
//fill path with the defined color
[path fill];
//draw the stroke with the defined color
[path stroke];
}
I am using lineWidth to create a circle with stroke width 4. I am using UIBezierPath for creating the circle. But, due to some reason, lineWidth is always rendering a circle with a thin stroke no matter what value I assign to lineWidth. I have also tried to put path.lineWidth = 100.0, but no change in stroke width.
This is my code:
UIGraphicsBeginImageContextWithOptions(CGSizeMake(progressView.frame.size.width, progressView.frame.size.height), NO, 0.0);
[[UIColor colorWithRed:246.0/255.0 green:80.0/255.0 blue:36.0/255.0 alpha:1.0] setStroke];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(progressView.frame.size.width/2 ,progressView.frame.size.height/2) radius:progressView.frame.size.width/2 - 5 startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(angle) clockwise:YES];
[path stroke];
path.lineWidth = 4;
UIImage* pathImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[progressView setImage:pathImg];
I googled a lot, but could not find any solution to this problem.
You need to set the stroke width before you actually stroke the path:
UIGraphicsBeginImageContextWithOptions(CGSizeMake(progressView.frame.size.width, progressView.frame.size.height), NO, 0.0);
[[UIColor colorWithRed:246.0/255.0 green:80.0/255.0 blue:36.0/255.0 alpha:1.0] setStroke];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(progressView.frame.size.width/2 ,progressView.frame.size.height/2) radius:progressView.frame.size.width/2 - 5 startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(angle) clockwise:YES];
path.lineWidth = 4;
[path stroke];
UIImage* pathImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[progressView setImage:pathImg];
I am having an app in which I am doing some calculations and based on that I want to draw a traverse like shown below.
Here is an image of the traverse.
I have distance of AB, BC and so on.
Based on this values I need to draw an image shown above.
I know how to draw a line using UIBezierPath and using the below code.
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100.0, 100.0)];
[path addLineToPoint:CGPointMake(100.0, 100.0)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
shapeLayer.lineWidth = 3.0;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
But how to draw this with this calculations. I am confused with it. I just want some guidance on it.
My main aim is to draw image with the design pattern shown below.
EDIT
I have a distance of 50.0 and an angle of 37 for line AB. How to draw a line AB from that?
Please help.
Any help will be appreciated. Thanks.
Example:
- (void)drawTraverseWithFirstPoint:(CGPoint)firstPoint secondPoint:(CGPoint)point thirdPoint:(CGPoint)thirdPoint fourthPoint:(CGPoint)fourthPoint andLastPoint:(CGPointLastPoint) {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:your_start_point];
[path addLineToPoint:firstPoint];
[path addLineToPoint:secondPoint];
[path addLineToPoint:thirdPoint];
[path addLineToPoint:fourthPoint];
[path addLineToPoint:lastPoint];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
shapeLayer.lineWidth = 3.0;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
}
Just do the calculations first and pass it as paramethers or pass an Array with points however it is easier for you, i hope you will understand my example good day.
I'm getting a clipped LineJoin in a UIBezierPath when one line comes back exactly over the previous line. If I adjust the second line by one pixel, the LineJoin behaves as expected. Here's the code:
UIBezierPath *path = [UIBezierPath bezierPath];
[path setLineWidth:10.0f];
[path setLineCapStyle:kCGLineCapRound];
[path setLineJoinStyle:kCGLineJoinRound];
[path moveToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(200, 100)];
[path addLineToPoint:CGPointMake(150, 100)];
[path moveToPoint:CGPointMake(100, 120)];
[path addLineToPoint:CGPointMake(200, 120)];
[path addLineToPoint:CGPointMake(150, 121)];
[[UIColor redColor] setStroke];
[path stroke];
Here's what's displayed:
Is this a bug?
If not, is there some way to get the top path LineJoin to be rounded? (without fudging the points)
This came up when I made a UIBezierPath from 'touch-input', and while scribbling around sometimes this happened.
This is fixed in iOS 7.
Open Radar also updated.