How do I rotate objects before it is drawn within UIGraphicsImageRenderer?

Question

    let renderer = UIGraphicsImageRenderer(size: CGSize(width: 500, height: 500))
    let image = renderer.image { context in
        let size = renderer.format.bounds.size
        UIColor.red.setFill()
        context.cgContext.fillEllipse(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        let x = 300 //center
        let y = 100 //center
        let w = 200
        let h = 60
        let r = 5.41 //radians
        UIColor.white.setFill()
        context.cgContext.fill(CGRect(x: x - w / 2, y: y - h / 2, width: w, height: h))
    }

The result is like this:

How can I rotate my white rectangle with rotation center in the middle of the rectangle before it is drawn in context?

Too late, you already drew it. There are no “drawn objects”, just pixels. And those pixels are now done. You should have transformed the context before you drew the white rectangle. — matt, Dec 29 '20 at 12:08
Ok but you don’t rotate the rectangle. You rotate the context and draw the rectangle into it. — matt, Dec 29 '20 at 12:15
Ok, but what context? Because I need to rotate the context for object (here white rectangle), not for a whole UIImage (here red circle). Is it possible? — Bartłomiej Semańczyk, Dec 29 '20 at 12:21
Yes, just as I said. You rotate the context in order to draw the rectangle. — matt, Dec 29 '20 at 12:28
After `context.cgContext.rotate(by: CGFloat(r))` my square disappeared. Why? — Bartłomiej Semańczyk, Dec 29 '20 at 12:35
Because it rotates around its origin. So you need to translate the origin before and after the rotation. — matt, Dec 29 '20 at 12:37

score 2 · Accepted Answer · answered Dec 29 '20 at 12:38

2

You can rotate your context with the following api: https://developer.apple.com/documentation/coregraphics/cgcontext/1456228-rotate

This is what it looks like for your example:

            // applied 5 rectangles to visualize the rotation origin.
            for i in 0...5 {
                let r: CGFloat = 0.1 * CGFloat(i) //radians
                context.cgContext.rotate(by: r)
                UIColor.white.setFill()
                context.cgContext.fill(CGRect(x: x - w / 2, y: y - h / 2, width: w, height: h))
            }

Note that the rotation occurs around the context's origin. If you want a different center, you may need to apply a translation first (translateBy(x:y:) - see apple documentation for details).

answered Dec 29 '20 at 12:38

de.

7,068
3
40
69

Thank you for now, I am gonna check it and see how it works...;) – Bartłomiej Semańczyk Dec 29 '20 at 12:50
Oww, it worked perfectly... but when I draw UIImage, it is placed upside down. Why? – Bartłomiej Semańczyk Dec 29 '20 at 14:13
This may be unrelated - please create a new question and share your code. – de. Dec 29 '20 at 15:19
@BartłomiejSemańczyk this might help https://stackoverflow.com/a/64538344/2303865 – Leo Dabus Dec 29 '20 at 17:43
@Bartłomiej Semańczyk if this answers your question, please mark it as the accepted answer. – de. Dec 30 '20 at 09:50

How do I rotate objects before it is drawn within UIGraphicsImageRenderer?

1 Answers1