How to use Anti-Alias ​​Layers on iPhoneOS

Question

We have already received several months we received Reiner Knizia Money. This is done very well, and therefore we update it, as time permits. However, one thing continues to bother me. I could never get my layered cards to prevent aliases.

Here is an example:

Cards that lie straight are very clean, but whenever they are angled, the black lines around the cards become jagged. I tried this depending on both lines implicit to the design and the lines drawn through drawRect :, and they both do the same. I tried edgeAntiAliasingMask and I can not say anything as far as I can tell. I tried masksToBounds for sublayers set to NO and YES.

Right now, my map is configured as CALayer, which has sub-CALayers for the front and back, as well as for several other things, such as a lightning mask and a dimming mask. Here are some code snippets:

CArdLayer *theCardLayer = [CArdLayer layer]; theCardLayer.edgeAntialiasingMask = kCALayerLeftEdge | kCALayerRightEdge | kCALayerBottomEdge | kCALayerTopEdge; theCardLayer.front = [CALayer layer]; theCardLayer.front.edgeAntialiasingMask = kCALayerLeftEdge | kCALayerRightEdge | kCALayerBottomEdge | kCALayerTopEdge; theCardLayer.front.bounds = theCardLayer.bounds; theCardLayer.front.masksToBounds = YES; theCardLayer.front.contents = (id)[cardDrawing CGImage]; [theCardLayer addSublayer:theCardLayer.front]; 

Etc ...

Any ideas on how to make cards really anti-aliases?

Answer 1

The best result I could come up with was to do what I suggested in my comment: I grew each (transparent) graph by 1 pixel on each side. With this small scale of the card with a much more favorable ratio with the background.

So, not exactly the answer on the iPhone, but one that nonetheless works on the iPhone.

Here is the after, which you can compare with the before, above:

Answer 2

This results in the addition of a transparent border:

 layer.cornerRadius = 1.01; 

Answer 3

I have never used the framework, but it seems that anti-aliasing only works on the inside of the map, and not on the outside (provided that rounded corners on non-rotating maps are a special case).

So IMHO is actually a composition issue for cards and background.

A quick look at the docs offers some hints (just guesses, try them):

Make sure that the Opaque property is false (perhaps what you see is the result of optimizing the rendering code).

See how it looks if you set Opacity to "near opaque" (maybe 0.9?).

Check the Mask property. This should allow you to create a mask as an alpha channel with soft borders - although I know that this is not what you want ...

Answer 4

If you do not want to run Photoshop, here you can do it programmatically:

http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/

In particular, the -transparentBorderImage: category method in UIImage + Alpha.h / .m.

Hope this helps others.

Thanks http://vocaro.com/trevor/blog !