在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 的画布高度来使圆保持不动。