ios - 将 UIButton 添加为 UIWebView 的 subview 并在缩放时调整其大小

Question

我在 .svg 中有世界地图的图像，我将其加载到 UIWebView 中。 (我使用了svg格式和UIWebView，因为图片太大无法加载到UIImageView)

我想在这张 map 上固定位置放置一堆 Pin。

例如，如果我在巴西放置一个图钉，则无论我滚动还是缩放 UIWebView

，该图钉都必须始终位于巴西

如何做到这一点？现在滚动不是问题，只是缩放

NSString *path = [[NSBundle mainBundle] pathForResource:@"map" ofType:@"svg"];

NSURL *url=[[NSURL alloc] initFileURLWithPath:path];
NSURLRequest *request=[[NSURLRequest alloc]initWithURL:url];
[_webView loadRequest:request];
_webView.scalesPageToFit = YES;
_webView.delegate = self;

UIButton *but = [[UIButton alloc] initWithFrame:CGRectMake(100, 400, 30, 30)];
[but setBackgroundColor:[UIColor blackColor]];
[_webView.scrollView addSubview:but];

编辑正如@dymv 使用 ScrollView 的委托(delegate)方法所建议的那样，我们可以更改按钮的大小，但存在问题:

如何对多个按钮重用此代码？

编辑 2:

我解决了很多按钮的问题，但是现在好像不能把pin固定在同一个点上

很明显，图钉的坐标会根据缩放而变化，但问题是图钉在视觉上移动太多，无法到达应有的位置。

例如，如上所示，如果我在巴西海岸放置一个大头针，当我缩小时，大头针会越过海洋，而不会留在海岸上。这确实是一个问题，因为有这么多引脚，最终结果会非常糟糕

-(void)webViewDidFinishLoad:(UIWebView *)webView {

    CGPoint primo = CGPointMake(100, 100);       

    for (int i = 0; i<36; i++) {

        UIButton *bu = [[UIButton alloc] initWithFrame:CGRectMake(primo.x, primo.y, 10, 18)];
        [bu setBackgroundImage:[UIImage imageNamed:@"pin"] forState:UIControlStateNormal];
        [bu addTarget:self action:@selector(buttonTouch:) forControlEvents:UIControlEventTouchUpInside];
        [_webView.scrollView addSubview:bu];
        bu.tag = i;

        [arrayOfPoint addObject:[NSValue valueWithCGPoint:bu.center]];
        [arrayOfRect addObject:[NSValue valueWithCGRect:bu.frame]];

        primo.x = primo.x + 20;
        primo.y = primo.y + 10;
    }
}


-(void)scrollViewDidZoom:(UIScrollView *)scrollView {

    CGFloat scale = scrollView.zoomScale; 

    for (UIView *button in scrollView.subviews) {

      if ([button isMemberOfClass:[UIButton class]]) {

        int i = button.tag;

        NSValue *newValue = [arrayOfRect objectAtIndex:i];
        CGRect newFrame = [newValue CGRectValue];

        button.frame = CGRectMake(CGRectGetMinX(newFrame) * scale,
                                  CGRectGetMinY(newFrame) * scale,
                                  CGRectGetWidth(newFrame),
                                  CGRectGetHeight(newFrame));

      }
   }
}

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

  for (UIView *button in scrollView.subviews) {

    if ([button isKindOfClass:[UIButton class]]) {

        int tag = button.tag;
        CGRect rectPre = button.frame;
        [arrayOfRect replaceObjectAtIndex:tag withObject:[NSValue valueWithCGRect:rectPre]];

     }
   }
}

已解决:

要解决定位问题就可以改这个方法:

-(void)scrollViewDidZoom:(UIScrollView *)scrollView {

    CGFloat scale = scrollView.zoomScale; 

    for (UIView *button in scrollView.subviews) {

      if ([button isMemberOfClass:[UIButton class]]) {

        int i = button.tag;

        NSValue *newValue = [arrayOfRect objectAtIndex:i];
        CGRect newFrame = [newValue CGRectValue];

        button.frame = CGRectMake(CGRectGetMinX(newFrame) * scale,
                                  CGRectGetMinY(newFrame) * scale,
                                  CGRectGetWidth(newFrame) * scale, //add *scale
                                  CGRectGetHeight(newFrame) * scale); // add *scale

      }
   }
}

Answer 1

如果您的目标是 iOS 5 及更高版本，您可以从 UIWebView 实例访问 scrollView 属性并成为其委托(delegate)。

我们对 scrollView:zoom* 方法感兴趣。基本思路是:

1) 在 -scrollViewDidZoom: 上，您根据 scrollView.zoomScale 定位按钮，同时考虑到 currentButtonFrame；

2) 在 -scrollViewDidEndZooming:withView:atScale: 上，您正在更新 currentButtonFrame。

检查示例项目 here .