cocoa touch - mac - ¿Cómo acercar/alejar un objeto UIImage cuando el usuario pellizca la pantalla?

como quitar el zoom de snapchat

Question

Me gustaría acercar / alejar un objeto UIImage cuando el usuario realiza la acción de pellizco estándar en mi aplicación. Actualmente estoy usando UIImageView para mostrar mi imagen, si ese detalle ayuda de alguna manera.

Estoy tratando de descubrir cómo hacer esto, pero no tuve tanta suerte hasta ahora.

¿Alguna pista?

Answer 1

A continuación, el código ayuda a ampliar UIImageView sin utilizar UIScrollView:

-(void)HandlePinch:(UIPinchGestureRecognizer*)recognizer{
    if ([recognizer state] == UIGestureRecognizerStateEnded) {
        NSLog(@"======== Scale Applied ===========");
        if ([recognizer scale]<1.0f) {
            [recognizer setScale:1.0f];
        }
        CGAffineTransform transform = CGAffineTransformMakeScale([recognizer scale],  [recognizer scale]);
        imgView.transform = transform;
    }
}

Answer 2

Aquí hay una solución que he usado anteriormente que no requiere el uso de UIWebView.

- (UIImage *)scaleAndRotateImage(UIImage *)image
{
    int kMaxResolution = 320; // Or whatever

    CGImageRef imgRef = image.CGImage;

    CGFloat width = CGImageGetWidth(imgRef);
    CGFloat height = CGImageGetHeight(imgRef);


    CGAffineTransform transform = CGAffineTransformIdentity;
    CGRect bounds = CGRectMake(0, 0, width, height);
    if (width > kMaxResolution || height > kMaxResolution) {
        CGFloat ratio = width/height;
        if (ratio > 1) {
            bounds.size.width = kMaxResolution;
            bounds.size.height = bounds.size.width / ratio;
        }
        else {
            bounds.size.height = kMaxResolution;
            bounds.size.width = bounds.size.height * ratio;
        }
    }

    CGFloat scaleRatio = bounds.size.width / width;
    CGSize imageSize = CGSizeMake(CGImageGetWidth(imgRef), CGImageGetHeight(imgRef));
    CGFloat boundHeight;
    UIImageOrientation orient = image.imageOrientation;
    switch(orient) {

        case UIImageOrientationUp: //EXIF = 1
            transform = CGAffineTransformIdentity;
            break;

        case UIImageOrientationUpMirrored: //EXIF = 2
            transform = CGAffineTransformMakeTranslation(imageSize.width, 0.0);
            transform = CGAffineTransformScale(transform, -1.0, 1.0);
            break;

        case UIImageOrientationDown: //EXIF = 3
            transform = CGAffineTransformMakeTranslation(imageSize.width, imageSize.height);
            transform = CGAffineTransformRotate(transform, M_PI);
            break;

        case UIImageOrientationDownMirrored: //EXIF = 4
            transform = CGAffineTransformMakeTranslation(0.0, imageSize.height);
            transform = CGAffineTransformScale(transform, 1.0, -1.0);
            break;

        case UIImageOrientationLeftMirrored: //EXIF = 5
            boundHeight = bounds.size.height;
            bounds.size.height = bounds.size.width;
            bounds.size.width = boundHeight;
            transform = CGAffineTransformMakeTranslation(imageSize.height, imageSize.width);
            transform = CGAffineTransformScale(transform, -1.0, 1.0);
            transform = CGAffineTransformRotate(transform, 3.0 * M_PI / 2.0);
            break;

        case UIImageOrientationLeft: //EXIF = 6
            boundHeight = bounds.size.height;
            bounds.size.height = bounds.size.width;
            bounds.size.width = boundHeight;
            transform = CGAffineTransformMakeTranslation(0.0, imageSize.width);
            transform = CGAffineTransformRotate(transform, 3.0 * M_PI / 2.0);
            break;

        case UIImageOrientationRightMirrored: //EXIF = 7
            boundHeight = bounds.size.height;
            bounds.size.height = bounds.size.width;
            bounds.size.width = boundHeight;
            transform = CGAffineTransformMakeScale(-1.0, 1.0);
            transform = CGAffineTransformRotate(transform, M_PI / 2.0);
            break;

        case UIImageOrientationRight: //EXIF = 8
            boundHeight = bounds.size.height;
            bounds.size.height = bounds.size.width;
            bounds.size.width = boundHeight;
            transform = CGAffineTransformMakeTranslation(imageSize.height, 0.0);
            transform = CGAffineTransformRotate(transform, M_PI / 2.0);
            break;

        default:
            [NSException raise:NSInternalInconsistencyException format:@"Invalid image orientation"];

    }

    UIGraphicsBeginImageContext(bounds.size);

    CGContextRef context = UIGraphicsGetCurrentContext();

    if (orient == UIImageOrientationRight || orient == UIImageOrientationLeft) {
        CGContextScaleCTM(context, -scaleRatio, scaleRatio);
        CGContextTranslateCTM(context, -height, 0);
    }
    else {
        CGContextScaleCTM(context, scaleRatio, -scaleRatio);
        CGContextTranslateCTM(context, 0, -height);
    }

    CGContextConcatCTM(context, transform);

    CGContextDrawImage(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, width, height), imgRef);
    UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return imageCopy;
}

El artículo se puede encontrar en el soporte de Apple en: http://discussions.apple.com/message.jspa?messageID=7276709#7276709

Answer 3

Como otros describieron, la solución más fácil es poner tu UIImageView en UIScrollView. Hice esto en el archivo .xib de Interface Builder.

En viewDidLoad, establece las siguientes variables. Configure su controlador para que sea un UIScrollViewDelegate.

- (void)viewDidLoad {
    [super viewDidLoad];
    self.scrollView.minimumZoomScale = 0.5;
    self.scrollView.maximumZoomScale = 6.0;
    self.scrollView.contentSize = self.imageView.frame.size;
    self.scrollView.delegate = self;
}

Debe implementar el siguiente método para devolver el imageView que desea ampliar.

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}

En versiones anteriores a iOS9, también puede necesitar agregar este método de delegado vacío:

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
}

La documentación de Apple hace un buen trabajo al describir cómo hacer esto:

Answer 4

La forma más sencilla de hacer esto, si lo único que quieres es hacer zoom, es colocar tu imagen dentro de UIWebView (escribe una pequeña cantidad de código envoltorio html, haz referencia a tu imagen, y básicamente has terminado). La forma más completa de hacerlo es utilizar touchesBegan , touchesMoved y touchesEnded para realizar un seguimiento de los dedos del usuario y ajustar la propiedad de transformación de la vista de forma adecuada.

Answer 5

La solución de Shefali para UIImageView funciona muy bien, pero necesita una pequeña modificación:

- (void)pinch:(UIPinchGestureRecognizer *)gesture {
    if (gesture.state == UIGestureRecognizerStateEnded
        || gesture.state == UIGestureRecognizerStateChanged) {
        NSLog(@"gesture.scale = %f", gesture.scale);

        CGFloat currentScale = self.frame.size.width / self.bounds.size.width;
        CGFloat newScale = currentScale * gesture.scale;

        if (newScale < MINIMUM_SCALE) {
            newScale = MINIMUM_SCALE;
        }
        if (newScale > MAXIMUM_SCALE) {
            newScale = MAXIMUM_SCALE;
        }

        CGAffineTransform transform = CGAffineTransformMakeScale(newScale, newScale);
        self.transform = transform;
        gesture.scale = 1;
    }
}

(La solución de Shefali tenía la desventaja de no escalar continuamente mientras se pellizcaba. Además, cuando se iniciaba una nueva pizca, se restablecía la escala de la imagen actual).

Answer 6

Las respuestas de Shafali y JRV se extendieron para incluir la panorámica y pellizcar para acercar:

#define MINIMUM_SCALE 0.5
#define MAXIMUM_SCALE 6.0
@property CGPoint translation;


- (void)pan:(UIPanGestureRecognizer *)gesture {
    static CGPoint currentTranslation;
    static CGFloat currentScale = 0;
    if (gesture.state == UIGestureRecognizerStateBegan) {
        currentTranslation = _translation;
        currentScale = self.view.frame.size.width / self.view.bounds.size.width;
    }
    if (gesture.state == UIGestureRecognizerStateEnded || gesture.state == UIGestureRecognizerStateChanged) {

        CGPoint translation = [gesture translationInView:self.view];

        _translation.x = translation.x + currentTranslation.x;
        _translation.y = translation.y + currentTranslation.y;
        CGAffineTransform transform1 = CGAffineTransformMakeTranslation(_translation.x , _translation.y);
        CGAffineTransform transform2 = CGAffineTransformMakeScale(currentScale, currentScale);
        CGAffineTransform transform = CGAffineTransformConcat(transform1, transform2);
        self.view.transform = transform;
    }
}


- (void)pinch:(UIPinchGestureRecognizer *)gesture {
    if (gesture.state == UIGestureRecognizerStateEnded || gesture.state == UIGestureRecognizerStateChanged) {
//        NSLog(@"gesture.scale = %f", gesture.scale);

        CGFloat currentScale = self.view.frame.size.width / self.view.bounds.size.width;
        CGFloat newScale = currentScale * gesture.scale;

        if (newScale < MINIMUM_SCALE) {
            newScale = MINIMUM_SCALE;
        }
        if (newScale > MAXIMUM_SCALE) {
            newScale = MAXIMUM_SCALE;
        }

        CGAffineTransform transform1 = CGAffineTransformMakeTranslation(_translation.x, _translation.y);
        CGAffineTransform transform2 = CGAffineTransformMakeScale(newScale, newScale);
        CGAffineTransform transform = CGAffineTransformConcat(transform1, transform2);
        self.view.transform = transform;
        gesture.scale = 1;
    }
}

Answer 7

Tenga en cuenta que NUNCA está UIImage un UIImage . NUNCA.

En cambio, estás acercando y alejando la view que muestra el UIImage .

En este caso particular, puede optar por crear una UIView personalizada con un dibujo personalizado para mostrar la imagen, un UIImageView que muestra la imagen por usted, o una UIWebView que necesitará HTML adicional para realizar una copia de seguridad.

En todos los casos, deberá implementar touchesBegan , touchesMoved y similares para determinar qué está intentando hacer el usuario (zoom, panorámica, etc.).

Answer 8

Tenga en cuenta que no desea acercar / alejar el UIImage. En su lugar, intente acercar / alejar la vista que contiene el controlador de vista UIImage.

He hecho una solución para este problema. Eche un vistazo a mi código:

@IBAction func scaleImage(sender: UIPinchGestureRecognizer) {
        self.view.transform = CGAffineTransformScale(self.view.transform, sender.scale, sender.scale)
        sender.scale = 1
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        view.backgroundColor = UIColor.blackColor()
    }

NB: No te olvides de conectar el PinchGestureRecognizer.

Answer 9

Otra forma fácil de hacerlo es colocar tu UIImageView dentro de UIScrollView . Como describo aquí , necesita configurar el tamaño del contenido de la vista de desplazamiento para que sea igual UIImageView''s tamaño de su UIImageView''s . Configure su instancia de controlador para que sea el delegado de la vista de desplazamiento e implemente viewForZoomingInScrollView: y scrollViewDidEndZooming:withView:atScale: métodos para permitir el zoom de pellizco y el scrollViewDidEndZooming:withView:atScale: imágenes. Esto es efectivamente lo que hace la solución de Ben, solo que de una manera un poco más ligera, ya que no tiene la sobrecarga de una vista web completa.

Un problema con el que se puede encontrar es que la escala dentro de la vista de desplazamiento viene en forma de transformaciones aplicadas a la imagen. Esto puede provocar imágenes borrosas en factores de zoom altos. Para algo que se puede volver a dibujar, puede seguir mis sugerencias here para proporcionar una visualización más nítida después de que finalice el gesto de pellizco. La solución de hniels podría usarse en ese momento para cambiar la escala de su imagen.