如何使用Cocoa Touch（iOS）图形上下文绘图正确地处理角落？

Question

我只是在尝试，习惯于在iOS上使用Quartz 2D绘图。 我使用Graphics Context move（to :)和addLine（_：CGPoint）函数绘制了三个偏移正方形（仅边界线）。 考虑以下结果图：

我只显示顶部，但这足以记录我的问题。 您会看到每个正方形的左上角都是不完整的（尖锐的正方形角），其中右上角看起来不错。 两个底角就像右上角一样，正是我所期望的。

因此，我添加这些行（宽度设置为3.0）的起始位置是使用Graphics Context move（to：CGPoiint）定位的左上角。 只需调用addLine（_：CGPoint）方法即可到达每个后续角。

因此，我在做什么错，导致如图所示的“折断”角。 我如何使该左上角看起来像其他所有人？

代码生成图

override func draw(_ rect: CGRect) {
    let colors: [(CGFloat,CGFloat,CGFloat)] = 
          [(1.0,0.0,0.0),(0.25,1.0,0.5),(0.5,0.5,1.0)]
    let c = UIGraphicsGetCurrentContext()!
    c.setLineWidth(3.0)
    var dx = 0
    var dy = 0
    for q in 1...3 {
        c.move(to:CGPoint(x:dx+50, y:dy+50))
        c.addLine(to:CGPoint(x: dx+200, y: dy+50))
        c.addLine(to:CGPoint(x: dx+200, y: dy+200))
        c.addLine(to:CGPoint(x: dx+50,y: dy+200))
        c.addLine(to:CGPoint(x: dx+50,y: dy+50))
        c.setStrokeColor(
             red:colors[q-1].0
            ,green:colors[q-1].1
            ,blue:colors[q-1].2,alpha:1.0)
        c.strokePath()
        dx += 20
        dy += 20
    }
}

Answer 1

伪影是由较粗的线宽引起的。 您提供的所有尺寸都是针对每条线的中心。 由于您给定的线宽为3，因此每条线将填充中心线每侧1.5个点。

您可以在第一个和最后一个坐标中说明这一点，但这容易出错，并且取决于线宽。

更好的解决方案是使用closePath()而不是添加最后一行。

c.move(to:CGPoint(x:dx+50, y:dy+50))
c.addLine(to:CGPoint(x: dx+200, y: dy+50))
c.addLine(to:CGPoint(x: dx+200, y: dy+200))
c.addLine(to:CGPoint(x: dx+50,y: dy+200))
//c.addLine(to:CGPoint(x: dx+50,y: dy+50)) // not needed any more
c.closePath()

closePath()将从路径的最后一个点到第一个点绘制一条直线。 这还涉及在第一个点的位置处的连接处正确填充该小工件。

最简单的解决方案是使用UIBezierPath绘制矩形，但是手动完成所有操作是学习的好方法。