drawrectメソッド内でCGContextを反転させると、間違った位置に描画されます

Question

その中心で垂直に反転した円を描画しようとしました。 （その中心で円を反転することは、私が視覚的に確認できるように同じように見える）。しかし描かれた位置は全く間違っています。私はフィルが

circleRect = CGRect(x:100, y:100, width:100, height: 100) 

override func draw(_ dirtyRect: CGRect) { 
    let ctx = NSGraphicsContext.current()!.cgContext 
    if(drawCircle) { 
     let path = getOvalPath(circleRect) //returns a oval cgpath for the rect, here the rect is a square so it gives a circle 

     //stroked without flipping 
     ctx.addPath(path) 
     ctx.setStrokeColor(CGColor.black) 
     ctx.strokePath() 

     //filled with flipping 
     ctx.saveGState 
     ctx.translateBy(x: 0, y: circleRect.size.height) 
     ctx.scaleBy(x: 1, y: -1) 

     ctx.addPath(path) 
     ctx.setFillColor(fillColor) 
     ctx.fillPath() 
     ctx.restoreGState() 
} 

drawCircle = true 
setNeedsDisplay(circleRect) 

Answer 1

あなたの円の中心は、（100、100）であるストローク領域内に完全に発生しなければならないことを期待しています。その点での変換の影響を考えてみましょう。

var point = CGPoint(x: 100, y: 100) 
// point = (100, 100) 

point = point.applying(CGAffineTransform(scaleX: 1, y: -1)) 
// point = (100, -100) 

point = point.applying(CGAffineTransform(translationX: 0, y: 100)) 
// point = (100, 0) 

変換によって円の中心が移動します。

「キャンバス」の左下隅から左上に移動して、y軸を「反転」することを考えています。あなたのサークルは、そのキャンバス上に垂直にセンタリングされている場合は置かれたままになります。あなたのキャンバスの高さは、適用するyの翻訳によって暗黙的に定義されます。これは100です。したがって、キャンバスの高さは100です。つまり、配置を維持するには円の中心がy = 100/2 = 50である必要があります。

円の中心がy = 100なので、キャンバスの高さを2 * 100 = 200にして円を置く必要があります。