[ASImageNode] Tips for efficiently drawing rounded corners.

[fatuhoku]

I'm aware there's imageModificationBlock: for ASImageNode, but what if I wanted to round a corner for a ASCellNode, without having to pay the performance penalty? e.g. a ASCellNode that contains both an Image, and a black-text white-background caption immediately beneath it?

I tested the performance of enabling cornerRadius by running the CustomCollectionView example with the following modifications:

1. Display 100 images (5 per section) rather than 14. Recycle the images (i.e. 15th photo == 1st photo)
2. Make [ImageCellNode initWithImage:] look like

- (id)initWithImage:(UIImage *)image
{
  self = [super init];
  if (self != nil) {
    _imageNode = [[ASImageNode alloc] init];
    _imageNode.image = image;

    [self addSubnode:_imageNode];

    self.cornerRadius = 5.f;
  }
  return self;
}

Results, running on an iPad 2:

• Without rounded corners: consistently 60FPS, suddenly dropping to 30FPS sometimes with spikes. Inertial scrolling feels smooth, with graceful deceleration
• With rounded corners: consistently 60FPS, but drops to 30FPS in spikes about 3x as often. Inertial scrolling smooth but visible stuttering when decelerating, as if the velocity is being choked.

[appleguy]

@fatuhoku indeed using .cornerRadius even on a plain CALayer will typically have very, very poor performance on any device older than an iPhone 5S.

One of the simplest options is to use imageModificationBlock. Look into the framework's implementation of ASImageNodeRoundBorderModificationBlock() for an example of implementing such a block. I would love to add this more natively to the framework but haven't had time; that block doesn't support clipping for rounded corners, but we should add one that does (feel free to submit a PR - or just use it yourself locally).

In Pinterest we have a node that can efficiently and dynamically round any type of content if it is on an opaque background. The imageModificationBlock technique has the advantage that it works on any background, even if the background behind the image is changing dynamically.

Lastly - it may not be appropriate in all use cases, but you can also try enabling .shouldRasterizeDescendants either on the imageNode itself or on any parent of that node. That should solve your issue, but isn't a good technique to use if there are multiple small images loading that could cause the entire hierarchy to re-rasterize if any of them change (like several loading individually in sequence). This is a pretty good option to use if you just set it on the imageNode directly. In the case of rasterizing, you can use the node.cornerRadius property as you are currently, and it will just be handled much more efficiently.

Thanks for asking the question, let me know if you find one of these solutions suitable or have any other feedback / challenges!

[appleguy]

FYI, the rasterization approach with .cornerRadius will work on any type of node, including non-image-nodes, which imageModificationBlock is of course only for ASImageNodes. However it is important to recall that you cannot animate things within a rasterized area, and changes to that area's contents are relatively expensive. Furthermore, nodes that wrap regular UIViews or CALayers won't show up.

[appleguy]

@fatuhoku - thanks for contributing to the AsyncDisplayKit community by asking your question here! Due to the length of time it’s been since this thread was active, I’m going to mark this issue as closed. If you are still having troubles, feel free to reopen it. I hope you have been able to use the framework!

[fatuhoku]

Thanks @appleguy — when I finally get the chance to hop onto this again I'm sure I'll get have more to say. ASDK is exploratory work for us and doesn't get a lot of attention right now :P