CGContext draw rotated rectangles

Question

I am trying to draw rectangles that are separated by equal angles. To do this, I first draw a CGPath and then apply a transform to context. I do it in succession 5 times. Here is my code and output. As you can see, output in screenshot is not correct, rectangles get skewed, not sure why. Need to know what I am doing wrong. And I believe I am doing an overkill, there might be a simpler way to achieve this. Please point me in the right direction.

  override func draw(_ rect: CGRect) {
    // Drawing code

    guard let context = UIGraphicsGetCurrentContext() else { return }

    context.setFillColor(UIColor.black.withAlphaComponent(0.35).cgColor)

    let pathWidth = CGFloat(40)
    let pathHeight = CGFloat(20)

    context.saveGState()

    let path = CGMutablePath()
    path.addRect(CGRect(x: rect.midX - pathWidth/2, y: rect.midY - pathHeight/2, width: pathWidth, height: pathHeight))
    context.addPath(path)
    context.drawPath(using: .fill)

    context.restoreGState()

    context.saveGState()
    let path2 = CGMutablePath()
    path2.addRect(CGRect(x: rect.midX - pathWidth/2, y: rect.midY - pathHeight/2, width: pathWidth, height: pathHeight))

    context.translateBy(x: 0, y: rect.height/2)
    context.rotate(by: -CGFloat.pi/20)
    context.translateBy(x: 0, y: -rect.height/2)
    context.addPath(path2)
    context.drawPath(using: .fill)
    context.restoreGState()

    context.saveGState()
    let path3 = CGMutablePath()
    path3.addRect(CGRect(x: rect.midX - pathWidth/2, y: rect.midY - pathHeight/2, width: pathWidth, height: pathHeight))

    context.translateBy(x: 0, y: rect.height/2)
    context.rotate(by: -2*CGFloat.pi/20)
    context.translateBy(x: 0, y: -rect.height/2)

    context.addPath(path3)
    context.drawPath(using: .fill)
    context.restoreGState()

    context.saveGState()
    let path4 = CGMutablePath()
    path4.addRect(CGRect(x: rect.midX - pathWidth/2, y: rect.midY - pathHeight/2, width: pathWidth, height: pathHeight))

    context.translateBy(x: 0, y: rect.height/2)
    context.rotate(by: -3*CGFloat.pi/20)
    context.translateBy(x: 0, y: -rect.height/2)

    context.addPath(path4)
    context.drawPath(using: .fill)
    context.restoreGState()

    context.saveGState()
    let path5 = CGMutablePath()
    path5.addRect(CGRect(x: rect.midX - pathWidth/2, y: rect.midY - pathHeight/2, width: pathWidth, height: pathHeight))

    context.translateBy(x: 0, y: rect.height/2)
    context.rotate(by: -4*CGFloat.pi/20)
    context.translateBy(x: 0, y: -rect.height/2)

    context.addPath(path5)
    context.drawPath(using: .fill)
    context.restoreGState()


    context.saveGState()
    let path6 = CGMutablePath()
    path4.addRect(CGRect(x: rect.midX - 10, y: rect.midY - 0.5, width: 20, height: 1))

    context.translateBy(x: 0, y: rect.height/2)
    context.rotate(by: -5*CGFloat.pi/20)
    context.translateBy(x: 0, y: -rect.height/2)

    context.addPath(path6)
    context.drawPath(using: .fill)
    context.restoreGState()

}

This is the screenshot.

Answer 1

You may try the following code, which should have no skewed.

          var myLayer: CGLayer!
override func draw(_ rect: CGRect) {
    // Drawing code

    guard let context = UIGraphicsGetCurrentContext() else { return }

    context.setFillColor(UIColor.black.withAlphaComponent(0.35).cgColor)

    let pathWidth = CGFloat(40)
    let pathHeight = CGFloat(20)

     myLayer = CGLayer.init(context, size: CGSize.init(width: pathWidth, height: pathHeight), auxiliaryInfo: nil)
    let contex = myLayer.context
    let path = CGMutablePath()
    path.addRect(CGRect(x: 0, y: 0, width: pathWidth, height: pathHeight))
    contex?.addPath(path)
     contex?.setFillColor(UIColor.black.withAlphaComponent(0.35).cgColor)
    contex?.drawPath(using: .fill)


   (0...6).forEach
    {
   context.saveGState()

   context.translateBy(x: 0, y: rect.height/2)
   context.rotate(by: -CGFloat.pi * CGFloat($0) / 20)
   context.draw(myLayer!, at: CGPoint(x: rect.width / 2, y: -pathHeight / 2))

   context.restoreGState()
    }

a more precise result is shown as following:

  (0...6).forEach
    {
   context.saveGState()

        let angle = CGFloat.pi * -CGFloat($0) / 20

        context.translateBy(x: 0, y: rect.height/2 + pathHeight/2 + (rect.width + pathWidth)/2 * sin (angle))
        context.translateBy(x: (rect.width + pathWidth)/2 * cos(angle)  , y: 0)

        context.rotate(by:angle)
        context.translateBy(x:  -pathWidth/2, y: -pathHeight / 2)

        context.draw(myLayer!, at: CGPoint.zero)



   context.restoreGState()
    }

}