mirror of
https://github.com/Swiftgram/Telegram-iOS.git
synced 2025-06-16 05:55:20 +00:00
9bc996374f
git-subtree-dir: submodules/AsyncDisplayKit git-subtree-mainline: d06f423e0ed3df1fed9bd10d79ee312a9179b632 git-subtree-split: 02bedc12816e251ad71777f9d2578329b6d2bef6
91 lines
4.0 KiB
Markdown
Executable File
91 lines
4.0 KiB
Markdown
Executable File
---
|
|
title: ASImageNode
|
|
layout: docs
|
|
permalink: /docs/image-node.html
|
|
prevPage: text-node.html
|
|
nextPage: network-image-node.html
|
|
---
|
|
|
|
`ASImageNode` is the Texture equivalent to `UIImageView`. The most basic difference is that images are decoded asynchronously by default. Of course, there are more advanced improvements as well such as GIF support and `imageModificationBlock`s.
|
|
|
|
### Basic Usage
|
|
|
|
Using an image node works exactly like using an image view.
|
|
|
|
<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">
|
|
ASImageNode *imageNode = [[ASImageNode alloc] init];
|
|
|
|
imageNode.image = [UIImage imageNamed:@"someImage"];
|
|
imageNode.contentMode = UIViewContentModeScaleAspectFill;
|
|
</pre>
|
|
|
|
<pre lang="swift" class = "swiftCode hidden">
|
|
let imageNode = ASImageNode()
|
|
|
|
imageNode.image = UIImage(named: "someImage")
|
|
imageNode.contentMode = .scaleAspectFill
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
### 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`, including image effects such as rounding, adding borders, or other pattern overlays, without extraneous display calls.
|
|
|
|
You can read more about it at <a href="image-modification-block.html">Image Modification Blocks</a>.
|
|
|
|
### Image Cropping
|
|
|
|
When an `imageNode`'s `contentMode` property is set to `UIViewContentModeScaleAspectFill`, it will automatically expand the image to fill the entire area of the imageNode, and crop any areas that go past the bounds due to scaling the image.
|
|
|
|
By default, the expanded image will be centered within the bounds of the view. Take the following cat image. His face gets cut off by default.
|
|
|
|
<img width = "300" src = "/static/images/catsMiddle.png"/>
|
|
|
|
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.
|
|
|
|
<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">
|
|
self.animalImageNode.cropRect = CGRectMake(0, 0, 0.0, 0.0);
|
|
</pre>
|
|
|
|
<pre lang="swift" class = "swiftCode hidden">
|
|
animalImageNode.cropRect = CGRect(x: 0, y: 0, width: 0.0, height: 0.0)
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
Leaving the width and height values at `0.0` means the image won't be stretched.
|
|
|
|
<img width = "300" src = "/static/images/catsFace.png"/>
|
|
|
|
Alternatively, you can set the `x` value of the origin to `1.0` to right align the image.
|
|
|
|
<img width = "300" src = "/static/images/catsButt.png"/>
|
|
|
|
### Forced Upscaling
|
|
|
|
By default, an image won't be upscaled on the CPU when it is too small to fit into the bounds of the `imageNode` it has been set on.
|
|
|
|
You can set `forceUpscaling` to `YES` if you'd like to change this fact. Doing so means your app will take up more memory any time you use an image that is smaller than its destination.
|
|
|
|
### Detecting Image Scaling
|
|
|
|
By using the <a href = "debug-tool-pixel-scaling.html">pixel scaling tool</a>, you can easily check each image in your app to see how much it has been scaled up or down.
|
|
|
|
If images are too big, you risk rendering excessive amounts of image data, and when they're too small you spend time upscaling a low quality image.
|
|
|
|
If you control your API, consider returning correctly scaled images so that this work can be avoided.
|