Hey @ys_xs, did you get a chance to do the challenge for the Core Animation video yet? That should explain a few options for fixing offscreen rendering, specifically when it comes to circular images.
In general: offscreen rendering happens when the system needs to create a bitmap in memory before rendering something to the screen. In my understanding, this can happen when you ask UIKit to do something but don’t give it enough information.
For example: if you try to add shadows to a UIView, you can do so by setting shadow properties on the layer like shadowColor and shadowRadius, but if you don’t set shadowPath then the shadow will be created using offscreen rendering. In this case, the GPU needs to draw the text so the CPU can figure out what the shape of the shadow should be. If you give it a shape by providing a UIBezierPath then it won’t need to do the offscreen rendering.
Same for drawing circles in iOS. If you use a bezier path then you can avoid offscreen rendering. There are a few strategies that offer pros and cons such as blending or no blending and varying degrees of difficulty.
Text: Use NSShadow and an NSAttributedString
UIView: Define shadowPath with UIBezierPath
UIView with Round Corners + Shadow: Use two views, one for the image and one for the shadow
Also, if you want another resource that explains shadows in some detail, here’s a really good video from Todd Kerpelman: How Google does shadows on iOS (Route 85) - YouTube
For Round Corners
I would say go check out that challenge for an example of three ways to have rounded corners.
when i turn on ‘color Misaligned images’ feature, some label are overlaid in magenta, so my question is
I really don’t understand is why this feature called ‘Misaligned images’ rather than 'Misaligned view’, because all view in this snippets is UILabel, not UIImageView, but If I change all view to UIView in the snippets, no magenta color will appear, It’s strange, Could you explain this for me ? I think this question will have some relationship with iOS rendering knowledge, Could you give me a explain and also give me some reference to learn.
because of height , view3 can produce a misaligned effect, but view2 can’t produce a misaligned by width , why? I really don’t understand
As we all know, in 2x device, 1 point means 2 * 2 pixel, and 3x device, 1 point means 3 * 3 pixel, but If i want to draw a line in minimum height, 1 pixel, in 2x device, Screen will render the line when I use a value larger than 0.25 point, and do nothing when i use a value smaller than 0.25 point. It’s easy to find 0.25 point means 0.5 pixel, so I really don’t understand why I can render something in 0.5 pixel rather than 1 pixel, could you explain it for me ?
@vicktormanuel Yeah it depends on the instrument but a lot of them have changed since last year. If you’re looking at the Core Animation Instrument and trying to find debug options then you can now find them in Xcode under Debug > View Debugging > Rendering