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
3
votes
1 answer

How do you trace the border of an iPhone screen (including the notch for an X, 11, or 12 series)?

I'm trying to trace a line around the outside of the main view - trace along the edge of the screen. The following image shows the outline, and the code below shows how it animates. The problem is, the animation draws the outer edge first, and then…
Jeffrey Berthiaume
  • 4,054
  • 3
  • 35
  • 45
3
votes
1 answer

Refresh draw function without removing sub layers

I tried to create an activity graphs, like the activity graph on Apple watch. (3 rings with animation) here is my full code: private(set) var animationTime: [CFTimeInterval] = [1, 1, 1] private(set) var values: [Double] = [0, 0, 0] private(set) var…
Martin sku
  • 101
  • 7
3
votes
1 answer

An issue with CAShapeLayer and UIBezierPath drawing circle counterclockwise

I'm trying to draw a circle that starts and ends at 12 o'clock counterclockwise. The issue I'm having is that the shape is not being drawn. Im' using init(arcCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise:…
Borys T
  • 239
  • 2
  • 13
3
votes
0 answers

How to manage memory when using draw(in ctx: CGContext) in a custom CAShapeLayer?

I am creating a SVG coloring application an i have a custom CAShapeLayer for drawing radial gradients. In my application i usually have around 300 of these layers for a SVG. My code works fine. But the problem is I run out of memory really quickly…
Nilupul Sandeepa
  • 748
  • 6
  • 20
3
votes
2 answers

Draw a diagonal line with side curves UIBezierPath

I want to draw diagonal line with side curves like the following Code: func drawCanvas1(frame: CGRect = CGRect(x: 0, y: 0, width: 240, height: 120)) { //// Bezier Drawing let bezierPath = UIBezierPath() …
Sahil Manchanda
  • 9,812
  • 4
  • 39
  • 89
3
votes
1 answer

Is there a way to composite masks using CAShapeLayer.compositingFilters in Swift?

I'm implementing a drawing function for an iPad app. I'm using UIBezierPaths on CAShapeLayers for the drawing. By creating a new CAShapeLayer for each TouchesBegan event, I'm building an array of 'stacked up' CAShapeLayers that allow me to easily…
eloehfelm
  • 31
  • 3
3
votes
2 answers

How to make a gradient circular path in Swift

I want to create a gradient circular path like the following image: and I have the following code: circularPath = UIBezierPath(arcCenter: .zero, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true) outerTrackShapeLayer =…
Mehdi Mirzaei
  • 376
  • 3
  • 13
3
votes
2 answers

Centering CAShapeLayer within UIView Swift

I'm having trouble centering CAShapeLayer within a UIView. I've search and most solutions are from pre 2015 in Obj C or haven't been solved. Attached is what the image looks like. When I inspect it, its inside the red view, but idk why its not…
Kenny Ho
  • 409
  • 3
  • 16
3
votes
1 answer

Invalidate and Redraw CAShapeLayer inside collectionViewCell after device orientation change

I have a custom collection view cell that is adding a dashed border to the cell layer with the following code: func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell =…
Alex Ritter
  • 1,009
  • 3
  • 18
  • 40
3
votes
1 answer

How to call function from custom UIView class?

I have UIView in my first view controller. I have set that UIView class to Custom Progress View using following code. class ProgressView: UIView { let trackLayer = CAShapeLayer() let shapeLayer = CAShapeLayer() static let instance =…
atalayasa
  • 3,310
  • 25
  • 42
3
votes
0 answers

Apply color gradient to CAShapeLayer stroke

First sorry, when my english is bad.I know, my question sounds like a duplicate, but it is different than the others. As it says in the title I want to add a color gradient to the stroke of an CAShapelayer, not in direction of the stroke, but…
Josef Zoller
  • 921
  • 2
  • 8
  • 24
3
votes
1 answer

Circular BezierPath fills too much vs. given progress value - iOS Swift

I have a circular UIBezierPath & 2x CAShapeLayers that I use to display the progress towards a specific milestone in one of my apps. Problem: when I animate the progress via CABasicAnimation, the progress goes beyond what it should be doing.…
Edouard Barbier
  • 1,815
  • 2
  • 19
  • 32
3
votes
2 answers

SceneKit CALayer unsharp drawing

I'm trying to draw UIBezierPaths and display them on a SCNPlane, though I'm getting a very unsharp result (See in the image) How could I make it sharper? let displayLayer = CAShapeLayer() displayLayer.frame = CGRect(x: 0, y: 0, width: 200,…
Samu Andras
  • 171
  • 1
  • 6
3
votes
1 answer

Adding border to mask layer

I'm trying to make a custom shape UIButton using mask layers and I was successful extension UIButton { func mask(withImage image : UIImage , frame : CGRect ){ let maskingLayer = CAShapeLayer() maskingLayer.frame = frame …
Tarek hemdan
  • 874
  • 2
  • 10
  • 24
3
votes
1 answer

UIBezierPath fill vs CAShapeLayer

I'm trying to draw a simple shape as part of the interface of a game, and most tutorials use a UIBezierPath to define the path of a CAShapeLayer. However, I noticed that UIBezierPath already has an existing fill function. This is probably a stupid…
MysteryPancake
  • 1,365
  • 1
  • 18
  • 47