[英]CGContext draw rotated rectangles
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.
为此,我首先绘制一个CGPath,然后将转换应用于上下文。 I do it in succession 5 times.
我连续做5次。 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. 这是屏幕截图。
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()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.