kylefang/AsyncDisplayKit
1
0
Fork 0
mirror of https://github.com/HackPlan/AsyncDisplayKit.git synced 2026-04-05 22:33:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update debug-tool-pixel-scaling.md

Browse Source
This commit is contained in:
Hannah Troisi
2016-04-18 15:42:39 -07:00
parent 1b9fc00ff0
commit e2d4ebc5ec
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
_docs/debug-tool-pixel-scaling.md
View File

@@ -5,21 +5,27 @@ permalink: /docs/debug-tool-pixel-scaling.html
next: debug-tool-hit-test-slop.html
---
## Visualize ASImageNode.image’s pixel scaling
### Description
This debug feature adds a red text label overlay on the bottom right hand corner of an ASImageNode if (and only if) the image’s size in pixels does not match it’s bounds size in pixels, e.g.
##Visualize ASImageNode.image’s pixel scaling##
This debug feature adds a red text overlay on the bottom right hand corner of an ASImageNode if (and only if) the image’s size in pixels does not match it’s bounds size in pixels, e.g.
`imageSizeInPixels = image.size * image.scale`
`boundsSizeInPixels = bounds.size * contentsScale`
`scaleFactor = imageSizeInPixels / boundsSizeInPixels`
```objective-c
imageSizeInPixels = image.size * image.scale
boundsSizeInPixels = bounds.size * contentsScale
scaleFactor = imageSizeInPixels / boundsSizeInPixels
`if (scaleFactor != 1.0) {`
`NSString *scaleString = [NSString stringWithFormat:@"%.2fx", scaleFactor];`
`_debugLabelNode.hidden = NO;`
`}`
if (scaleFactor != 1.0) {
NSString *scaleString = [NSString stringWithFormat:@"%.2fx", scaleFactor];
_debugLabelNode.hidden = NO;
}
```
This debug feature is useful for **quickly determining if you are (1) downloading and rendering excessive amounts of image data or (2) upscaling a low quality image**. In the screenshot below, you can quickly see that the avatar image is unnecessarily large for it’s bounds size and that the center picture is more optimized, but not perfectly so. If you are using an external data source (such as the 500px API used in the example), it's likely that you won’t be able to get the scaleFactor to exactly 1.0. However, if you control your own endpoint, optimize your API / app to return a correctly sized image!
![screen shot 2016-03-25 at 4 04 59 pm](https://cloud.githubusercontent.com/assets/3419380/14056994/15561daa-f2b1-11e5-9606-59d54d2b5354.png)
### Usage
In your AppDelegate, (1) import `AsyncDisplayKit+Debug.h` and (2) at the top of `didFinishLaunchingWithOptions:` enable this feature by adding `[ASImageNode setShouldShowImageScalingOverlay:YES];` Make sure to call this method before initializing any ASImageNodes.
In your `AppDelegate.m` file,
<ul>
<li>import `AsyncDisplayKit+Debug.h`</li>
<li>add `[ASImageNode setShouldShowImageScalingOverlay:YES];` at the top of `didFinishLaunchingWithOptions:` </li>
</ul>
Make sure to call this method before initializing any ASImageNodes.