Any suggestions on how to scale iPad full screen image without losing image quality?

This is what I am trying to achieve:

Full screen animal (vector art, not photography) on iPad. When you click on a part of the body, say the ear, images and rookies on the ear and the text is displayed around the ear. Press the zoom out button and you will return to the full body image. I know how to program scaling and moving, but I don't know which is the best approach for handling image quality. The 1024x768 image needs to be zoomed in 400% to get the crop effect I want. Obviously for a new iPad, that 1024x768 image would already start doubling up and should grow 400% from there.

The initial tilt is to take a 4096x3072 image and start from there down to 1/4, and then when you scale down to 400% you don't lose image quality. This one image uses almost 70MB of memory, which is expected and I understand why this is happening, but obviously not going to fly when it is only one part of a larger application. Not to mention what happens to the @ 2x retina version.

Does anyone have any suggestions on how to achieve this effect without putting such a load on the device? It looks like iOS devices cannot handle vector images, only rasterized ones. Due to the level of detail that I would like to achieve, I cannot just zoom in and deal with the loss of quality. Is this even doable or should I find another approach? I am working with XCode 4.3.1 and Cocos2d v 1.0.1, but can look into v2.0 if that solves my problem.

Full body image of my super awesome lemur (I have a graphic designer to do this later): enter image description here

Ear Magnification:

enter image description here

Once our designer is working on this, I imagine something more along these lines (image from Google image search, not my work, and hopefully ours won't be as grumpy):

enter image description here


source to share

4 answers

Perhaps you can use multiple images. Get full-screen full zoom. When the user decides to enlarge a portion of a portion, then display another full-screen snapshot of the enlarged portion. You can animate the transition (fade in / out) so that it is smooth enough.

This assumes final scaling parameters. For example, the user can enlarge the image to a different location on the animal.



Since this is vector graphics, can't you just compute the required sub-image on the fly?

This will give you the best quality possible and you don't have to worry about massive 4X images or mining artifacts.

This article should help:

If you are not using SVG, this might give you some ideas.



Another suggestion: Use Quartz 2d CGContextRef

1) Save the graphics as PDF. it would be small, since the vector

2) Open the PDF as described here: Quartz 2D Programming Guide

3) create a CGBitmapContext and display the pdf part you want there

4) create CCTexture2D from CGBitmapContext - look here: or check CCTexture2D.m -initWithImage

5) use it.



You can use CGContextScaleCTM on a 2D quartz wireframe to smoothly scale high resolution images.

You can find the Apple example app listed below. MoveMe_APLMoveMeView_m


#import <UIKit/UIKit.h>

@interface TiledImageView : UIView {
    CGFloat imageScale;
    UIImage* image;
    CGRect imageRect;
@property (retain) UIImage* image;

-(id)initWithFrame:(CGRect)_frame image:(UIImage*)_image scale:(CGFloat)_scale;




#import "TiledImageView.h"
#import <QuartzCore/QuartzCore.h>

@implementation TiledImageView

@synthesize image;

// Set the layer class to be CATiledLayer.
+ (Class)layerClass {
    Return [CATiledLayer class];

- (void)dealloc {
    [image release];
    [super dealloc];

// Create a new TiledImageView with the desired frame and scale.
-(id)initWithFrame:(CGRect)_frame image:(UIImage*)_image scale:(CGFloat)_scale {
    if ((self = [super initWithFrame:_frame])) {
        self.image = _image;
        imageRect = CGRectMake(0.0f, 0.0f, CGImageGetWidth(image.CGImage), CGImageGetHeight(image.CGImage));
        imageScale = _scale;
        CATiledLayer *tiledLayer = (CATiledLayer *)[self layer];
        // levelsOfDetail and levelsOfDetailBias determine how
        // the layer is rendered at different zoom levels.  This
        // only matters while the view is zooming, since once the 
        // the view is done zooming a new TiledImageView is created
        // at the correct size and scale.
        tiledLayer.levelsOfDetail = 4;
        tiledLayer.levelsOfDetailBias = 4;
        tiledLayer.tileSize = CGSizeMake(512.0, 512.0); 
    return self;

-(void)drawRect:(CGRect)_rect {
    CGContextRef context = UIGraphicsGetCurrentContext();    
    // Scale the context so that the image is rendered 
    // at the correct size for the zoom level.
    CGContextScaleCTM(context, imageScale,imageScale);  
    CGContextDrawImage(context, imageRect, image.CGImage);




All Articles