I want to make a UIButton with that looks similar to the UIBackBarButtonItem (with an arrow pointing left for the navigation stack. I would prefer to do this without having to use an image if possible because the button will have a different size depending on the phone's orientation.
Is there a way to active this affect in code? My idea was using the CALayer of the button somehow.
Thanks!
EDIT
I am trying to use #Deepak's advice, but I am running into a a problem. I want the right side of the button to look like a [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:4] with the left side looking like an arrow. I tried to do this using the addQuadCurveToPoint:controlPoint method.
I am using the corner of the rect as the control point, but the path does not curve like I expect. It is still cornered as if I only used the addLineToPoint: method. My code is below.
float radius = 4.0;
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint startPoint = CGPointMake(rect.size.width/5.0, 0);
CGPoint pointBeforeTopCurve = CGPointMake(rect.size.width - radius, 0);
CGPoint topRightCorner = CGPointMake(rect.size.width, 0);
CGPoint pointAfterTopCurve = CGPointMake(rect.size.width, 0.0-radius);
CGPoint pointBeforeBottomCurve = CGPointMake(rect.size.width, rect.size.height-radius);
CGPoint bottomRightCorner = CGPointMake(rect.size.width, rect.size.height);
CGPoint pointAfterBottomCurve = CGPointMake(rect.size.width - radius, rect.size.height);
CGPoint pointBeforeArrow = CGPointMake(rect.size.width/5.0, rect.size.height);
CGPoint arrowPoint = CGPointMake(0, rect.size.height/2.0);
[path moveToPoint:pointBeforeTopCurve];
[path addQuadCurveToPoint:pointAfterTopCurve controlPoint:topRightCorner];
[path addLineToPoint:pointBeforeBottomCurve];
[path addQuadCurveToPoint:pointAfterBottomCurve controlPoint:bottomRightCorner];
[path addLineToPoint:pointBeforeArrow];
[path addLineToPoint:arrowPoint];
[path addLineToPoint:startPoint];
You can do this with Quartz. You will need subclass UIButton and implement its drawRect: method. You will have to define a path and fill it with a gradient.
You will also have to implement hitTest:withEvent: as it involves non-rectangular shape.
This solved the drawing difficulties for me
float radius = 10.0;
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint startPoint = CGPointMake(rect.size.width/5.0, 0);
CGPoint pointBeforeTopCurve = CGPointMake(rect.size.width - radius, 0);
CGPoint topRightCorner = CGPointMake(rect.size.width, 0.0);
CGPoint pointAfterTopCurve = CGPointMake(rect.size.width, radius);
CGPoint pointBeforeBottomCurve = CGPointMake(rect.size.width, rect.size.height-radius);
CGPoint bottomRightCorner = CGPointMake(rect.size.width, rect.size.height);
CGPoint pointAfterBottomCurve = CGPointMake(rect.size.width - radius, rect.size.height);
CGPoint pointBeforeArrow = CGPointMake(rect.size.width/5.0, rect.size.height);
CGPoint arrowPoint = CGPointMake(0.0, rect.size.height/2.0);
[path moveToPoint:pointBeforeTopCurve];
[path addQuadCurveToPoint:pointAfterTopCurve controlPoint:topRightCorner];
[path addLineToPoint:pointBeforeBottomCurve];
[path addQuadCurveToPoint:pointAfterBottomCurve controlPoint:bottomRightCorner];
[path addLineToPoint:pointBeforeArrow];
[path addLineToPoint:arrowPoint];
[path addLineToPoint:startPoint];
[path fill];
Related
I am creating an app in which i am trying to clear the rect of UIImageView. I have achieved this with CGContextClearRect, but the problem is that it is clearing rect in square shape and i want to achieve this effect in round shape.
What i have tried so far:
UITouch *touch2 = [touches anyObject];
CGPoint point = [touch2 locationInView:img];
UIGraphicsBeginImageContextWithOptions(img.bounds.size, NO, 0.0f);
[img.image drawInRect:CGRectMake(0, 0, img.frame.size.width, img.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect cirleRect = CGRectMake(point.x, point.y, 40, 40);
CGContextAddArc(context, 50, 50, 50, 0.0, 2*M_PI, 0);
CGContextClip(context);
CGContextClearRect(context,cirleRect);
//CGContextClearRect(context, CGRectMake(point.x, point.y, 30, 30));
img.image =UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
I'm not sure exactly what you are doing, but your clipping arc isn't being created correctly. You are creating it at a fixed position which is why it doesn't really work - except it does, if you click in the top left corner.
If you want to see it working try this:
- (IBAction)clearCircle:(UITapGestureRecognizer *)sender {
UIImageView *imageView = self.imageView;
UIImage *currentImage = imageView.image;
CGSize imageViewSize = imageView.bounds.size;
CGFloat rectWidth = 40.0f;
CGFloat rectHeight = 40.0f;
CGPoint touchPoint = [sender locationInView:imageView];
UIGraphicsBeginImageContextWithOptions(imageViewSize, YES, 0.0f);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[currentImage drawAtPoint:CGPointZero];
CGRect clippingEllipseRect = CGRectMake(touchPoint.x - rectWidth / 2, touchPoint.y - rectHeight / 2, rectWidth, rectHeight);
CGContextAddEllipseInRect(ctx, clippingEllipseRect);
CGContextClip(ctx);
CGContextClearRect(ctx, clippingEllipseRect);
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
Which creates a clipping ellipse (in this case a circle) in the rect 40 x 40 centred at the touch point.
You can see this in an example project on Bitbucket which you can download for yourself to try
I currently have the following code to try and allow the user to draw a dotted path and make a custom shape. Once they have made this shape, I wanted it to automatically be filled with colour. That isn't happening.
At the moment I am getting this error for the code below:
<Error>: CGContextClosePath: no current point.
Here's the code I'm using:
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint previous = [touch previousLocationInView:self];
CGPoint current = [touch locationInView:self];
#define SQR(x) ((x)*(x))
//Check for a minimal distance to avoid silly data
if ((SQR(current.x - self.previousPoint2.x) + SQR(current.y - self.previousPoint2.y)) > SQR(10))
{
float dashPhase = 5.0;
float dashLengths[] = {10, 10};
CGContextSetLineDash(context,
dashPhase, dashLengths, 2);
CGContextSetFillColorWithColor(context, [[UIColor lightGrayColor] CGColor]);
CGContextFillPath(context);
CGContextSetLineWidth(context, 2);
CGFloat gray[4] = {0.5f, 0.5f, 0.5f, 1.0f};
CGContextSetStrokeColor(context, gray);
self.brushSize = 5;
self.brushColor = [UIColor lightGrayColor];
self.previousPoint2 = self.previousPoint1;
self.previousPoint1 = previous;
self.currentPoint = current;
// calculate mid point
self.mid1 = [self pointBetween:self.previousPoint1 andPoint:self.previousPoint2];
self.mid2 = [self pointBetween:self.currentPoint andPoint:self.previousPoint1];
if(self.paths.count == 0)
{
UIBezierPath* newPath = [UIBezierPath bezierPath];
CGContextBeginPath(context);
[newPath moveToPoint:self.mid1];
[newPath addLineToPoint:self.mid2];
[self.paths addObject:newPath];
CGContextClosePath(context);
}
else
{
UIBezierPath* lastPath = [self.paths lastObject];
CGContextBeginPath(context);
[lastPath addLineToPoint:self.mid2];
[self.paths replaceObjectAtIndex:[self.paths indexOfObject:[self.paths lastObject]] withObject:lastPath];
CGContextClosePath(context);
}
//Save
[self.pathColors addObject:self.brushColor];
self.needsToRedraw = YES;
[self setNeedsDisplayInRect:[self dirtyRect]];
//[self setNeedsDisplay];
}
}
Why is this happening and why is the inside of the path not being filled with colour?
Your code has a few issues:
You should be doing your drawing in your view's drawRect: method, not the touch handler.
You never set the variable context with a value for the current context. Do that with the UIGraphicsGetCurrentContext() method. Again, within your drawRect: method.
You go through the trouble of creating a UIBezierPath object, but you never use it. Do that by calling CGContextAddPath( context, newPath.CGPath ), changing the variable name as needed in the two places you appear to the using a UIBezierPath.
Keep the call to setNeedsDisplayInRect: in your touch handler method. That tells the system to do the work to update your view using the drawing that your (yet to be implemented) drawRect: method draws.
I'm creating a simple app where when the user presses a button, a series of lines will be drawn on the screen and the user will be able to see these lines drawn in real time (almost like an animation).
My code looks something like this (has been simplified):
UIGraphicsBeginImageContext(CGSizeMake(300,300));
CGContextRef context = UIGraphicsGetCurrentContext();
for (int i = 0; i < 100; i++ ) {
CGContextMoveToPoint(context, i, i);
CGContextAddLineToPoint(context, i+20, i+20);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextStrokePath(context);
}
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
My problem is that:
1) As soon as the user presses the button, the UIThread blocks until the drawing is done.
2) I can't get the lines to be drawn on the screen one at a time - I've tried setting the UIImage directly inside the loop and also tried setting a layer content inside the loop.
How do I get around these problems?
You say "just like an animation". Why not do an actual animation, a la Core Graphics' CABasicAnimation? Do you really need to show it as a series of lines, or is a proper animation ok?
If you want to animate the actual drawing of the line, you could do something like:
#import <QuartzCore/QuartzCore.h>
- (void)drawBezierAnimate:(BOOL)animate
{
UIBezierPath *bezierPath = [self bezierPath];
CAShapeLayer *bezier = [[CAShapeLayer alloc] init];
bezier.path = bezierPath.CGPath;
bezier.strokeColor = [UIColor blueColor].CGColor;
bezier.fillColor = [UIColor clearColor].CGColor;
bezier.lineWidth = 5.0;
bezier.strokeStart = 0.0;
bezier.strokeEnd = 1.0;
[self.view.layer addSublayer:bezier];
if (animate)
{
CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
animateStrokeEnd.duration = 10.0;
animateStrokeEnd.fromValue = [NSNumber numberWithFloat:0.0f];
animateStrokeEnd.toValue = [NSNumber numberWithFloat:1.0f];
[bezier addAnimation:animateStrokeEnd forKey:#"strokeEndAnimation"];
}
}
Then all you have to do is create the UIBezierPath for your line, e.g.:
- (UIBezierPath *)bezierPath
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0.0, 0.0)];
[path addLineToPoint:CGPointMake(200.0, 200.0)];
return path;
}
If you want, you can patch a bunch of lines together into a single path, e.g. here is a roughly sine curve shaped series of lines:
- (UIBezierPath *)bezierPath
{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint point = self.view.center;
[path moveToPoint:CGPointMake(0, self.view.frame.size.height / 2.0)];
for (CGFloat f = 0.0; f < M_PI * 2; f += 0.75)
{
point = CGPointMake(f / (M_PI * 2) * self.view.frame.size.width, sinf(f) * 200.0 + self.view.frame.size.height / 2.0);
[path addLineToPoint:point];
}
return path;
}
And these don't block the main thread.
By the way, you'll obviously have to add the CoreGraphics.framework to your target's Build Settings under Link Binary With Libraries.
I have issue to implement "Emboss/Shadow effects" in my drawing. Finger paint functionality is currently working fine with my custom UIView and below is my drawRect method code:
Edit code with all methods :
- (void)drawRect:(CGRect)rect
{
CGPoint mid1 = midPoint(previousPoint1, previousPoint2);
CGPoint mid2 = midPoint(currentPoint, previousPoint1);
CGContextRef context = UIGraphicsGetCurrentContext();
[self.layer renderInContext:context];
CGContextMoveToPoint(context, mid1.x, mid1.y);
CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
CGContextSaveGState(context);
// for shadow effects
CGContextSetShadowWithColor(context, CGSizeMake(0, 2),3, self.lineColor.CGColor);
CGContextStrokePath(context);
[super drawRect:rect];
}
CGPoint midPoint(CGPoint p1, CGPoint p2)
{
return CGPointMake((p1.x + p2.x) * 0.5, (p1.y + p2.y) * 0.5);
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
previousPoint1 = [touch previousLocationInView:self];
previousPoint2 = [touch previousLocationInView:self];
currentPoint = [touch locationInView:self];
[self touchesMoved:touches withEvent:event];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
previousPoint2 = previousPoint1;
previousPoint1 = [touch previousLocationInView:self];
currentPoint = [touch locationInView:self];
// calculate mid point
CGPoint mid1 = midPoint(previousPoint1, previousPoint2);
CGPoint mid2 = midPoint(currentPoint, previousPoint1);
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, mid1.x, mid1.y);
CGPathAddQuadCurveToPoint(path, NULL, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
CGRect bounds = CGPathGetBoundingBox(path);
CGPathRelease(path);
CGRect drawBox = bounds;
//Pad our values so the bounding box respects our line width
drawBox.origin.x -= self.lineWidth * 2;
drawBox.origin.y -= self.lineWidth * 2;
drawBox.size.width += self.lineWidth * 4;
drawBox.size.height += self.lineWidth * 4;
UIGraphicsBeginImageContext(drawBox.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
curImage = UIGraphicsGetImageFromCurrentImageContext();
[curImage retain];
UIGraphicsEndImageContext();
[self setNeedsDisplayInRect:drawBox];
}
when i have implemented this i am getting paint effects with dot dot dot ...
See below image (which does not have any shadow or embossed effects). If you have any idea of how to add these effects, please give me some suggestion. How can i resolve this?
It appears that you're creating hundreds, maybe even thousands of separate paths, one on each drawRect. You do flatten these out using [self.layer renderInContext] but I don't think that's a good way to go about it. Instead, I think what you want to do is create one UIBezierPath to track the finger, append paths to that and draw the UIBezierPath to the screen. If you create two layers (or views) you can set the top one (transparent) to "draw" on. When the user lifts their finger, you then render the entire UIBezierPath to the second layer (along with previously drawn data) and create a new UIBezierPath to draw the next finger-tracking. This way you're only updating one layer (the top one) when you're tracking someone's finger. This will help prevent the device from slowing down drawing too many paths.
Although, I will say, your current method does produce a cool looking "3D" effect.
I'm not sure about embossing, but if what you want is to apply a drop shadow to a drawing that is updated progressively, then a nice approach would be to use CALayers (link to a tutorial). Basically, your progressive drawing would update a transparent image (without attempting to draw any shadows in this image) and this image would be configured to be displayed with a drop shadow through its CALayer.
Shadow is created on borders and you are drawing small segments of lines and this creates this effect. You need to create a path and then stroke it once. This code might help you :)
for (int i=0; i<[currentPath count]; i++)
{
CGPoint mid1 = [[self midPoint:[currentPath objectAtIndex:i+1] :[currentPath objectAtIndex:i]] CGPointValue];
CGPoint mid2 = [[self midPoint:[currentPath objectAtIndex:i+2] :[currentPath objectAtIndex:i+1]] CGPointValue];
CGContextMoveToPoint(context, mid1.x, mid1.y);
CGContextAddQuadCurveToPoint(context, [[currentPath objectAtIndex:i+1] CGPointValue].x, [[currentPath objectAtIndex:i+1] CGPointValue].y, mid2.x, mid2.y);
CGContextSetShadow(context, CGSizeMake(-2, -2), 3);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetStrokeColorWithColor(context,[color CGColor]);
CGContextSetLineWidth(context, linewidth);
i+=2;
}
CGContextStrokePath(context);
Try this way.. This solved might solve your issue.. First create ur path and after it is fully created, stroke it. This happens since at every small line you stroke and hence shadow created make a dot on its bounds, so you get this effect.
I'm making some custom control. One of the subviews of the control is transparent UIView with UIBezierPath path drawn on. On the one of the photos there is just let's say border of the UIBezierPath (there's called [path stroke]), but on the second one you can see what happens when I call [path fill]. I'd like the path filled to create shape similar to the one on the first photo. drawRect method from this transparent UIView is below.
- (void)drawRect:(CGRect)rect
{
// Drawing code
[super drawRect:rect];
UIBezierPath *path;
[[UIColor greenColor] setStroke];
[[UIColor greenColor] setFill];
//Angles
CGFloat startAngle = degreesToRadians(225);
CGFloat endAngle = degreesToRadians(315);
CGPoint center = CGPointMake(CGRectGetMidX(rect), lRadius);
path = [UIBezierPath bezierPathWithArcCenter: center radius:lRadius startAngle:startAngle endAngle:endAngle clockwise:YES];
rightEndOfLine = path.currentPoint;
bigArcHeight = rightEndOfLine.y;
CGFloat smallArcHeight = lRadius - bigArcHeight - sRadius;
CGFloat smallArcWidthSquare = (8*smallArcHeight*sRadius) - (4 * (smallArcHeight * smallArcHeight));
smallArcWidth = sqrtf(smallArcWidthSquare);
leftStartOfLine = CGPointMake((rect.size.width - smallArcWidth)/2, lRadius-sRadius + smallArcHeight);
CGFloat lengthOfSpace = (rect.size.width - rightEndOfLine.x);
[path moveToPoint:leftStartOfLine];
[path addArcWithCenter:center radius:sRadius startAngle:startAngle endAngle:endAngle clockwise:YES];
rightStartOfLine = path.currentPoint;
leftEndOfLine = CGPointMake(lengthOfSpace, bigArcHeight);
[path moveToPoint:rightStartOfLine];
[path addLineToPoint:rightEndOfLine];
[path moveToPoint:leftStartOfLine];
[path addLineToPoint:leftEndOfLine];
[path closePath];
[path stroke];
// [path fill];
}
Thanks for help !
Try to remove all of your moveToPoint calls. This is a continuous shape so they are not required, and they are confusing the filling algorithm. You can start at the top left corner, draw the arc clockwise, draw the segment (?) line, draw the arc anticlockwise, then draw the last segment line (or close the path). This will fill properly.