Add documentation for rounding corners within Texture (TextureGroup#1044

)
mikezucc · Oct 2, 2018 · 18b7c34 · 18b7c34
1 parent a19bd13
commit 18b7c34
Showing 1 changed file with 127 additions and 0 deletions.
diff --git a/docs/_docs/corner-rounding.md b/docs/_docs/corner-rounding.md
@@ -97,3 +97,130 @@ CALayer's `.shouldRasterize` is unrelated to Texture `node.shouldRasterizeDescen
 Use this flowchart to select the most performant strategy to round a set of corners.
 
 <img src="/static/images/corner-rounding-flowchart-v2.png" alt="corner rounding strategy flowchart">
+
+## Texture Support
+
+The following code exemplifies different ways how to archive corner rounding within Texture:
+
+### Use `.cornerRadius`
+
+<div class = "highlight-group">
+<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
+<div class = "code">
+<pre lang="objc" class="objcCode">
+CGFloat cornerRadius = 20.0;
+
+_photoImageNode.cornerRoundingType = ASCornerRoundingTypeDefaultSlowCALayer;
+_photoImageNode.cornerRadius = cornerRadius;
+</pre>
+<pre lang="swift" class = "swiftCode hidden">
+var cornerRadius: CGFloat = 20.0
+
+photoImageNode.cornerRoundingType = ASCornerRoundingTypeDefaultSlowCALayer
+photoImageNode.cornerRadius = cornerRadius
+</pre>
+</div>
+</div>
+
+
+### Use precomposition for rounding corners
+
+<div class = "highlight-group">
+<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
+<div class = "code">
+<pre lang="objc" class="objcCode">
+CGFloat cornerRadius = 20.0;
+
+_photoImageNode.cornerRoundingType = ASCornerRoundingTypePrecomposited;
+_photoImageNode.cornerRadius = cornerRadius;
+</pre>
+<pre lang="swift" class = "swiftCode hidden">
+var cornerRadius: CGFloat = 20.0
+
+// Use precomposition for rounding corners
+photoImageNode.cornerRoundingType = ASCornerRoundingTypePrecomposited
+photoImageNode.cornerRadius = cornerRadius
+</pre>
+</div>
+</div>
+
+
+### Use clipping for rounding corners
+
+<div class = "highlight-group">
+<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
+<div class = "code">
+<pre lang="objc" class="objcCode">
+CGFloat cornerRadius = 20.0;
+
+_photoImageNode.cornerRoundingType = ASCornerRoundingTypeClipping;
+_photoImageNode.backgroundColor = [UIColor whiteColor];
+_photoImageNode.cornerRadius = cornerRadius;
+</pre>
+<pre lang="swift" class = "swiftCode hidden">
+var cornerRadius: CGFloat = 20.0
+
+photoImageNode.cornerRoundingType = ASCornerRoundingTypeClipping
+photoImageNode.backgroundColor = UIColor.white
+photoImageNode.cornerRadius = cornerRadius
+</pre>
+</div>
+</div>
+
+
+### Use `willDisplayNodeContentWithRenderingContext` to set a clipping path for the content for rounding corners
+
+<div class = "highlight-group">
+<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
+<div class = "code">
+<pre lang="objc" class="objcCode">
+CGFloat cornerRadius = 20.0;
+
+// Use the screen scale for corner radius to respect content scale
+CGFloat screenScale = UIScreen.mainScreen.scale;
+_photoImageNode.willDisplayNodeContentWithRenderingContext = ^(CGContextRef context, id drawParameters) {
+    CGRect bounds = CGContextGetClipBoundingBox(context);
+    CGFloat radius = cornerRadius * screenScale; 
+    UIImage *overlay = [UIImage as_resizableRoundedImageWithCornerRadius:radius
+                                                             cornerColor:[UIColor clearColor]
+                                                               fillColor:[UIColor clearColor]];
+    [overlay drawInRect:bounds];
+    [[UIBezierPath bezierPathWithRoundedRect:bounds cornerRadius:radius] addClip];
+};
+
+</pre>
+<pre lang="swift" class = "swiftCode hidden">
+var cornerRadius: CGFloat = 20.0
+
+// Use the screen scale for corner radius to respect content scale
+var screenScale: CGFloat = UIScreen.main.scale
+photoImageNode.willDisplayNodeContentWithRenderingContext = { context, drawParameters in
+    var bounds: CGRect = context.boundingBoxOfClipPath()
+    var radius: CGFloat = cornerRadius * screenScale
+    var overlay = UIImage.as_resizableRoundedImage(withCornerRadius: radius, cornerColor: UIColor.clear, fill: UIColor.clear)
+    overlay.draw(in: bounds)
+    UIBezierPath(roundedRect: bounds, cornerRadius: radius).addClip()
+}
+</pre>
+</div>
+</div>
+
+### Use `ASImageNode` extras to round the image and add a border.
+
+This is great for example to round avatar images.
+
+<div class = "highlight-group">
+<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
+<div class = "code">
+<pre lang="objc" class="objcCode">
+CGFloat cornerRadius = 20.0;
+
+_photoImageNode.imageModificationBlock = ASImageNodeRoundBorderModificationBlock(5.0, [UIColor orangeColor]);
+</pre>
+<pre lang="swift" class = "swiftCode hidden">
+var cornerRadius: CGFloat = 20.0
+
+photoImageNode.imageModificationBlock = ASImageNodeRoundBorderModificationBlock(5.0, UIColor.orange)
+</pre>
+</div>
+</div>