How can I draw a cloud shape using UIBezierPath?
I am trying to draw a cloud-like shape using UIBezierPath, and I am seeing
a line on the screen, but it isn't anything close to what I am going for.
Conceptually, I would like to start at a point and draw an arc (maybe
about 1/3 of a circle), and then when that shape is done drawing, I'd like
to draw another one right after it, in a circular motion. So that when I
am done drawing, I have a round, cloud-like creation.
Here is the code I am using to draw the UIBezierPath:
- (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 = 5.0;
animateStrokeEnd.fromValue = [NSNumber numberWithFloat:0.0f];
animateStrokeEnd.toValue = [NSNumber numberWithFloat:1.0f];
[bezier addAnimation:animateStrokeEnd forKey:@"strokeEndAnimation"];
}
}
But the real struggle comes with making the UIBezierPath match the pattern
I am looking for. Here is what I have for that:
- (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 < 10; f++)
{
[path addArcWithCenter:path.currentPoint radius:75 startAngle:0
endAngle:DEGREES_TO_RADIANS(135) clockwise:YES];
[path addLineToPoint:point];
}
return path;
}
I thought that if I just kept adding to the currentPoint of the path that
that would update as I went and I'd be getting somewhere. But it's not
even close. Can I get a nudge in the right direction?
No comments:
Post a Comment