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
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…
pikovayadama
  • 808
  • 2
  • 8
  • 26
14
votes
1 answer

CALayer vs CGContext, which is a better design approach?

I have been doing some experimenting with iOS drawing. To do a practical exercise I wrote a BarChart component. The following is the class diagram (well, I wasnt allowed to upload images) so let me write it in words. I have a NGBarChartView which…
Murali Raghuram
  • 255
  • 2
  • 8
13
votes
4 answers

start and end angle of UIBezierPath?

I have coded as below for half circle in iOS using UIBezierPath and CAShapeLayer. clockWiseLayer = [[CAShapeLayer alloc] init]; CGFloat startAngle = -M_PI_2; CGFloat endAngle = M_PI + M_PI_2; CGFloat width = CGRectGetWidth(imageView.frame)/2.0f +…
Sam Shaikh
  • 1,596
  • 6
  • 29
  • 53
13
votes
5 answers

iOS animate/morph shape from circle to square

I try to change a circle into a square and vice versa and I am almost there. However it doesn't animates as expected. I would like all corners of a square to be animated/morphed at the same time but what I get is the following: I use CAShapeLayer…
fgeorgiew
  • 1,194
  • 2
  • 8
  • 25
13
votes
4 answers

Frame and Bounds of CAShapeLayer

I am working on CAShapeLayer.And trying to draw non-linear path.I want to set frame to CAShapeLayer.So i can use CGPathGetPathBoundingBox method to get frame from CGPathRef. Here is code : CGMutablePathRef path =…
h999
  • 395
  • 1
  • 5
  • 21
13
votes
3 answers

Scale CGPath to Fit UIVIew

I need to know how I can scale down or up CGPath so it can fit UIView? Set the background color to yellow, To see the view clearly self.frame = CGRectMake(0, 0, 181, 154); self.backgroundColor = [UIColor yellowColor]; Draw CAShapeLayer CAShapeLayer…
MAMN84
  • 1,400
  • 2
  • 13
  • 22
12
votes
1 answer

UIView Layer Mask Animate

I am trying to animate the mask layer on a UIView. Basically this code displays the image below: let bounds: CGRect = self.manualWBMaskView!.bounds let maskLayer: CAShapeLayer = CAShapeLayer() maskLayer.frame = bounds maskLayer.fillColor =…
Gizmodo
  • 3,151
  • 7
  • 45
  • 92
12
votes
2 answers

Animate a CAShapeLayer to draw a progress circle

I am trying to draw a circle that will be used to indicate progress. The progress updates might come in quickly, and I want to animate the changes to the circle. I have tried doing this with the below methods, but nothing seems to work. Is this…
Nic Hubbard
  • 41,587
  • 63
  • 251
  • 412
11
votes
3 answers

clip-masking uiview with CAShapeLayer and UIBezierPath

I have a problem clipping a view using CAShapeLayer-UIBezierPath , I want to clip the content but I end up getting a stroke (frame) with that UIBezierPath , This is my code UIBezierPath *path2Path = [UIBezierPath bezierPath]; [path2Path…
Aproram
  • 348
  • 1
  • 3
  • 16
11
votes
1 answer

"invalid context 0x0" when using UIBezierPath and CAShapeLayer

I am having a predicament that's very similar to the one described in this SO thread. I read through every answer on that thread and was unable to find any that solved my problem. I've narrowed down my problem to 4 lines inside of the function…
rebello95
  • 8,486
  • 5
  • 44
  • 65
11
votes
2 answers

Trim/subtract CGPath from CGPath?

I have some CGPath (a poly with two circle) carried out on a CAShapeLayer. Can I trim/subtract paths like this?
Geri Borbás
  • 15,810
  • 18
  • 109
  • 172
11
votes
2 answers

How to add a circular mask to a UIImageview and change the frame and centers while doing so?

I would like to add a circular mask to UIImageVIew. Here is the function that am using to add the mask.. - (void) addMaskToBounds:(CGRect) maskBounds { CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init]; CGPathRef maskPath =…
akshaynhegde
  • 1,938
  • 3
  • 17
  • 36
11
votes
2 answers

Create custom rounded rectangle button corner on top-left?

I have a custom button that I want to make top-left border of it look like normal round rectangle. I found code that makes all corners round: _myButton.layer.cornerRadius = 8; _myButton.layer.borderWidth = 0.5; _myButton.layer.borderColor = [UIColor…
Ali
  • 9,800
  • 19
  • 72
  • 152
10
votes
2 answers

Animate drawing the fill of a CAShapeLayer

I've been playing around with drawing a path using a CAShapeLayer as outlined in this great article, http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer, but I'm wondering if there's a way to animate the filling of a…
Colin Humber
  • 1,395
  • 1
  • 16
  • 23
10
votes
3 answers

Round Top Corners of a UIView in Swift

I am trying to round top corners using below code func roundCorners(corners:UIRectCorner, radius: CGFloat) { let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, …
1
2
3
63 64