iphone - example - Zoom mediante programación de un UIWebView sin gestos: el punto central no se calculó correctamente

wkwebview ios

Question

El problema

Tengo una UIWebView dentro de mi aplicación para iPad que necesito ampliar mediante programación, pero sin el uso de gestos / toques. La aplicación. tiene un "+" y un "-" para acercar y alejar en incrementos definidos por el usuario (es una aplicación para personas con problemas de visión).

Esta funcionalidad de botón de +/- zoom trabajó previamente 100% bien cuando mi aplicación. usó un UIImageView dentro de UIScrollView (en lugar de WebView). El ImageView era la vista real que se amplió, y el CenterPoint se calculó para el método zoomToRect de ScrollView.

Ahora tengo un WebView, que sé que contiene un ScrollView como subvista. Traté de adaptar el código que anteriormente funcionaba con el combo ImageView / ScrollView para ampliar en cambio el ScrollView de WebView, pero ya no se está calculando correctamente el CenterPoint para zoomToRect:.

Lo que pasa:

WebView amplía correctamente en términos del nivel de zoom, pero el punto central siempre es incorrecto. Por algún motivo, la pantalla siempre se acerca cada vez más a la esquina superior izquierda.

Otro problema extraño, es que después de la primera vez que acercas el zoom, no puedes desplazarte por la WebView más allá de la parte visible de la pantalla. Si lo intenta, muestra un poco del contenido más allá de los límites del área actualmente visible, pero instantáneamente se recupera.

Lo que he intentado:

Estoy intentando ampliar el ScrollView de UIWebView.

Creo un puntero a ScrollView y configuro "self" como su delegado. Luego configuro varias variables, como scrSize (el tamaño de la vista para ampliar) y ZoomHandler (explicado a continuación):

- (void)viewDidLoad {
  // ... Various UIWebView setup ...    
  [self LoadURL];

  // Zooming & scrollview setup
  zoomHandler = [[ZoomHandler alloc] initWithZoomLevel: ZOOM_STEP];
  scrSize = CGPointMake(self.WebView.frame.size.width, self.WebView.frame.size.height);

  scrollView = [WebView.subviews objectAtIndex:0];
  [scrollView setTag:ZOOM_VIEW_TAG];
  [scrollView setMinimumZoomScale:MINIMUM_SCALE];
  [scrollView setZoomScale:1];
  [scrollView setMaximumZoomScale:10];
  scrollView.bounces = FALSE;
  scrollView.bouncesZoom = FALSE;
  scrollView.clipsToBounds = NO;
  [scrollView setDelegate:self];

  [super viewDidLoad];
}

Para anular las limitaciones de zoom predeterminadas de WebView, inserto este Javascript en la página web cargada en el método webViewDidFinishLoad:

function increaseMaxZoomFactor() {
  var element = document.createElement(''meta'');
  element.name = "viewport";
  element.content = "maximum-scale=10 minimum-scale=1 initial-scale=1 user-scalable=yes width=device-width height=device-height;"
  var head = document.getElementsByTagName(''head'')[0];
  head.appendChild(element);
}

Código de CenterPoint:

Este código se usa para calcular el CenterPoint para pasar a zoomToRect :. Esto funcionó 100% bien cuando estaba acercando un ImageView dentro de ScrollView.

-(IBAction)zoomOut {
    float newScale = [scrollView zoomScale] / ZOOM_STEP;
    if( [scrollView zoomScale] > MINIMUM_SCALE) {
        [self handleZoomWith:newScale andZoomType: FALSE];
    }
}

-(IBAction)zoomIn {
    float newScale = [scrollView zoomScale] * ZOOM_STEP;
    if( [scrollView zoomScale] < MAXIMUM_SCALE){
        [self handleZoomWith:newScale andZoomType: TRUE];
    }
}

-(void)handleZoomWith: (float) newScale andZoomType:(BOOL) isZoomIn {
    CGPoint newOrigin = [zoomHandler getNewOriginFromViewLocation: [scrollView contentOffset] 
                                                        viewSize: scrSize andZoomType: isZoomIn];
    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:newOrigin];
    [scrollView zoomToRect:zoomRect animated:YES];
}

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center {
    CGRect zoomRect;

    //  At a zoom scale of 1.0, it would be the size of the scrollView''s bounds.
    //  As the zoom scale decreases, so more content is visible, the size of the rect grows.
    zoomRect.size.height = [WebView frame].size.height / scale;
    zoomRect.size.width  = [WebView frame].size.width  / scale;

    // Choose an origin so as to get the right center.
    zoomRect.origin.x = center.x / scale;
    zoomRect.origin.y = center.y / scale;

    return zoomRect;
}

/**
 Determine the origin [THIS IS INSIDE ZOOMHANDLER]
 */
-(CGPoint) getNewOriginFromViewLocation: (CGPoint) oldOrigin viewSize: (CGPoint) viewSize andZoomType:(BOOL) isZoomIn {

    // Calculate original center (add the half of the width/height of the screen)
    float oldCenterX = oldOrigin.x + (viewSize.x / 2);
    float oldCenterY = oldOrigin.y + (viewSize.y / 2);

    // Xalculate the new center
    CGPoint newCenter;
    if(isZoomIn) {
        newCenter = CGPointMake(oldCenterX * zoomLevel, oldCenterY * zoomLevel);
    } else {
        newCenter = CGPointMake(oldCenterX / zoomLevel, oldCenterY / zoomLevel);
    }

    // Calculate the new origin (deduct the half of the width/height of the screen)
    float newOriginX = newCenter.x - (viewSize.x / 2);
    float newOriginY = newCenter.y - (viewSize.y / 2);

    return CGPointMake(newOriginX, newOriginY);
}

¿Alguien tiene alguna idea de por qué el CenterPoint no se calcula correctamente? Cualquier ayuda sería GRANMENTE apreciada; He estado atrapado en esto por una semana.

Gracias, Alex

Answer 1

¿Has intentado implementar el zoom usando JavaScript en lugar de la vista de desplazamiento de UIWebView?

Creo que puede ampliar la vista web llamando a:

[webView stringByEvaluatingJavaScriptFromString:@"document.body.style.zoom = 5.0;"]; (use su ZOOM_STEP como valor)

También puede calcular el centro de la ventana del navegador usando JS:

posY = getScreenCenterY();
posX = getScreenCenterX();

function getScreenCenterY() {
    var y = 0;
    y = getScrollOffset()+(getInnerHeight()/2);
    return(y);
}

function getScreenCenterX() {
    return(document.body.clientWidth/2);
}

function getInnerHeight() {
    var y;
    if (self.innerHeight) // all except Explorer
    {
        y = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight)
    // Explorer 6 Strict Mode
    {
        y = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
        y = document.body.clientHeight;
    }
    return(y);
}

function getScrollOffset() {
    var y;
    if (self.pageYOffset) // all except Explorer
    {
        y = self.pageYOffset;
    }
    else if (document.documentElement &&
document.documentElement.scrollTop) // Explorer 6 Strict
    {
        y = document.documentElement.scrollTop;
    }
    else if (document.body) // all other Explorers
    {
        y = document.body.scrollTop;
    }
    return(y);
}

(fuente: http://sliceofcake.wordpress.com/2007/09/13/use-javascript-to-find-the-center-of-the-browser/ )

Answer 2

for (UIScrollView *scroll in [myPDFView subviews]) {
  //Set the zoom level.
  [scroll setZoomScale:2.5f animated:YES];
}