Stack Overflow
Stack Overflow

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.

887 questions
78
votes
5 answers

How to draw a smooth circle with CAShapeLayer and UIBezierPath?

I am attempting to draw a stroked circle by using a CAShapeLayer and setting a circular path on it. However, this method is consistently less accurate when rendered to the screen than using borderRadius or drawing the path in a CGContextRef…
bcherry
  • 6,782
  • 2
  • 26
  • 35
41
votes
4 answers

Animate CAShapeLayer path on animated bounds change

I have a CAShapeLayer (which is the layer of a UIView subclass) whose path should update whenever the view's bounds size changes. For this, I have overridden the layer's setBounds: method to reset the path: @interface CustomShapeLayer :…
Ole Begemann
  • 132,868
  • 29
  • 267
  • 251
35
votes
2 answers

An easy way to draw a circle using CAShapeLayer

In questions like How to draw a smooth circle..., ...Draw Circle... and ...draw filled Circles the question and answer is very broad, contains lots of unnecessary steps and the methods used isn't always the easiest to re-create or manage. What is an…
Aleksander Azizi
  • 9,595
  • 8
  • 57
  • 86
34
votes
3 answers

Applying a Gradient to CAShapeLayer

Does anyone have any experience in applying a Gradient to a CAShapeLayer? CAShapeLayer is a fantastic layer class, but it appears to only support solid fill coloring, whereas I'd like it to have a gradient fill (actually an animatable gradient at…
user366126
  • 471
  • 1
  • 5
  • 6
22
votes
7 answers

UIBezierPath Triangle with rounded edges

I have designed this code to generate a Bezier Path that is used as a path for a CAShapeLayer to mask a UIView (the view's height and width are variable) This code generates a triangle with sharp edges, but I would like to make it round cornered! I…
H Bellamy
  • 20,906
  • 22
  • 68
  • 110
19
votes
1 answer

How to animate CAShapeLayer path and fillColor

How to animate CAShapeLayer path and fillColor? How to animate strokeEnd to show the path being drawn? and how to animate fillColor?
MAMN84
  • 1,340
  • 2
  • 13
  • 22
17
votes
2 answers

Can I change a strokeEnd property without animation?

I can't seem to remove the animation from the strokeEnd property of my CAShapeLayer. The documentation says the property is animatable but not that is animated by default and I can't pinpoint the problem. Any suggestions where to look? Here's my…
Tieme
  • 53,990
  • 18
  • 90
  • 147
17
votes
3 answers

Mask a UIView with a cut-out circle

I’ve created a UIView with a semi-transparent black background to sit across my main app’s view. What I’m aiming for here is to create a cut-out circle shape somewhere in that UIView where the semi-transparent black background is not seen, giving…
Luke
  • 8,709
  • 14
  • 74
  • 140
17
votes
5 answers

UIImagePickerController editing view circle overlay

I've been able to get pretty far with what I've been wanting to accomplish, and that's to replicate iOS's built in circular photo cropper for the built in contacts app. However, I'm stuck at trying to get my CAShapeLayers made correctly. I'm trying…
klcjr89
  • 5,662
  • 9
  • 54
  • 91
17
votes
4 answers

Animating CAShapeLayer size change

I am drawing a circle, with an initial radius of 200 self.circle = [CAShapeLayer layer]; self.circle.fillColor = nil; self.circle.strokeColor = [UIColor blackColor].CGColor; self.circle.lineWidth = 7; self.circle.bounds = CGRectMake(0, 0, 2 *…
Jonathan
  • 10,693
  • 16
  • 74
  • 110
16
votes
1 answer

Setting correct frame of a newly created CAShapeLayer

In short: Apple does NOT set the frame or bounds for a CAShapeLayer automatically (and Apple HAS NOT implemented an equivalent of [UIView sizeThatFits]) If you set the frame using the size of the bounding-box of the path ... everything goes wrong.…
Adam
  • 32,197
  • 16
  • 119
  • 146
16
votes
4 answers

How to fill a CAShapeLayer with an angled gradient

How do I fill a CAShapeLayer() with a gradient and on an angle of 45 degrees? For example, in Image 1, the below code draws a square and fills the layer blue (UIColor.blueColor().CGColor). But, how do I fill it with a gradient on a 45 degree angle…
user4806509
  • 2,674
  • 3
  • 33
  • 63
15
votes
1 answer

How to make my UIBezierPath animated with CAShapeLayer?

I'm trying to animate a UIBezierPath and I've installed a CAShapeLayer to try to do it. Unfortunately the animation isn't working and I'm not sure any of the layers are having any affect (as the code is doing the same thing it was doing before I had…
marina
  • 767
  • 2
  • 7
  • 22
14
votes
3 answers

Draw circle with UIBezierPath

I'm trying to draw a circle using UIBezierPath addArcWithCenter method : UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0., 0., 100., 100.)]; [bezierPath addArcWithCenter:center radius:0. …
Mosbah
  • 1,442
  • 1
  • 13
  • 27
13
votes
3 answers

How to mask and add shadow to a UIView

I'm making a custom view that i want to mask and to add shadow to it. the masking: let p = UIBezierPath() p.moveToPoint(CGPointMake(20, 20)) p.addLineToPoint(CGPointMake(100, 20)) p.addLineToPoint(CGPointMake(100, 50)) …
ilan
  • 4,070
  • 5
  • 31
  • 70
1
2 3
…
59 60