[英]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.