【问题标题】:Zooming a background image without zooming the overlay缩放背景图像而不缩放叠加层
【发布时间】:2012-06-27 14:57:57
【问题描述】:

我是 iOS 开发的初学者,我正在尝试显示需要可缩放和可平移的图像(实际上是地图)。我的问题是我不知道如何添加将跟随平移以始终表示相同位置的叠加层,但不会被缩放缩放。会有多个叠加层,每个叠加层都必须是可点击的。

为了缩放和平移图像(地图),我在UIScrollView 中添加了我的UIImageView,效果很好,但我不知道如何添加此功能。

我找到了这个线程,但由于他的覆盖是静态的,所以这并不是同一个问题: UIScrollview with two images - Keeping 1 image zoomable and 1 image static (fixed size)

我已经在 android 中开发了相同的应用程序,并且为了完成这项工作,由于转换矩阵,我将地图的像素转换为屏幕坐标,并且我覆盖了 onDraw 方法来显示它,但我没有知道如何在 iOS 上做同样的事情,我不知道这是否是更好的解决方案。

感谢您的帮助。

【问题讨论】:

    标签: iphone ios image zooming


    【解决方案1】:

    好的,所以我找到了一种方法,如果它可以帮助任何人:

    我在滚动视图中添加了我的叠加层,带有背景图像(地图)。

    +CustomScrollView
    ----> UIImageView (map)
    ----> OverlayImageView (overlay)
    

    为了缩放,自定义滚动视图需要一个具有以下方法的委托:

    - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
        //The background image with the map
        return mapView;
    }
    
    //When a zoom occurs, move the overlay
    - (void)scrollViewDidZoom:(UIScrollView *)scrollView {
        UIImageView* overlayView = [scroll.subviews objectAtIndex:1];
        float x;
        float y;
        float width;
        float height;
    
        //keep the width and height of the overlay
        width = overlayView.frame.size.width;
        height = overlayView.frame.size.height;
        //Move it to stay over the same pixel of the map, and centers it
        x = (self.overlay.point.x * scroll.zoomScale - width/2);
        y = (self.overlay.point.y * scroll.zoomScale - height/2);
    
        overlayView.frame = CGRectMake(x,y,width,height);
    } 
    

    有了这个,我们说缩放只发生在背景图像上,但由于覆盖在UIScrollView中,它会随之平移。所以我们唯一需要注意的是在缩放变化时移动 Overlay,我们通过 scrollViewDidZoom 方法知道它。

    为了处理触摸事件,我们覆盖了CustomScrollViewtouchEnded:withEvent:,如果只有一次点击,我们会将其转发到覆盖层。我没有显示OverlayImageView,因为它只覆盖相同的方法(toucheEnded:withEvent:)来处理它的触摸。

    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
        UITouch* touch = [touches anyObject];
        // Coordinates in map view
        CGPoint point = [touch locationInView:[self.subviews objectAtIndex:0]];
    
        //forward
        if(touch.tapCount == 1){
            OverlayImageView* overlayView = [self.subviews objectAtIndex:1];
            CGPoint newPoint = [touch locationInView:overlayView];
    
            BOOL isInside = [overlayView pointInside:newPoint withEvent:event];
    
            if(isInside){
                [overlayView touchesEnded:touches withEvent:event];
            }
        }
        // zoom
        else if(touch.tapCount == 2){
    
    
            if(self.zoomScale == self.maximumZoomScale){
                [self setZoomScale:[self minimumZoomScale] animated:YES];
            } else {
                CGRect zoomRect = [self zoomRectForScrollView:self withScale:self.maximumZoomScale withCenter:point];            
    
                [self zoomToRect:zoomRect animated:YES];
                //[self setZoomScale:[self maximumZoomScale] animated:YES];
            }
    
            [self setNeedsDisplay];
    
        }
    }
    

    希望这会有所帮助。

    【讨论】:

    • 您能发布更多代码吗?因为我也试图做到这一点,但无法做到。
    【解决方案2】:

    您可以将 imageView 作为叠加层放在顶部,并将其 userInteractionEnabled 属性设置为 NO。然后你必须以编程方式平移它。

    【讨论】:

    • 我无法将 userInteractionEnabled 设置为 NO,因为用户将能够单击覆盖层(我忘了说这个)。但我会尝试这样的事情,我不是那样想的,谢谢。
    猜你喜欢
    • 2011-05-25
    • 2012-07-08
    • 1970-01-01
    • 2017-06-05
    • 1970-01-01
    • 2012-08-29
    • 2014-08-26
    • 1970-01-01
    相关资源
    最近更新 更多