Questions tagged [cashapelayer]

CAShapeLayer is a special purpose CALayer subclass for drawing animatable shapes using cubic Bezier splines. It's a part of the QuartzCore framework and is available for both iOS (since iOS 3.0) and OS X (since OS X v10.6 "Snow Leopard").

CAShapeLayer is a special purpose CALayer subclass for drawing animatable shapes using cubic Bezier splines. It's a part of the framework and is available for both (since iOS 3.0) and (since OS X v10.6 "Snow Leopard").

The shapes is defined using the path property and can be both filled and stroked using the fillColor and strokeColor properties. Note that the backgroundColor property inherited from CALayer does not fill the shape. The path of the shape is animatable (but doesn't support implicit animations) but the appearance of the animation is undefined if the two paths have a different number of control points or segments.

There are several properties (animatable) to configure how the shape is stroked and filled. Using these properties the stroke can for example get a moving dashed patten (commonly called "marching ants").

The strokeStart and strokeEnd properties can also be used to only stroke part of the shape or to animate the shape being stroked. Both values go from 0.0 (beginning of path) to 1.0 (end of path) and values in between are interpolated along the path.


The page about Paths in the Quartz 2D Programming Guide is a great resource for learning more about creating paths, stroking, rounding and joining paths, filling paths and creating dash patterns.

951 questions
2
votes
0 answers

Getting Frame for CAGradientLayer from CAShapeLayer

I have a custom CAShapeLayer class and there I am drawing a circular image using “ bezierPathWithArcCenter ” with some stroke color. That works fine and I am getting a circular image. Now to add a gradient to this. I have add the below lines…
Manoj
  • 1,482
  • 2
  • 20
  • 53
2
votes
2 answers

Animate path of shape layer

I'm stumped by what I thought would be a simple problem. I'd like to draw views connected by lines, animate the position of the views and have the connecting line animate too. I create the views, and create a line between them like this: -…
user1272965
  • 2,814
  • 8
  • 29
  • 49
2
votes
1 answer

Expanding a circle from centre of the Screen

I am trying to expand a circle from Zero radius to a predefined radius at the centre of the screen. The code is as follows In viewDidLoad:- - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view,…
2
votes
1 answer

Using hitTest on a CALayer - how do you find which layer was hit (Swift)?

How do you find the actual layer that was hit? At the moment I have numerous CAShapeLayers, and I want each one to do something when it is tapped. But when any one of them is tapped, an action happens to all of them. This is my code so far: if…
John
  • 139
  • 1
  • 1
  • 11
2
votes
2 answers

Draw a circle on a Long Press event

I am drawing a circle on the screen as the user taps on a button. The animation duration is already set and also the from and to value are also set. What I want to achieve is that somehow the animation should commence as the user long presses the…
2
votes
1 answer

CAShapeLayer’s strokeEnd doesn’t animate

This is the code I’m using to animate my CAShapeLayer: _progressBarLayer.strokeEnd = CGFloat(_progressToDrawForProgress(progress)) let progressAnimation = CABasicAnimation(keyPath: "strokeEnd") progressAnimation.duration =…
Adam Carter
  • 4,741
  • 5
  • 42
  • 103
2
votes
2 answers

Recreate Apple Watch fitness tracker ‘progress’ bar - gradient on CAShapeLayer stroke

I'm writing an app that could make good use of the Apple Watch's fitness tracker design, here: So far, I've created the basic outline which is just a CAShapeLayer with a CGPath of an ellipse. I use strokeStart and strokeEnd to animate the progress.…
Adam Carter
  • 4,741
  • 5
  • 42
  • 103
2
votes
1 answer

How to make a CAShapeLayer throw a shadow in iPhone OS 3.0?

I'm using a CAShapeLayer with a path. Now I want it to throw a smooth shadow with about 10 units of thickness. First: Yeah, I could create just 11 CAShapeLayer objects and each time increase the outline of the path by 1 unit with an different color…
dontWatchMyProfile
  • 45,440
  • 50
  • 177
  • 260
2
votes
1 answer

animating strokeEnd in a CAShapeLayer using an animation block in Swift

I am attempting to trace out the shape of a path that I've place into a CAShapeLayer. In this function, the points in the points array represent the vertices of a regular polygon. The animation isn't happening, though. It's just appearing,…
Greg
  • 451
  • 6
  • 13
2
votes
1 answer

CAShapeLayer shape not displaying

My CAShapeLayer is not being displayed. I'm trying to create a shape by looping through an array of CGPoints. I need to use either an array or dictionary so I can later add different sets of CGPoints to create more complex shapes. var shapeLayer =…
hackintosh
  • 21
  • 3
2
votes
1 answer

Swift- animate CAshapeLayer stroke color

I'm trying to find a way to animate the color of the stroke that I am creating circleLayer = CAShapeLayer() circleLayer.path = circlePath.CGPath circleLayer.lineCap = kCALineCapRound circleLayer.fillColor =…
Roi Mulia
  • 5,626
  • 11
  • 54
  • 105
2
votes
2 answers

Swift-animate CAshapeLayer stroke color

I'm trying to find a way to animate the color of the stroke that I am creating circleLayer = CAShapeLayer() circleLayer.path = circlePath.CGPath circleLayer.lineCap = kCALineCapRound circleLayer.fillColor =…
Roi Mulia
  • 5,626
  • 11
  • 54
  • 105
2
votes
1 answer

How to animate a drawn line in Objective C?

I am trying to animate drawn objects, for example I have drawn a line with this approach: UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(Center.x, Center.y)]; [path…
Shamy
  • 723
  • 1
  • 8
  • 13
2
votes
0 answers

CAShapeLayer and UIBezierPath Sharpness and Smoothness

I am having issues drawing sharp and smooth graphics. This is what I have: CGRect photoIconRect = CGRectMake(0, 0, 48, 48); CAShapeLayer* photoIconLayer = [CAShapeLayer layer]; photoIconLayer.frame = photoIconRect; UIBezierPath* photoIconPath =…
Gizmodo
  • 3,151
  • 7
  • 45
  • 92
2
votes
2 answers

Custom layer mask for UIView

I am trying to create a layer mask for a UIView which will server as a slide out panel. The effect I need for this a rounded bottom right corner that is inset about 50 pixels. So far, I've been able to achieve this effect by creating a UIView xib…
Pheepster
  • 6,045
  • 6
  • 41
  • 75