簡體   English   中英

如何使用Cocoa Touch(iOS)圖形上下文繪圖正確地處理角落?

[英]How to do corners right with Cocoa Touch (iOS) Graphics Context Drawing?

我只是在嘗試,習慣於在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
    }
}

偽影是由較粗的線寬引起的。 您提供的所有尺寸都是針對每條線的中心。 由於您給定的線寬為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繪制矩形,但是手動完成所有操作是學習的好方法。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM