[ASImageNode] Add documentation for image effects #trivial (#263)

* Add documentation for doing image effects

* Link to image modification documentation in the image node documentation
This commit is contained in:
Michael Schneider
2017-06-20 12:02:25 -07:00
committed by Huy Nguyen
parent 326925839d
commit 0a7f8ea1d6
2 changed files with 109 additions and 41 deletions

View File

@@ -33,44 +33,13 @@ imageNode.contentMode = .scaleAspectFill
</div>
### Image Modification Block
### Image transformations and effects
Many times, operations that would affect the appearance of an image you're displaying are big sources of main thread work. Naturally, you want to move these to a background thread. By assigning an `imageModificationBlock` to your `imageNode`, you can define a set of transformations that need to happen asynchronously to any image that gets set on the `imageNode`.
Many times, operations that would affect the appearance of an image you're displaying are big sources of main thread work. Naturally, you want to move these to a background thread.
<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>
By assigning an `imageModificationBlock` to your `imageNode`, you can define a set of transformations that need to happen asynchronously to any image that gets set on the `imageNode`, including image effects such as rounding, adding borders, or other pattern overlays, without extraneous display calls.
<div class = "code">
<pre lang="objc" class="objcCode">
_backgroundImageNode.imageModificationBlock = ^(UIImage *image) {
UIImage *newImage = [image applyBlurWithRadius:30
tintColor:[UIColor colorWithWhite:0.5 alpha:0.3]
saturationDeltaFactor:1.8
maskImage:nil];
return newImage ? newImage : image;
};
//some time later...
_backgroundImageNode.image = someImage;
</pre>
<pre lang="swift" class = "swiftCode hidden">
backgroundImageNode.imageModificationBlock = { image in
let newImage = image.applyBlurWithRadius(30, tintColor: UIColor(white: 0.5, alpha: 0.3),
saturationDeltaFactor: 1.8,
maskImage: nil)
return (newImage != nil) ? newImage : image
}
//some time later...
backgroundImageNode.image = someImage
</pre>
</div>
</div>
The image named "someImage" will now be blurred asynchronously before being assigned to the `imageNode` to be displayed.
You can read more about it at <a href="image-modification-block.html">Image Modification Blocks</a>.
### Image Cropping
@@ -82,7 +51,7 @@ By default, the expanded image will be centered within the bounds of the view. T
That's messed up. To fix it, you can set the `cropRect` property to move the image over. By default it is set to `CGRectMake(0.5, 0.5, 0.0, 0.0)`.
The rectangle is specified as a "unit rectangle," using percentages of the source image's width and height. To show the image starting at the left side, you can set the `cropRect`'s `x` value to be `0.0`, meaning the image's origin should start at `{0, 0}` as opposed to the default.
The rectangle is specified as a "unit rectangle," using percentages of the source image's width and height. To show the image starting at the left side, you can set the `cropRect`'s `x` value to be `0.0`, meaning the image's origin should start at `{0, 0}` as opposed to the default.
<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>