Anyone know how to/if it's a good idea to animate CGPaths in a UIView's drawRect method?
For example, draw a black line from one end of the UIView to the other and then as a timer ticks over, change each individual pixel to a different colour variation to imitate a colour 'flow' of sorts (think Mexican wave, but with colour shades).
Is this doable/efficient?
Try this.
-(void)drawRect:(CGRect)rect{
[UIView animateWithDuration:0.5 animations:^{
CAShapeLayer *shapeLayer=[CAShapeLayer layer];
shapeLayer.path=[self maskPath].CGPath;
[yourview.layer setMask:shapeLayer];
}
-(UIBezierPath *)maskPath{
UIBezierPath *path=[[UIBezierPath alloc] init];
[path moveToPoint:[self normalizedCGPointInView:yourview ForX:1 Y:1]];
[path addLineToPoint:[self normalizedCGPointInView:yourview ForX:9 Y:1]];
[path addLineToPoint:[self normalizedCGPointInView:yourview ForX:9 Y:9]];
[path addLineToPoint:[self normalizedCGPointInView:yourview ForX:1 Y:9]];
return path;
}
-(CGPoint)normalizedCGPointInView:(UIView *)view ForX:(CGFloat)x Y:(CGFloat)y{
CGFloat normalizedXUnit=view.frame.size.width/10;
CGFloat normalizedYUnit=view.frame.size.height/10;
return CGPointMake(normalizedXUnit*x, normalizedYUnit*y);
}
By using a normalised co-ordinate scheme it's a lot easier to calculate the BezierPath for the mask. Additionally it means that the mask is always relative to the size of your view and not fixed to a specific size.
Hope this helps!
Related
I want to make custom drawing so that i could convert it to image.
i have heard of UIBezierPath but donot know much about it, my purpose is to change color of it on basis of user's selection of color.
Create a CGGraphcisContext and get an image like this:
UIGraphicsBeginImageContextWithOptions(bounds.size, NO , [[UIScreen mainScreen] scale]);
// set the fill color (UIColor *)
[userSelectedColor setFill];
//create your path
UIBezierPath *path = ...
//fill the path with your color
[path fill];
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
You might have to combine multiple paths to get your desired shape. First create the 'drop' with bezier paths. The path might look something like this:
//Create the top half of the circle
UIBezierPath *drop = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetWidth(bounds)*0.5f, CGRectGetWidth(bounds)*0.5f)
radius:CGRectGetWidth(bounds)*0.5f
startAngle:0
endAngle:DEGREES_TO_RADIANS(180)
clockwise:NO];
//Add the first half of the bottom part
[drop addCurveToPoint:CGPointMake(CGRectGetWidth(bounds)*0.5f,CGRectGetHeight(bounds))
controlPoint1:CGPointMake(CGRectGetWidth(bounds),CGRectGetWidth(bounds)*0.5f+CGRectGetHeight(bounds)*0.1f)]
controlPoint2:CGPointMake(CGRectGetWidth(bounds)*0.6f,CGRectGetHeight(bounds)*0.8f)];
//Add the second half of the bottom part beginning from the sharp corner
[drop addCurveToPoint:CGPointMake(0,CGRectGetWidth(bounds)*0.5f)
controlPoint1:CGPointMake(CGRectGetWidth(bounds)*0.4f,CGRectGetHeight(bounds)*0.8f)
controlPoint2:CGPointMake(0,CGRectGetWidth(bounds)*0.5f+CGRectGetHeight(bounds)*0.1f)];
[drop closePath];
Not entirely sure if this works since I couldn't test it right now. You might have to play with the controls points a bit. It could be that I made some error with the orientation.
I'm trying to animate a bezier curve I made with Paintcode (great app, btw) and am drawing in a custom UIView in the "drawRect" method.
The drawing works fine but I want to animate a single point in the bezier curve.
Here's my non-working method:
-(void)animateFlame{
NSLog(#"Animating");
// Create the starting path. Your curved line.
//UIBezierPath * startPath;
// Create the end path. Your straight line.
//UIBezierPath * endPath = [self generateFlame];
//[endPath moveToPoint: CGPointMake(167.47, 214)];
int displacementX = (((int)arc4random()%50))-25;
int displacementY = (((int)arc4random()%30))-15;
NSLog(#"%i %i",displacementX,displacementY);
UIBezierPath* theBezierPath = [UIBezierPath bezierPath];
[theBezierPath moveToPoint: CGPointMake(167.47, 214)];
[theBezierPath addCurveToPoint: CGPointMake(181+displacementX, 100+displacementY) controlPoint1: CGPointMake(89.74, 214) controlPoint2: CGPointMake(192.78+displacementX, 76.52+displacementY)];
[theBezierPath addCurveToPoint: CGPointMake(167.47, 214) controlPoint1: CGPointMake(169.22+displacementX, 123.48+displacementY) controlPoint2: CGPointMake(245.2, 214)];
[theBezierPath closePath];
// Create the shape layer to display and animate the line.
CAShapeLayer * myLineShapeLayer = [[CAShapeLayer alloc] init];
CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:#"path"];
pathAnimation.fromValue = (__bridge id)[bezierPath CGPath];
pathAnimation.toValue = (__bridge id)[theBezierPath CGPath];
pathAnimation.duration = 0.39f;
[myLineShapeLayer addAnimation:pathAnimation forKey:#"pathAnimation"];
bezierPath = theBezierPath;
}
Using this, nothing moves on the screen at all. The random displacements generated are good and the bezierPath variable is a UIBezierPath that's declared with a class scope.
Am I missing something? (The goal is to do a sort of candle-like animation)
Quick Edit
Just seen your layer code. You are mixing up several different concepts. Like drawRect, CAShapeLayer, old animation code etc...
By doing the method below you should be able to get this working.
You can't do this :( you can't animate the contents of drawRect (i.e. you can't get it to draw multiple times over the course of the animation).
You may be able to use a timer or something and create your own animation type code. (i.e. create a timer that fires 30 times a second and runs a function that calculates where you are in the animation and updates the values you want to change and calls [self setNeedsDisplay]; to trigger the draw rect method.
Other than that there isn't much you can do.
ANOTHER EDIT
Just adding another option here. Doing this with a CAShapeLayer might be very poor performance. You might be best using a UIImageView with a series of UIImages.
There are built in properties, animationImages, animationDuration, etc... on UIImageView.
POSSIBLE SOLUTION
The path property of CAShapeLayer is animatable and so you could possible use this.
Something like...
// set up properties for path
#property (nonatomic, assign) CGPath startPath;
#property (nonatomic, assign) CGPath endPath;
#property (nonatomic, strong) CAShapeLayer *pathLayer;
// create the startPath
UIBezierPath *path = [UIBezierPath //create your path using the paint code code
self.startPath = path.CGPath;
// create the end path
path = [UIBezierPath //create your path using the paint code code
self.endPath = path.CGPath;
// create the shapee layer
self.pathLayer = [CAShapeLayer layer];
self.pathLayer.path = self.startPath;
//also set line width, colour, shadows, etc...
[self.view.layer addSubLayer:self.pathLayer];
Then you should be able to animate the path like this...
- (void)animatePath
{
[UIView animateWithDuration:2.0
animations^() {
self.pathlayer.path = self.endPath;
}];
}
There are lots of notes in the docs about CAShapeLayer and animating the path property.
This should work though.
Also, get rid of the old animation code. It has been gone since iOS4.3 you should be using the updated block animations.
I am wondering if it is possible to clip a view to a Bezier Path. What I mean is that I want to be able to see the view only in the region within the closed Bezier Path. The reason for this is that I have the outline of an irregular shape, and I want to fill in the shape gradually with a solid color from top to bottom. If I could make it so that a certain view is only visible within the path then I could simply create a UIView of the color I want and then change the y coordinate of its frame as I please, effectively filling in the shape. If anyone has any better ideas for how to implement this that would be greatly appreciated. For the record the filling of the shape will match the y value of the users finger, so it can't be a continuous animation. Thanks.
Update (a very long time later):
I tried your answer, Rob, and it works great except for one thing. My intention was to move the view being masked while the mask remains in the same place on screen. This is so that I can give the impression of the mask being "filled up" by the view. The problem is that with the code I have written based on your answer, when I move the view the mask moves with it. I understand that that is to be expected because all I did was add it as the mask of the view so it stands to reason that it will move if the thing it's tied to moves. I tried adding the mask as a sublayer of the superview so that it stays put, but that had very weird results. Here is my code:
self.test = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
self.test.backgroundColor = [UIColor greenColor];
[self.view addSubview:self.test];
UIBezierPath *myClippingPath = [UIBezierPath bezierPath];
[myClippingPath moveToPoint:CGPointMake(100, 100)];
[myClippingPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(self.screenWidth, 0) controlPoint2:CGPointMake(self.screenWidth, 50)];
[myClippingPath closePath];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = myClippingPath.CGPath;
self.test.layer.mask = mask;
CGRect firstFrame = self.test.frame;
firstFrame.origin.x += 100;
[UIView animateWithDuration:3 animations:^{
self.test.frame = firstFrame;
}];
Thanks for the help already.
You can do this easily by setting your view's layer mask to a CAShapeLayer.
UIBezierPath *myClippingPath = ...
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = myClippingPath.CGPath;
myView.layer.mask = mask;
You will need to add the QuartzCore framework to your target if you haven't already.
In Swift ...
let yourCarefullyDrawnPath = UIBezierPath( .. blah blah
let maskForYourPath = CAShapeLayer()
maskForYourPath.path = carefullyRoundedBox.CGPath
layer.mask = maskForYourPath
Just an example of Rob's solution, there's a UIWebView sitting as a subview of a UIView called smoothView. smoothView uses bezierPathWithRoundedRect to make a rounded gray background (notice on right). That works fine.
But if smoothView has only normal clip-subviews, you get this:
If you do what Rob says, you get the rounded corners in smoothView and all subviews ...
Great stuff.
I want to achieve the shape shown in image using UIBezier Path, and too the shape is filled with blocks in image it shows one block is filled, how to achieve this.
I have tried the following code taken from here
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 10)];
[path addQuadCurveToPoint:CGPointMake(200, 10) controlPoint:CGPointMake(100, 5)];
[path addLineToPoint:CGPointMake(200, 0)];
[path addLineToPoint:CGPointMake(0, 0)];
[path closePath];
Thanks.
It looks to me like both the outline and also each block has the same shape. What you would probably do is to make one shape for the outline, and stroke it, and one shape for each cell and fill it.
Creating the shape
Each shape could be created something like this (as I've previously explained in this answer). It's done by stroking one path (the orange arc) which is a simple arc from one angle to another to get another path (the dashed outline)
Before we can stroke the path we to create it. CGPath's work just like UIBezierPath but with a C API. First we move to the start point, then we add an arc around the center from the one angle to another angle.
CGMutablePathRef arc = CGPathCreateMutable();
CGPathMoveToPoint(arc, NULL,
startPoint.x, startPoint.y);
CGPathAddArc(arc, NULL,
centerPoint.x, centerPoint.y,
radius,
startAngle,
endAngle,
YES);
Now that we have the centered arc, we can create one shape path by stroking it with a certain width. The resulting path is going to have the two straight lines (because we specify the "butt" line cap style) and the two arcs (inner and outer). As you saw in the image above, the stroke happens from the center an equal distance inwards and outwards.
CGFloat lineWidth = 10.0;
CGPathRef strokedArc =
CGPathCreateCopyByStrokingPath(arc, NULL,
lineWidth,
kCGLineCapButt,
kCGLineJoinMiter, // the default
10); // 10 is default miter limit
You would do this a couple of times to create one path for the stroked outline and one path for each cell.
Drawing the shape
Depending on if it's the outline or a cell you would either stroke it or fill it. You can either do this with Core Graphics inside drawRect: or with Core Animation using CAShapeLayers. Choose one and don't between them :)
Core Graphics
When using Core Graphics (inside drawRect:) you get the graphics context, configure the colors on it and then stroke the path. For example, the outline with a gray fill color and a black stroke color would look like this:
I know that your shape is filled white (or maybe it's clear) with a light blue stroke but I already had a gray and black image and I didn't want to create a new one ;)
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextAddPath(c, strokedArc); // the path we created above
CGContextSetFillColorWithColor(c, [UIColor lightGrayColor].CGColor);
CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
CGContextDrawPath(c, kCGPathFillStroke); // both fill and stroke
That will put something like this on screen
Core Animation
The same drawing could be done with a shape layer like this:
CAShapeLayer *outline = [CAShapeLayer layer];
outline.fillColor = [UIColor lightGrayColor].CGColor;
outline.strokeColor = [UIColor blackColor].CGColor;
outline.lineWidth = 1.0;
outline.path = strokedArc; // the path we created above
[self.view.layer addSublayer: outline];
I need help with drawing something like this:
I have been told that the gray background bar and the purple bar should be drawn on separate layers. And then the dots there that signifies the chapters of a book (which this slider is about) will be on a layer on top of those two.
I have accomplished the task of creating the gradient on the active bar and drawing it like so:
- (void)drawRect:(CGRect)rect{
self.opaque=NO;
CGRect viewRect = self.bounds;
//NSLog(#"innerRect width is: %f", innerRect.size.width);
CGFloat perPageWidth = viewRect.size.width/[self.model.book.totalPages floatValue];
NSLog(#"perpage width is: %f", perPageWidth);
CGContextRef context = UIGraphicsGetCurrentContext();
UIBezierPath *beizerPathForSegment= [UIBezierPath bezierPath];
NSArray *arrayFromReadingSessionsSet =[self.model.readingSessions allObjects];
NSArray *arrayFromAssesmentSet = [self.model.studentAssessments allObjects];
NSLog(#"array is : %#", self.model.readingSessions);
CGGradientRef gradient = [self gradient];
for (int i=0;i<[arrayFromReadingSessionsSet count]; i++) {
ReadingSession *tempRSObj= [arrayFromReadingSessionsSet objectAtIndex:i];
CGFloat pageDifference = [tempRSObj.endPage floatValue]-[tempRSObj.startPage floatValue];
NSLog(#"startpage is: %#, end page is: %#, total pages are: %#", tempRSObj.startPage, tempRSObj.endPage, self.model.book.totalPages) ;
CGRect ProgressIndicator = CGRectMake(perPageWidth*[tempRSObj.startPage floatValue], viewRect.origin.y, perPageWidth*pageDifference, viewRect.size.height);
[beizerPathForSegment appendPath:[UIBezierPath bezierPathWithRoundedRect:ProgressIndicator cornerRadius:13.0]];
}
[beizerPathForSegment addClip];
CGContextDrawLinearGradient(context, gradient, CGPointMake(CGRectGetMidX([beizerPathForSegment bounds]), CGRectGetMaxY([beizerPathForSegment bounds])),CGPointMake(CGRectGetMidX([beizerPathForSegment bounds]), 0), (CGGradientDrawingOptions)NULL);
}
How do I shift it onto a layer and then create another layer and another layer and then put them over one another?
TIA
I’m guessing the person you spoke with was referring to CALayer. In iOS, every view has a CALayer backing it. Instead of implementing -drawRect: in your view, do this:
link with QuartzCore
#import <QuartzCore/QuartzCore.h> anywhere you want to use this.
Use to your view’s layer property.
Layers behave a lot like views, in that you can have sublayers and superlayers, and layers have properties for things like background color, and they can be animated. A couple of subclasses that will probably be useful for your purposes are CAGradientLayer and CAShapeLayer. For more on how to use layers, refer to the Core Animation Programming Guide.