1. 程式人生 > >瘋狂ios講義之例項:通過捏合手勢縮放圖片

瘋狂ios講義之例項:通過捏合手勢縮放圖片

例項:通過捏合手勢縮放圖片

捏合手勢處理器可以檢測到使用者手勢捏合的比例,解析該捏合比例即可對圖片進行縮放。本例項將通過捏合手勢對圖片進行縮放。建立一個Single View Application,該應用包含一個應用程式委託類、一個檢視控制器類以及配套的Main.storyboard介面設計檔案。在Interface Builder中開啟該介面設計檔案,將一個UIImageView拖入介面設計檔案中,並讓該UIImageView控制元件與應用介面保持相同大小。為了在程式中能訪問UIImageView控制元件,需要將該控制元件繫結到控制器的imageView IBOutlet屬性。

由於該程式需要對圖片進行縮放,因此我們將《瘋狂

iOS講義》上冊第12章介紹繪圖時開發的UIImage(FKCategory)分類新增到該應用中,這樣就可為UIImage類增加圖片縮放、旋轉等方法。

接下來修改檢視控制器類,在檢視控制器類中使用UIPinchGestureRecognizer來檢測使用者捏合手勢,並根據捏合手勢對圖片進行縮放。下面是該控制器類的實現程式碼。

程式清單:codes/01/1.3/PinchImage/PinchImage/FKViewController.m

@implementation FKViewController

UIImage* srcImage;

CGFloat currentScale;

- (void)viewDidLoad

{

[superviewDidLoad];

[UIApplication sharedApplication].statusBarHidden = YES;

srcImage= [UIImage imageNamed:@"seashore.png"];

// 設定圖片直接顯示在中間(不進行任何縮放)

self.view.contentMode = UIViewContentModeCenter;

// 設定imageView初始顯示的圖片

self.imageView.image = srcImage;

// 設定初始的縮放比例

currentScale = 1;

// 設定imageView允許使用者互動,支援多點觸碰

self.imageView.userInteractionEnabled = YES;

self.imageView.multipleTouchEnabled = YES;

// 建立UIPinchGestureRecognizer手勢處理器,該手勢處理器激發scaleImage:方法

UIPinchGestureRecognizer* gesture = [[UIPinchGestureRecognizer alloc]

initWithTarget:self action:@selector(scaleImage:)];

// imageView新增手勢處理器

[self.imageView addGestureRecognizer:gesture];

}

- (void)scaleImage:(UIPinchGestureRecognizer*)gesture

{

CGFloatscale = gesture.scale;

// 如果捏合手勢剛剛開始

if (gesture.state ==UIGestureRecognizerStateBegan)

{

// 計算當前縮放比

currentScale= self.imageView.image.size.width / srcImage.size.width;

}

// 根據手勢處理器的縮放比例計算圖片縮放後的目標大小

CGSizetargetSize = CGSizeMake(srcImage.size.width * scale * currentScale,

srcImage.size.height * scale * currentScale);

// 對圖片進行縮放

self.imageView.image = [srcImage imageByScalingToSize:targetSize];

}

@end


該例項使用捏合手勢處理器的方法與前面介紹的沒有任何區別,只是程式中增加了粗體字程式碼的判斷。該粗體字程式碼判斷當捏合手勢開始時,程式會把當前圖片的縮放比例記錄下來作為圖片的當前縮放比例,然後用捏合手勢的縮放比例乘以當前縮放比例作為圖片真正的縮放比例,接下來呼叫UIImage(FKCategory)分類中的方法對圖片進行縮放。

編譯、執行該程式,按下option鍵與滑鼠配合模擬使用者的兩個手指進行捏合,即可看到如圖1.4所示的效果。

wKioL1M03qygXseoAACkAMZ5RWQ446.jpg

1.4 使用捏合手勢處理器縮放圖片