ios实现类似魔兽小地图功能 在

写了一个类似魔兽小地图功能的控件。

比如你有一个可以放大缩小的scrollView。会在里面进行一些放大缩小，点击里面的按钮呀，等操作。

这个小地图控件。就会和你的大scrollView同步。并有缩略图和你当前视口的位置。就像游戏里那样。

看图。

SmallMapView.h

//
//  SmallMapView.h
//  littleMapView
//
//  Created by fuqiang on 13-7-2.
//  Copyright (c) 2013年 fuqiang. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface SmallMapView : UIView

//缩放比例
@property (nonatomic,assign,readonly)float scaling;

//标示窗口位置的浮动矩形
@property (nonatomic,retain,readonly)CALayer *rectangleLayer;

//内容
@property (nonatomic,retain,readonly)CALayer *contentLayer;

//被模拟的UIScrollView
@property (nonatomic,retain,readonly)UIScrollView *scrollView;

//init
- (id)initWithUIScrollView:(UIScrollView *)scrollView frame:(CGRect)frame;

//在UIScrollView的scrollViewDidScroll委托方法中调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

//重绘View内容(需要注意。如果在调用reloadSmallMapView 方法的时候，需要更新的内容内有动画。如按钮变色等)
//请用[self performSelector:@selector(reloadSmallMapView:) withObject:nil afterDelay:0.2];
- (void)reloadSmallMapView;
@end

SmallMapView.m

//
//  SmallMapView.m
//  littleMapView
//
//  Created by fuqiang on 13-7-2.
//  Copyright (c) 2013年 fuqiang. All rights reserved.
//

#import "SmallMapView.h"

@implementation SmallMapView

- (id)initWithUIScrollView:(UIScrollView *)scrollView frame:(CGRect)frame
{
    self = [super init];
    if (self) {
        _scrollView = scrollView;
        
        //设置缩略图View尺寸
        [self setFrame:frame];
        
        //设置缩略图缩放比例
        [self setScaling:_scrollView];
        
        //设置罗略图内容
        _contentLayer = [self drawContentView:_scrollView frame:frame];
        [self.layer addSublayer:_contentLayer];
        
        //初始化缩略移动视口
        _rectangleLayer = [[CALayer alloc] init];
        _rectangleLayer.opacity = 0.5;
        _rectangleLayer.shadowOffset = CGSizeMake(0, 3);
        _rectangleLayer.shadowRadius = 5.0;
        _rectangleLayer.shadowColor = [UIColor blackColor].CGColor;
        _rectangleLayer.shadowOpacity = 0.8;
        _rectangleLayer.backgroundColor = [UIColor whiteColor].CGColor;
        _rectangleLayer.frame = CGRectMake(0, 0, scrollView.frame.size.width * _scaling, scrollView.frame.size.height * _scaling);
        [self.layer addSublayer:_rectangleLayer];
    }
    return self;
}

- (void)dealloc
{
    [_rectangleLayer release];
    [super dealloc];
}

//------
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self setScaling:scrollView];
    float x = scrollView.contentOffset.x;
    float y = scrollView.contentOffset.y;
    float h = scrollView.frame.size.height;
    float w = scrollView.frame.size.width;
    [self.rectangleLayer setFrame:CGRectMake(x * _scaling, y * _scaling, h * self.scaling, w * self.scaling)];
}

//重绘View内容
- (void)reloadSmallMapView
{
    [_contentLayer removeFromSuperlayer];
    _contentLayer = [self drawContentView:_scrollView frame:self.frame];
    [self.layer insertSublayer:_contentLayer atIndex:0];
}

//设置缩略图缩放比例
- (void)setScaling:(UIScrollView *)scrollView
{
    _scaling = self.frame.size.height / scrollView.contentSize.height;
}

//复制UIScrollView中内容
- (CALayer *)drawContentView:(UIScrollView *)scrollView frame:(CGRect)frame
{
    [self setScaling:scrollView];
    CALayer *layer = [[CALayer alloc] init];
    layer.frame = frame;
    for (UIView *view in scrollView.subviews)
    {
        UIGraphicsBeginImageContext(view.bounds.size);
        [view.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        CALayer *copyLayer = [CALayer layer];
        copyLayer.contents = (id)image.CGImage;
        float x = view.frame.origin.x;
        float y = view.frame.origin.y;
        float h = view.frame.size.height;
        float w = view.frame.size.width;
        copyLayer.frame = CGRectMake(x * _scaling,y *_scaling,w * _scaling,h * _scaling);
        [layer addSublayer:copyLayer];
    }
    return [layer autorelease];
}
@end

如果有需要的，可以去这里得到源码：https://github.com/TinyQ/LittleMapView.git