CGContext绘制旋转的矩形

Question

我正在尝试绘制等角度分隔的矩形。为此，我首先绘制一个CGPath，然后将转换应用于上下文。我连续做5次。这是我的代码和输出。如您所见，屏幕截图中的输出不正确，矩形倾斜，不确定原因。需要知道我在做什么错。而且我相信自己做得太过分了，可能会有更简单的方法来实现这一目标。请指出正确的方向。

  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()

}

这是屏幕截图。

Answer 1

您可以尝试以下代码，该代码应该没有偏斜。

          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()
    }

更精确的结果如下所示：

  (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()
    }

}