最近在做自定义地图的放大缩小与移动,虽然实现了主要功能,但是在细节上还是有很多缺陷瑕疵,在这里将代码和思路分享一下,希望能够抛砖引玉,得到高人指点.

实现图片的放大与缩小,我的思路是先通过两个触摸点距离的变化,判断是放大还是缩小,然后再把地图图片按比例放大缩小.

地图的移动,先记录触摸开始时的位置和触摸移动的位置,计算两者之间的差,再相应更改地图图片的位置.两个记录点不断更新,所以图片位置也随着手指的变动不断移动.

基本思路介绍完了,以下是代码.

1.因为图片是全屏的,同时还要考虑不同尺寸的屏幕,所以宏定义imageView的大小(屏幕的大小)

#define SCREENHEIGHT [[UIScreen mainScreen] bounds].size.height
#define SCREENWIDTH [[UIScreen mainScreen] bounds].size.width

2.在xib文件中放入一个imageView,大小为全屏,设置约束,并关联.h文件

触摸点进行比较时需要至少两个比较对象,所以在.h中需要声明

double lastdistance;//在捏合手势中用来记录上一次两点之间距离

@PRoperty(nonatomic,assign)CGPoint lastPoint;//移动时记录上一次位置

3.允许当前view执行触摸事件

self.view.multipleTouchEnabled=YES;

在写的时候我将图片的放大缩小移动写在了一起,但是为了方便理解,在这里我将他们按功能分开

4.图片放大缩小

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    if (touches.count==2) {
        NSArray *touchArray=[touches allObjects];
        UITouch *firstTouch=[touchArray objectAtIndex:0];
        UITouch *secondTouch=[touchArray objectAtIndex:1];
        CGPoint point1=[firstTouch locationInView:self.view];
        CGPoint point2=[secondTouch locationInView:self.view];
        //计算两点距离[(x1-x2)^2+(y1-y2)^2]开方
        double distance=[self distance:point1 point:point2];
        //在手指刚触摸屏幕时给last distance赋值,防止在手指捏合时因为last distance为空,造成第一次相减差太大,图片放大比例太高
       lastdistance=distance;

    }
}
 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
 {
    if (touches.count==2) {
 NSArray *touchArray=[touches allObjects];
 UITouch *firstTouch=[touchArray objectAtIndex:0];
 UITouch *secondTouch=[touchArray objectAtIndex:1];
 CGPoint point1=[firstTouch locationInView:self.view];
 CGPoint point2=[secondTouch locationInView:self.view];
 double distance=[self distance:point1 point:point2];
 if(distance-lastdistance>0)
 {
     int a=distance-lastdistance;
//计算放大倍数
     float times=1+a*0.005;
     CGSize bigSize=CGSizeMake(self.image.frame.size.width*times, self.image.frame.size.height*times);
     [self bigImageWithImage:self.image Size:bigSize];
 }
 else
 {
     int a=lastdistance-distance;
     float times=1-a*0.005;
     CGSize smallSize=CGSizeMake(self.image.frame.size.width*times, self.image.frame.size.height*times);
     [self smallImageWithImage:self.image Size:smallSize];
 }
 lastdistance=distance;
 }
 }
 -(double)distance:(CGPoint)p1 point:(CGPoint)p2
 {
 double distance=sqrt(pow(p1.x-p2.x,2)+pow(p1.y-p2.y,2));
 return distance;
 }
//放大图片
-(void)bigImageWithImage:(UIImageView *)image Size:(CGSize)size
{
    self.image.center=self.view.center;
    self.image.bounds=CGRectMake(0, 0, size.width, size.height);
}
//缩小图片
-(void)smallImageWithImage:(UIImageView *)image Size:(CGSize)size
{
    UIImageView *moveImage=image;
    if (size.height<=SCREENHEIGHT&&size.width<=SCREENWIDTH) {
        moveImage.center=self.view.center;
        moveImage.bounds=CGRectMake(0, 0, SCREENWIDTH, SCREENHEIGHT);
    }
    else
    {
    self.image.center=self.view.center;
    self.image.bounds=CGRectMake(0, 0, size.width, size.height);
    }
}

图片移动

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    if (touches.count==1) {
        UITouch *touch=[touches anyObject];
        self.lastPoint=[touch locationInView:self.view];
    }
}
 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
 {
     if (touches.count==1) {
         UITouch *touch=[touches anyObject];
         CGPoint movePoint=[touch locationInView:self.view];
         [self moveImage:movePoint];
     }
 }
//移动图片
-(void)moveImage:(CGPoint)movePoint
{
    float x = movePoint.x - self.lastPoint.x;
    float y = movePoint.y - self.lastPoint.y;
    
    float newX = self.image.frame.origin.x + x;
    float newY = self.image.frame.origin.y + y;
    //判断,防止图片越界
    if (newX > 0) {
        newX = 0;
    }
    if (newX < SCREENWIDTH-self.image.frame.size.width) {
        newX = SCREENWIDTH-self.image.frame.size.width;
    }
    if (newY > 0) {
        newY = 0;
    }
    if (newY < SCREENHEIGHT-self.image.frame.size.height) {
        newY = SCREENHEIGHT-self.image.frame.size.height;
    }
    self.image.frame = CGRectMake(newX, newY, self.image.frame.size.width, self.image.frame.size.height);
    self.lastPoint = movePoint;
}

功能实现最大的缺陷是每次放大图片的中心会重新定位到屏幕中心,在那里捏合就在那里放大.如果有更好地方法请告诉我.

下面是效果演示:

图片放大与移动: