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