I'm trying to move a triangle from outside of the UIView bounds into the UIView area.
I'm using UIBezierPath.
While the triangle is outside of the area, I want it to be invisible.
I want only the part of the triangle that is inside the UIView to be visible.
Unfortunately it is visible throughout the animation (while outside of bounds and inside).
This is my code:
UIBezierPath *triangle = [UIBezierPath bezierPath];
[triangle moveToPoint:CGPointMake(X, Y)];
[triangle addLineToPoint:CGPointMake(X - (width*0.5), Y)];
[triangle addLineToPoint:CGPointMake(X, Y + (width*0.5))];
[triangle closePath];
CAShapeLayer *triLayer = [CAShapeLayer layer];
triLayer.frame = testView.bounds;
triLayer.path = triangle.CGPath;
triLayer.strokeColor = [[UIColor redColor] CGColor];
triLayer.fillColor = [[UIColor yellowColor] CGColor];
[testView.layer addSublayer:triLayer];
CABasicAnimation *triangleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.translation.x"];
triangleAnimation.duration=0.5;
triangleAnimation.repeatCount=1;
triangleAnimation.autoreverses=NO;
triangleAnimation.fromValue=[NSNumber numberWithFloat:(width*0.5)];
triangleAnimation.toValue=[NSNumber numberWithFloat:0];
triangleAnimation.removedOnCompletion = NO;
triangleAnimation.fillMode = kCAFillModeForwards;
[triLayer addAnimation:triangleAnimation forKey:#"animateLayer"];
If you have a reference to the superview itself, you can set the clipsToBounds property on it to YES. Otherwise, you can use the CALayer's masksToBounds property to do the same thing.
Use
testView.layer.masksToBounds = YES;
Related
I want to make a UIView which will have shape like in Figure 1. and also should have shadow around the shape of my view .
I am using below code to draw CAShaperLayer with UIBezierPath
UIBezierPath *bezier = [UIBezierPath bezierPath];
[bezier moveToPoint:CGPointMake(0,7)];
[bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-15, 7)];
[bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-10,0)];
[bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-5, 7)];
[bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width, 7)];
[bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width, self.menuView.frame.size.height)];
[bezier addLineToPoint:CGPointMake(0, self.menuView.frame.size.height)];
[bezier closePath];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = [bezier CGPath];
self.menuView.layer.mask = maskLayer;
and for adding shadow
self.menuView.layer.shadowColor = [[UIColor colorWithRed:8.0f/255.0f green:37.0f/255.0f blue:82.0f/225.0f alpha:1] CGColor];
self.menuView.layer.shadowOffset = CGSizeZero;
self.menuView.layer.shadowOpacity = 0.3f;
self.menuView.layer.shadowRadius = 5.0f;
self.menuView.layer.masksToBounds=NO;
My Problem :
After masking CAShaperLayer on menuView ,the shadow has disappeared . Figure 2
Instead of Masking View , i also tried to add Sublayer on it
[self.menuView.layer addSublayer:maskLayer]
but this will hide my all SubViews of MenuView Figure 3
(I have changed the CASahperLayer Color to Black just to show )
🔹 My Question is :
What is the best way to get the perfect shape with shadow as shown in Figure 1 ???.
(Thanks in advance)
extension UIView{
func viewShadowBorder() {
self.layer.shadowColor = UIColor.gray.cgColor
self.layer.shadowOpacity = 1
self.layer.shadowOffset = CGSize.zero
self.layer.shadowRadius = 2
self.layer.cornerRadius = 2
}
}
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 am currently using CAShapeLayer for one of my requirement. I was successful in implementing the fillcolor, strokecolor, etc... but I wanted to change the color of outer part of that CAShapeLayer. I tried doing it with backgroundcolor, & followed many answers from SO, but was unable to do it. Could anyone guide me with the solution. Screenshot attached
Edit 1: Code for creating the layer
// create layer mask for map
CAShapeLayer *maskLayer = [CAShapeLayer layer];
mapView.layer.mask = maskLayer;
// maskLayer.backgroundColor = [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.7] CGColor];
self.maskLayer = maskLayer;
// create shape layer for circle we'll draw on top of map (the boundary of the circle)
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.lineWidth = 3.0;
circleLayer.fillColor = [[UIColor clearColor] CGColor];
circleLayer.strokeColor = [[UIColor blackColor] CGColor];
// circleLayer.borderColor = [[UIColor blackColor] CGColor];
// circleLayer.backgroundColor = [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.7] CGColor];
[mapView.layer addSublayer:circleLayer];
self.circleLayer = circleLayer;
Edit 2: Xcode's Viewer's Debugger
In the above image I can see that I have set the background color to self.view. But I want it to be over my map view & the the color should be semi transparent so that map data outside circle should also be visible.
Have you tried using XCode views's debugger to know where this white background belongs in your view hierarchy ?
You're using your view's maskLayer as a circle. So my guess is that this white background must be OUTSIDE your view - everything out your mask gets clipped - so you should probably try to change your viewController's view backgroundColor (or any other view that is just above your custom rounded view)
[self.view.layer setBackgroundColor:[UIColor grayColor].CGColor];
UIBezierPath *circle = [UIBezierPath bezierPathWithArcCenter:self.view.center
radius:45.0
startAngle:0
endAngle:2.0*M_PI
clockwise:YES];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.bounds = CGRectMake(0, 0, 2.0*(45.0), 2.0*(45.0));
circleLayer.path = circle.CGPath;
circleLayer.strokeColor = [UIColor orangeColor].CGColor;
circleLayer.fillColor = [UIColor whiteColor].CGColor;
circleLayer.lineWidth = 3.0; // your line width
[self.view.layer addSublayer:circleLayer];
See if it helps you.
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
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