将UIButton添加为UIWebView的子视图，并在缩放时调整其大小 [英] add UIButton as subview of UIWebView and resize it when zoom

问题描述

我将 .svg 中的世界地图图片加载到 UIWebView 中。 （我使用svg格式和UIWebView，因为图像太大而无法加载到UIImageView中）

I have the image of the World map in .svg that i load into UIWebView. (I used svg format and UIWebView because the image is too big to load into UIImageView)

我想在固定位置放置一堆Pin。

I would like to put a bunch of Pin on this map with fixed position.

例如，如果我在巴西放置一个引脚，无论我是否滚动或缩放 UIWebView，此引脚必须始终保留在巴西。 code>

For example if I put a pin in Brazil, this pin must always remain on Brazil, no matter if I scroll or zoom the UIWebView

你怎么做到这一点？目前滚动不是问题，只有缩放

how you can do this? for now the scroll is not a problem but only the zoom

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，我们可以更改按钮的大小，但有问题：

EDIT as suggested by @dymv using the delegate methods of ScrollView, we can change the size of the buttons but there are problems:

如何使用许多按钮重用此代码？

how to reuse this code with many buttons?

EDIT2：

我解决了相对于许多按钮的问题，但现在看来我不能把针固定在同一点上。

I solved the problem relative to many buttons, but now it seems that I can not put the pin fixed on the same point.

显然，引脚的坐标会根据变焦而变化，但问题在于视觉引脚移动太多到应该的位置。

obviously the coordinates of the pin change depending on the zoom, but the problem is that visually pin moves too much to where it should be.

例如，如果我在巴西海岸放一个别针，当我缩小时，针脚越过海洋，并且不会留下在岸上。
这真是一个问题，因为有这么多针脚，最终结果会非常糟糕

For example as above if I put a pin on the coast of Brazil, when I zoom out, the pin goes over the ocean, and does not remain on the coast. This is really a problem as with so many pins, the end result would be really bad

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

     }
   }
}

已解决：

解决定位问题足以改变这种方法：

to solve the problem of positioning was enough to change this method:

-(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

      }
   }
}

推荐答案

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

If you're targeting iOS 5 and higher you can access scrollView property from UIWebView instance and become its delegate.

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

We are interested in scrollView:zoom* methods. Basic idea is:

1）在 -scrollViewDidZoom：您根据<$ c $定位按钮c> scrollView.zoomScale 考虑到 currentButtonFrame ;

1) On -scrollViewDidZoom: you're positioning the button according to scrollView.zoomScale with taking into account currentButtonFrame;

2）On -scrollViewDidEndZooming：withView：atScale：您正在更新 currentButtonFrame 。

2) On -scrollViewDidEndZooming:withView:atScale: you're updating currentButtonFrame.

检查示例项目此处。

这篇关于将UIButton添加为UIWebView的子视图，并在缩放时调整其大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！