I want to draw a line at that point where long press gesture occurred. I am using long press gesture on UIImageView.
I can get coordinates by using gesture object but don't know how to use these coordinates for drawing a line.
You can use this to add a line on a view. if you want more custom drawing, then you can go for more customisation of drawrect method of a uiview custom class.
CAShapeLayer *line = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint startPoint = CGPointMake(387, 532);
[path moveToPoint: startPoint];
CGPoint endPoint = CGPointMake(487, 532);
[path addLineToPoint: endPoint];
[path stroke];
line.path = path.CGPath;
line.fillColor = [UIColor clearColor].CGColor;
line.strokeColor = [UIColor darkGrayColor].CGColor;
line.lineWidth = 3.0;
[self.view.layer addSublayer:line];
For more details please refer to below link:
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBezierPath_class/index.html#//apple_ref/occ/cl/UIBezierPath
Related
I'm drawing a segment of a pie chart with the following code:
CAShapeLayer *segment = [CAShapeLayer layer];
UIBezierPath *segmentPath = [UIBezierPath bezierPath];
[segmentPath addArcWithCenter:segmentCenter radius:segmentRadius startAngle:angle1 endAngle:angle2 clockwise:YES];
segment.path = [segmentPath CGPath];
[segment setLineCap:kCALineJoinRound]; // this is the line which causes this
segment.lineWidth = 8;
segment.fillColor = [[UIColor clearColor] CGColor];
segment.strokeColor = [[UIColor orangeColor] CGColor];
[self.layer addSublayer:segment];
and as a sideffect of setting kCALineJoinRound I get also a little circle inside. I need to get rid of it, can you help me?
Solved, the problem was due to the CAShapeLayer being added twice in layoutSubviews which caused this strange effect.
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 have this code where I draw circles on the screen, and I want to remove just the last circle drawn. What can I do? The code is set to draw a circle when I tap twice. I want to remove the last circle drawn when I tap one time.
- (UIBezierPath *)makeCircleAtLocation:(CGPoint)location radius:(CGFloat)radius {
iOSCircle *circle = [[iOSCircle alloc] init];
circle.circleCenter = location;
circle.circleRadius = radius;
[totalCircles addObject:circle];
UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:circle.circleCenter
radius:circle.circleRadius
startAngle:0.0
endAngle:M_PI * 2.0
clockwise:YES];
return path;
}
- (IBAction) tapEvent: (UIGestureRecognizer *) sender
{
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [[self makeCircleAtLocation:location radius:2.5] CGPath];
shapeLayer.strokeColor = [[UIColor redColor] CGColor];
//shapeLayer.fillColor = nil;
shapeLayer.lineWidth = 2.5;
// Add CAShapeLayer to our view
[self.view.layer addSublayer:shapeLayer];
// Save this shape layer in a class property for future reference,
// namely so we can remove it later if we tap elsewhere on the screen.
self.circleLayer = shapeLayer;
}
}
Create your circle in a distinct CAShapeLayer layer using a CGPath, and add it as a sublayer of your view.layer. That way, you will have total control over that circle (showing or hiding it).
I am making an image editor which can create different shapes objects like circle, triangle and square which can also be updated or removed. So I have used CAShapeLayer for creating shapes objects.
Now I also want to draw a line on image which can also be updated or removed so I have used bezierpath and CAShapeLayer to create the line, it is working fine. BUT now the problem is that when I want to select any existing line it can be selected any where close to line tool because CAShapeLayer also set the fill region which will be a straight line from start point to end point.
My question is that how can I create line with no fill region using CAShapeLayer.
Here is my code for creating line:
CAShapeLayer *line = [CAShapeLayer layer];
// Using bezierpath to make line
UIBezierPath *linePath=[UIBezierPath bezierPath];
// Creating L with line
[linePath moveToPoint:point1];
[linePath addToPoint:point2];
[linePath addToPoint:point3];
line.path=linePath.CGPath;
// Configure the appearence of the line
line.fillColor = Nil;
line.opacity = 1.0;
line.strokeColor = [UIColor whiteColor].CGColor;
Any idea on this will be really appreciated.
Can you try this. Its work for me
CAShapeLayer *line = [CAShapeLayer layer];
UIBezierPath *linePath=[UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(startx, starty)];
[linePath addLineToPoint:CGPointMake(endx, endy)];
line.lineWidth = 10.0;
line.path=linePath.CGPath;
line.fillColor = shapecolor.CGColor;
line.strokeColor = shapecolor.CGColor;
[[self.view layer] addSublayer:line];
I understand you I experienced this issue as well try this:
GPathRef linePathRef = linePath.CGPath
linePathRef = CGPathCreateCopyByStrokingPath(linePathRef, NULL, line.lineWidth, kCGLineCapRound, kCGLineJoinRound, 1);
BOOL pathContainsPoint = CGPathContainsPoint(linePathRef, NULL, touchLocation, NO);
if(pathContainsPoint){
//Do something with the cashapelayer line...
}else{
//Do something here if needed...
}
I am trying to animate the drawing of a UIBeizerPath (in my example a triangle) in a UIView subclass. However, the entire subview is animating instead of the shape.
Is there something I am missing with the animation?
- (void)drawRect:(CGRect)rect {
CAShapeLayer *drawLayer = [CAShapeLayer layer];
drawLayer.frame = CGRectMake(0, 0, 100, 100);
drawLayer.strokeColor = [UIColor greenColor].CGColor;
drawLayer.lineWidth = 4.0;
[self.layer addSublayer:drawLayer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0,0)];
[path addLineToPoint:CGPointMake(50,100)];
[path addLineToPoint:CGPointMake(100,0)];
[path closePath];
CGPoint center = [self convertPoint:self.center fromView:nil];
[path applyTransform:CGAffineTransformMakeTranslation(center.x, center.y)];
[[UIColor redColor] set];
[path fill];
[[UIColor blueColor] setStroke];
path.lineWidth = 3.0f;
[path stroke];
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.duration = 4.0f;
pathAnimation.path = path.CGPath;
pathAnimation.calculationMode = kCAAnimationLinear;
[drawLayer addAnimation:pathAnimation forKey:#"position"];
}
You are creating a CAShapeLayer, but then not doing anything useful with it. Let's fix that.
Don't set up layers and animations in -drawRect:, because that's strictly meant as a time to do drawing using the CoreGraphics or UIKit APIs. Instead, you want the CAShapeLayer to draw the triangle -- that way you can animate it.
CAKeyframeAnimation.path is meant for something completely different (e.g. moving a layer along a path).
Your animation is animating the position value of the layer. No surprise that it moves the layer! You want to animate the path value instead.
The idea behind CAKeyframeAnimation is that you provide it an array of values to set the layer's property to. During the time between keyframes, it will interpolate between the two adjacent keyframes. So you need to give it several paths -- one for each side.
Interpolating arbitrary paths is difficult. CA's path interpolation works best when the paths have the same same number and kind of elements. So, we make sure all our paths have the same structure, just with some points on top of each other.
The secret to animation, and maybe to computers in general: you must be precise in explaining what you want to happen. "I want to animate the drawing of each point, so it appears to be animated" is not nearly enough information.
Here's a UIView subclass that I think does what you're asking for, or at least close. To animate, hook a button up to the -animate: action.
SPAnimatedShapeView.h:
#import <UIKit/UIKit.h>
#interface SPAnimatedShapeView : UIView
- (IBAction)animate:(id)sender;
#end
SPAnimatedShapeView.m:
#import "SPAnimatedShapeView.h"
#import <QuartzCore/QuartzCore.h>
#interface SPAnimatedShapeView ()
#property (nonatomic, retain) CAShapeLayer* shapeLayer;
#end
#implementation SPAnimatedShapeView
#synthesize shapeLayer = _shapeLayer;
- (void)dealloc
{
[_shapeLayer release];
[super dealloc];
}
- (void)layoutSubviews
{
if (!self.shapeLayer)
{
self.shapeLayer = [[[CAShapeLayer alloc] init] autorelease];
self.shapeLayer.bounds = CGRectMake(0, 0, 100, 100); // layer is 100x100 in size
self.shapeLayer.position = self.center; // and is centered in the view
self.shapeLayer.strokeColor = [UIColor blueColor].CGColor;
self.shapeLayer.fillColor = [UIColor redColor].CGColor;
self.shapeLayer.lineWidth = 3.f;
[self.layer addSublayer:self.shapeLayer];
}
}
- (IBAction)animate:(id)sender
{
UIBezierPath* path0 = [UIBezierPath bezierPath];
[path0 moveToPoint:CGPointZero];
[path0 addLineToPoint:CGPointZero];
[path0 addLineToPoint:CGPointZero];
[path0 addLineToPoint:CGPointZero];
UIBezierPath* path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointZero];
[path1 addLineToPoint:CGPointMake(50,100)];
[path1 addLineToPoint:CGPointMake(50,100)];
[path1 addLineToPoint:CGPointMake(50,100)];
UIBezierPath* path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointZero];
[path2 addLineToPoint:CGPointMake(50,100)];
[path2 addLineToPoint:CGPointMake(100,0)];
[path2 addLineToPoint:CGPointMake(100,0)];
UIBezierPath* path3 = [UIBezierPath bezierPath];
[path3 moveToPoint:CGPointZero];
[path3 addLineToPoint:CGPointMake(50,100)];
[path3 addLineToPoint:CGPointMake(100,0)];
[path3 addLineToPoint:CGPointZero];
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:#"path"];
animation.duration = 4.0f;
animation.values = [NSArray arrayWithObjects:(id)path0.CGPath, (id)path1.CGPath, (id)path2.CGPath, (id)path3.CGPath, nil];
[self.shapeLayer addAnimation:animation forKey:nil];
}
#end