如何正确使用Cocoa Touch（iOS）图形上下文绘制？_Ios_Swift_Cocoa Touch_Core Graphics

如何正确使用Cocoa Touch（iOS）图形上下文绘制？

ios swift cocoa-touch

如何正确使用Cocoa Touch（iOS）图形上下文绘制？,ios,swift,cocoa-touch,core-graphics,Ios,Swift,Cocoa Touch,Core Graphics,我只是在尝试，习惯于在iOS上使用Quartz 2D绘图。我使用图形上下文move（to:）和addLine（u:CGPoint）函数绘制了三个偏移正方形（仅限周长线）。考虑下面的结果：我只展示了上面的部分，但足以记录我的问题。您可以看到每个正方形的左上角是不完整的（锐角），而右上角看起来是正常的。底部的两个角落就像右上角，正是我所期望的因此，我添加这些线（宽度设置为3.0）的起始位置是左上角，它使用图形上下文移动（to:cgpoint）定位。只需调用addLine（\ u0:CGPoin

我只是在尝试，习惯于在iOS上使用Quartz 2D绘图。我使用图形上下文move（to:）和addLine（u:CGPoint）函数绘制了三个偏移正方形（仅限周长线）。考虑下面的结果：

我只展示了上面的部分，但足以记录我的问题。您可以看到每个正方形的左上角是不完整的（锐角），而右上角看起来是正常的。底部的两个角落就像右上角，正是我所期望的

因此，我添加这些线（宽度设置为3.0）的起始位置是左上角，它使用图形上下文移动（to:cgpoint）定位。只需调用addLine（\ u0: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
    }
}

伪影是由较粗的线宽造成的。您给出的所有尺寸均为每条线的中心。由于您给出的线宽为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

绘制矩形，但手动绘制是一种很好的学习方法。