以编程方式缩放 UIWebView，无需手势 - 中心点计算不正确

问题

我的 iPad 应用程序中有一个 UIWebView，我需要以编程方式缩放它，但不使用手势/点击。该应用程序。有一个“+”和一个“-”按钮，用于以用户定义的增量放大和缩小（这是一个针对视障人士的应用程序）。

以前，当我的应用程序运行时，此 +/- 缩放按钮功能可以 100% 正常工作。在 UIScrollView 内部使用了 UIImageView（而不是 WebView）。 ImageView 是缩放的实际视图，而 CenterPoint 是为 ScrollView 的 ZoomToRect 方法计算的。

我现在有一个 WebView，我知道它包含一个 ScrollView 作为子视图。我尝试调整以前使用 ImageView/ScrollView 组合的代码来缩放 WebView 的 ScrollView，但它不再正确计算 ZoomToRect 的 CenterPoint：.

会发生什么：

WebView 在缩放级别上正确缩放，但中心点总是错误的。由于某种原因，屏幕每次都会放大左上角。

另一个奇怪的问题是，第一次放大后，您无法在 WebView 中滚动超过屏幕的可见部分。如果您尝试这样做，它会显示超出当前可见区域边界的一些内容，但它会立即弹回。

我尝试过的：

我正在尝试缩放 UIWebView 的 ScrollView。

我创建一个指向 ScrollView 的指针，并将“self”设置为其委托。然后，我设置各种变量，例如 scrSize（要缩放的视图的大小）和 ZoomHandler（如下所述）：

- (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];
}

为了覆盖 WebView 的默认缩放限制，我将此 Javascript 注入到 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);
}

中心点代码：

此代码用于计算要传递给zoomToRect: 的CenterPoint。当我在 ScrollView 中缩放 ImageView 时，这工作得 100% 正常。

-(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);
}

有谁知道为什么 CenterPoint 计算不正确？任何帮助将不胜感激;我已经在这个问题上坚持了一个星期了。

谢谢， 亚历克斯

您是否尝试过使用 JavaScript 而不是 UIWebView 的滚动视图来实现缩放？

我相信你可以通过调用来缩放网络视图：

[webView stringByEvaluatingJavaScriptFromString:@"document.body.style.zoom = 5.0;"];（用你的ZOOM_STEP作为值）

您还可以使用 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);
}

（来源：http://sliceofcake.wordpress.com/2007/09/13/use-javascript-to-find-the-center-of-the-browser/ http://sliceofcake.wordpress.com/2007/09/13/use-javascript-to-find-the-center-of-the-browser/)