[IOS] 詳解圖片局部展開 + 實現圖片局部收縮,ios展開

來源:互聯網
上載者:User

[IOS] 詳解圖片局部展開 + 實現圖片局部收縮,ios展開

(圖為首頁右上方『+』效果)

當初還在開發WP7的時候,從IOS同事那邊瞭解到類似以上功能的實現。

Item條數不同,總高度也不同,這就需要將背景圖片進行局部展開到響應的高度,並且保持上方的三角形不變型。

然而回想WP,沒找到有API能對圖片做此處理,只要圖片顯示比例與源圖比例不一樣,就會導致圖片展開變形。

(因此我只能讓設計給一個右上方三角形,之後一個純色長方形,純色長方形展開後不會有問題。想要圖片局部改變也行,得自己處理像素)

 

 一. 局部展開

現在我們就來看看如何進行圖片局部展開,相關API如下:

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode;

 capInsets定義圖片的不展開範圍(這個範圍是相對於源圖片大小而言),resizingMode定義了圖片以展開/平鋪的方式變換。

 

在設定了四周的不展開範圍後,中間的藍色部分將會以 展開/平鋪的方式 被展開。

 

1. 我們先討論討論基於某一點進行展開。

原圖片大小為 200 * 78,需把它展開成200 * 250 ,寬度保持不變。

①.在不進行局部展開的情況下,我們得到的效果:

②. 可以知道,為了達到效果,圖片周圍都不能夠展開,現在我們來展開正中間的一個點。

- (void)viewDidLoad {  [super viewDidLoad];       //源圖片大小 可以通過對其觸摸查看展開點改變後相應的效果 UIImage *originImage = [UIImage imageNamed:@"wechat"]; //200 * 78 originButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 200, 200, 78)]; originButton.userInteractionEnabled = NO; [originButton setBackgroundImage:originImage forState:UIControlStateNormal]; [self.view addSubview:originButton]; //展開後的圖片 CGFloat width = originImage.size.width / 2.0; CGFloat height = originImage.size.height / 2.0; UIImage *newImage = [originImage resizableImageWithCapInsets:UIEdgeInsetsMake(height,width,height,width) resizingMode:UIImageResizingModeStretch];//取正中間一個點,展開方式 resizableButton = [[UIButton alloc] initWithFrame:CGRectMake(205, 200, 200, 250)];//高度由78變為250 [resizableButton setBackgroundImage:originImage forState:UIControlStateNormal]; [self.view addSubview:resizableButton];}//實現觸摸  如果在左邊的原圖內部 則根據觸摸點所在位置去展開圖片-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{    UITouch *touch = [touches anyObject];    CGPoint point = [touch locationInView:self.view];    CGPoint actualPoint = [self.view convertPoint:point toView:originButton];//座標轉換    if(actualPoint.x >= 0 && actualPoint.x <= originButton.frame.size.width &&       actualPoint.y >= 0 && actualPoint.y <= originButton.frame.size.height){        NSLog(@"--------%@---------",NSStringFromCGPoint(actualPoint));        UIImage *image1 = [UIImage imageNamed:@"wechat"];        CGFloat top = actualPoint.y;        CGFloat left = actualPoint.x;        CGFloat bottom = image1.size.height - actualPoint.y;        CGFloat right = image1.size.width - actualPoint.x;      UIImage *newImage = [image1 resizableImageWithCapInsets:UIEdgeInsetsMake(top,left,bottom,right) resizingMode:UIImageResizingModeStretch]; [resizableButton setBackgroundImage:newImage forState:UIControlStateNormal]; } }

 

 

③.寬度大於圖片實際寬度時:

 ④.長和寬都大於圖片時,橫向縱向都會被展開。

相當於在上面的縱向展開結束的基礎上(同時展開點也被展開的)繼續由展開點橫向展開。

 

總結:以上我們都是基於一個點進行展開。

     縱向展開時,會以展開點橫向延伸形成的線,展開至新的高度。

     橫向展開時,會以展開點縱向延伸形成的線,展開新的寬度。

  

 

2. 現在我們看看基於某一塊地區進行展開

①.寬度不變,高度變大,使用展開Stretch的方式,其他亦然。 

    

 ②.高和寬都增加,使用平鋪Tile的方式。

也更好的解釋了上述的Stretch展開

   

 

二. 圖片局部收縮

但是如果控制項的大小比圖片的小的話,就會導致圖片壓縮。三角形處特別明顯

 

 既然能夠將圖片進行局部展開,那是否能夠將圖片進行局部壓縮呢?

 

想了很久,用展開resizableImageWithCapInsets的方式沒找到解決辦法,那隻有自己寫了。

 

1.不管是橫向還是縱向,都只能收縮要收縮的部分,因此也跟展開一樣,需要一個UIEdgeInsets。

2.要把收縮的部分裁剪下來,變得更小。 因此需要知道變化後的寬和高,即圖片最終的寬高CGRect。

3.這個局部收縮的過程就是將圖片裁剪、收縮、拼接的過程。

為了方便,寫了一個分類,和展開的方法類似//capInsets 相對圖片來說,不需要展開的部分

//actualSize 需要顯示的大小- (UIImage *)shrinkImageWithCapInsets:(UIEdgeInsets)capInsets actualSize:(CGSize)actualSize{    UIImage newImage = self;      if(actualSize.width < self.size.width){        //寬度變小了         newImage = 裁剪-中間收縮-拼接(newImage);//最多分為三列  詳細代碼見文末demo
if(actualSize.height >= self.size.height){ return newAllImage; }//否則繼續縱向處理 } if(actualSize.height < self.size.height){ //高度變小了 newImage = 裁剪-中間收縮-拼接(newImage);//最多分為三行 詳情見文末demo
return newAllImage; } return nil; }

 圖片裁剪:

//裁剪圖片-(UIImage *)clipImageWithClipRect:(CGRect)clipRect{    CGImageRef clipImageRef = CGImageCreateWithImageInRect(self.CGImage, clipRect);    UIGraphicsBeginImageContext(clipRect.size);//設定圖片大小        CGContextRef context = UIGraphicsGetCurrentContext();    CGContextDrawImage(context, clipRect, clipImageRef);    UIImage *clipImage = [UIImage imageWithCGImage :clipImageRef];        UIGraphicsEndImageContext();        return clipImage;}

圖片收縮:

//按照一定大小縮放圖片-(UIImage *)scaleImageToSize:(CGSize)size{    UIGraphicsBeginImageContext(size);//設定新的大小    [self drawInRect:CGRectMake(0, 0, size.width, size.height)];    UIImage *scaleImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    return scaleImage;}

多個圖片拼接:

+(UIImage *)combineWithImages:(NSArray *)images orientation:(YFImageCombineType)orientation{    NSMutableArray *sizeArray = [[NSMutableArray alloc] init];    CGFloat maxHeight = 0, maxWidth = 0;    for (id image in images) {//        if([image isKindOfClass:[UIImage class]]){            CGSize size = ((UIImage *)image).size;            if(orientation == YFImageCombineHorizental){//橫向                maxWidth += size.width;                maxHeight = (size.height > maxHeight) ? size.height : maxHeight;            }            else{                maxHeight += size.height;                maxWidth = (size.width > maxWidth) ? size.width : maxWidth;            }            [sizeArray addObject:[NSValue valueWithCGSize:size]];//        }    }        CGFloat lastLength = 0;//記錄上一次的最右或者最下邊值    UIGraphicsBeginImageContext(CGSizeMake(maxWidth, maxHeight));    for (int i = 0; i < sizeArray.count; i++){        CGSize size = [[sizeArray objectAtIndex:i] CGSizeValue];        CGRect currentRect;        if(orientation == YFImageCombineHorizental){//橫向            currentRect = CGRectMake(lastLength, (maxHeight - size.height) / 2.0, size.width, size.height);            [[images objectAtIndex:i] drawInRect:currentRect];            lastLength = CGRectGetMaxX(currentRect);        }        else{            currentRect = CGRectMake((maxWidth - size.width) / 2.0, lastLength, size.width, size.height);            [[images objectAtIndex:i] drawInRect:currentRect];            lastLength = CGRectGetMaxY(currentRect);        }    }    UIImage* combinedImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();        return combinedImage;}

使用:引入標頭檔   #import "UIImage+YFShrink.h"

    //收縮後的圖片  150 * 70   需要傳入一個顯示的實際大小    //實際顯示寬度須actualWidth <= left + right;    //實際顯示高度須actualHeight <= top + bottom;    UIImage *originImage = [UIImage imageNamed:@"wechat"]; //200 * 78    UIImage *shrinkImage = [originImage shrinkImageWithCapInsets:UIEdgeInsetsMake(30, 40, 30, 60) actualSize:CGSizeMake(150, 60)];    shrinkButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 320, 150, 60)];    [shrinkButton setBackgroundImage:shrinkImage forState:UIControlStateNormal];    [self.view addSubview:shrinkButton];

 

效果:                                         標註:

 

Github連結

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。