Antialiasing edges of UIView after transformation using CALayer's transform

Oleg picture Oleg · Nov 29, 2011 · Viewed 12.1k times · Source

I have a UIView object that rotates using CALayer's transform:

// Create uiview object.
UIImageView *block = [[UIImageView alloc] initWithFrame....]

// Apply rotation.
CATransform3D basicTrans = CATransform3DIdentity;
basicTrans.m34 = 1.0/-distance;
blockImage.layer.transform = CATransform3DRotate(basicTrans, rangle, 1.0f, 0.0f, 0.0f);

After rotating the edges of the object are not antialiasing. I need to antialias them. Help me, please. How can it be done?

Answer

tarmes picture tarmes · Nov 29, 2011

One way to do this is by placing the image inside another view that's 5 pixels bigger. The bigger view should have a transparent rasterized border that will smooth the edges of the UIImageView:

view.layer.borderWidth = 3; 
view.layer.borderColor = [UIColor clearColor].CGColor; 
view.layer.shouldRasterize = YES; 
view.layer.rasterizationScale = [[UIScreen mainScreen] scale];

Then, place your UIImageView inside this parent view and center it (With 2.5 pixels around each edge).

Finally, rotate the parent view instead of the image view.

It works very well - you can also encapsulate the whole thing in class that creates the hierarchy.