Drawing sublayers inside a bezier Arc

Question

I'm trying to draw a series of vertical lines inside of an arc but I'm having trouble being able to do this. I'm trying to do this using CAShapeLayers The end result is something that looks like this.

I know how to draw the curved arc and the line segments using CAShapeLayers but what I can't seem to figure out is how to draw the vertical lines inside the CAShapeLayer

My initial approach is to subclass CAShapeLayer and in the subclass, attempt to draw the vertical lines. However, I'm not getting the desired results. Here is my code for adding a line to a bezier point and attempting to add the sub layers.

class CustomLayer : CAShapeLayer {
    override init() {
       super.init()
           }

    func drawDividerLayer(){
        print("Init has been called in custom layer")
        print("The bounds of the custom layer is: \(bounds)")
        print("The frame of the custom layer is: \(frame)")

        let bezierPath = UIBezierPath()


        let dividerShapeLayer = CAShapeLayer()
        dividerShapeLayer.strokeColor = UIColor.redColor().CGColor
        dividerShapeLayer.lineWidth = 1
        let startPoint = CGPointMake(5, 0)
        let endPoint = CGPointMake(5, 8)

        let convertedStart = convertPoint(startPoint, toLayer: dividerShapeLayer)
        let convertedEndPoint = convertPoint(endPoint, toLayer: dividerShapeLayer)

        bezierPath.moveToPoint(convertedStart)
        bezierPath.addLineToPoint(convertedEndPoint)

        dividerShapeLayer.path = bezierPath.CGPath

        addSublayer(dividerShapeLayer)

    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class DrawView : UIView {

    var customDrawLayer : CAShapeLayer!

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        //drawLayers()
    }

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
    }

    func drawLayers() {
        let bezierPath = UIBezierPath()

        let startPoint = CGPointMake(5, 35)
        let endPoint  = CGPointMake(100, 35)

        bezierPath.moveToPoint(startPoint)
        bezierPath.addLineToPoint(endPoint)

        let  customLayer = CustomLayer()
        customLayer.frame = CGPathGetBoundingBox(bezierPath.CGPath)
        customLayer.drawDividerLayer()


        customLayer.strokeColor = UIColor.blackColor().CGColor
        customLayer.opacity = 0.5
        customLayer.lineWidth = 8
        customLayer.fillColor = UIColor.clearColor().CGColor

        layer.addSublayer(customLayer)
        customLayer.path = bezierPath.CGPath

    }

However this code produces this image:

It definitely seems that I have a coordinate space problem/bounds/frame issue but I'm not quite sure. The way I want this to work is to draw from the top of the superLayer to the bottom of the superLayer inside of the CustomLayer class. But not only that, this must work using the bezier path addArcWithCenter: method which I haven't gotten to yet because I'm trying to solve this problem first. Any help would be appreciated.

score 3 · Accepted Answer · answered Dec 08 '15 at 18:46

The easiest way to draw an arc that consists of lines is to use lineDashPattern:

let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: CGFloat(M_PI), clockwise: false)
let arc = CAShapeLayer()
arc.path = path.CGPath
arc.lineWidth = 50
arc.lineDashPattern = [4,15]
arc.strokeColor = UIColor.lightGrayColor().CGColor
arc.fillColor = UIColor.clearColor().CGColor
view.layer.addSublayer(arc)

So this is a blue arc underneath the dashed arc shown above. Obviously, I enlarged it for the sake of visibility, but it illustrates the idea.

Perfect! does exactly what I need. Thank you!! – zic10 Dec 08 '15 at 18:51 — zic10, Dec 08 '15 at 18:51

Drawing sublayers inside a bezier Arc

1 Answers1