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

}