Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The reason the scaled-down image looks crappy is it's being scaled in OpenGL, which is using fast-but-low-quality linear interpolation. As you probably know, UIView is built on top of CALayer, which is in turn a sort of wrapper for OpenGL textures. Because the contents of the layer reside in the video card, CALayer can do all of its magic on the GPU, independent of whether the CPU is busy loading a web site, blocked on disk access, or whatever. I mention this only because it's useful to pay attention to what's actually in the textures inside your layers. In your case, the UIImageView's layer has the full 1024x768 bitmap image on its texture, and that isn't affected by the container's transform: The CALayer inside the UIImageView doesn't see that it's going to be (let's see..) 246x185 on-screen and re-scale its bitmap, it just lets OpenGL do its thing and scale down the bitmap every time it updates the display.</p> <p>To get better scaling, we'll need to do it in CoreGraphics instead of OpenGL. Here's one way to do it:</p> <pre><code>- (UIImage*)scaleImage:(UIImage*)image by:(float)scale { CGSize size = CGSizeMake(image.size.width * scale, image.size.height * scale); UIGraphicsBeginImageContextWithOptions(size, YES, 0.0); [image drawInRect:CGRectMake(0, 0, size.width, size.height)]; UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return imageCopy; } - (void)loadView { // get landscape screen frame CGRect screenFrame = [UIScreen mainScreen].bounds; CGRect landscapeFrame = CGRectMake(0, 0, screenFrame.size.height, screenFrame.size.width); UIView *view = [[UIView alloc] initWithFrame:landscapeFrame]; view.backgroundColor = [UIColor grayColor]; self.view = view; // add container view for 2 images CGRect startFrame = CGRectMake(-landscapeFrame.size.width/2, 0, landscapeFrame.size.width*2, landscapeFrame.size.height); container = [[UIView alloc] initWithFrame:startFrame]; container.backgroundColor = [UIColor whiteColor]; // add image 1 (1024x768) UIImage *img1 = [UIImage imageNamed:@"01.png"]; img1View = [[TapImageView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)]; img1View.userInteractionEnabled = YES; // important! img1View.image = [self scaleImage:img1 by:0.24]; [container addSubview:img1View]; // add image 2 (1024x768) UIImage *img2 = [UIImage imageNamed:@"02.png"]; img2View = [[TapImageView alloc] initWithFrame:CGRectMake(1024, 0, 1024, 768)]; img2View.userInteractionEnabled = YES; img2View.image = [self scaleImage:img2 by:0.24]; [container addSubview:img2View]; // scale to 24% and layout subviews zoomed = YES; container.transform = CGAffineTransformMakeScale(0.24, 0.24); [self.view addSubview:container]; } - (void)viewTapped:(id)sender { zoomed = !zoomed; [UIView animateWithDuration:0.5 animations:^ { if ( zoomed ) { container.transform = CGAffineTransformMakeScale(0.24, 0.24); } else { img1View.image = [UIImage imageNamed:@"01.png"]; img2View.image = [UIImage imageNamed:@"02.png"]; container.transform = CGAffineTransformMakeScale(1.0, 1.0); } } completion:^(BOOL finished) { if ( zoomed ) { UIImage *img1 = [UIImage imageNamed:@"01.png"]; img1View.image = [self scaleImage:img1 by:0.24]; UIImage *img2 = [UIImage imageNamed:@"02.png"]; img2View.image = [self scaleImage:img2 by:0.24]; } }]; } </code></pre> <p>And here's TapImageView, a UIImageView subclass that tells us when it's been tapped by sending an action up the responder chain:</p> <pre><code>@interface TapImageView : UIImageView @end @implementation TapImageView - (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event { [[UIApplication sharedApplication] sendAction:@selector(viewTapped:) to:nil from:self forEvent:event]; } @end </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload