Resizable UIImage

Question

我知道這個主題有很多Q & A，我讀了所有的東西，仍然無法完成它... 我試圖拉伸圖像，同時保持其圓邊。

這是我的形象（104x77px）：

這是我使用的代碼：

UIImage *bg = [UIImage imageNamed:@"btnBg"]; 
UIEdgeInsets insets = UIEdgeInsetsMake((bg.size.height - 1)/2, (bg.size.width - 1)/2, (bg.size.height - 1)/2, (bg.size.width - 1)/2); 
bg = [bg resizableImageWithCapInsets:insets]; 

UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 50, 44)]; 
imgView.image = bg; 

UIImageView *imgView2 = [[UIImageView alloc] initWithFrame:CGRectMake(20, 70, 250, 44)]; 
imgView2.image = bg; 

[self.view addSubview:imgView]; 
[self.view addSubview:imgView2]; 

，這就是問題所在：

，你可以看到每個圖像都有不同的邊緣。 我在做什麼錯了？

Answer 1

無論任何縮放涉及兩個不同尺寸的圖像可以不看完全一樣。但是，您可以將圖像分爲三部分：左角，中間部分（僅平行線）和右角。

現在要創建不同大小的圖像視圖，您需要保持左側和右側部分不變，並縮放中間部分，只要保持高度不變，就不會看起來扭曲。

請注意，我已將fitInRect的高度設置爲77，因爲這是原始圖像高度。您可以將其更改爲44，但請將所有圖像視圖的編號保持不變。 最後，widthToPreserve必須至少爲34（這意味着整個矩形寬度必須是68或更多），因爲那是原始圖像中圓角邊緣的寬度。

當然，如果您的目標圖像視圖高度爲44，您可以通過縮小圖像來簡單實現所有這些。

此代碼的工作：

-(void)viewDidAppear:(BOOL)animated 
{ 
    UIImage *img = [UIImage imageNamed:@"img"]; 

    UIImageView *view1 = [self getImageViewFromImage:img widthToPreserve:34 fitInRect:CGRectMake(20, 20, 100, 77)]; 

    UIImageView *view2 = [self getImageViewFromImage:img widthToPreserve:34 fitInRect:CGRectMake(20, 120, 250, 77)]; 

    [self.view addSubview:view1]; 
    [self.view addSubview:view2]; 

} 

-(UIImageView*)getImageViewFromImage:(UIImage*)image widthToPreserve:(float)width fitInRect:(CGRect)rect 
{ 
    CGImageRef left, middle, right; 
    CGRect leftRect, middleRect, rightRect; 
    UIImage *leftImage, *middleImage, *rightImage; 
    UIImageView *leftView, *middleView, *rightView; 

    // calculate CGRect values for the original image 
    leftRect = CGRectMake(0, 0, width, image.size.height); 
    middleRect = CGRectMake(width, 0, image.size.width - 2*width, image.size.height); 
    rightRect = CGRectMake(image.size.width - width, 0, width, image.size.height); 

    left = CGImageCreateWithImageInRect([image CGImage], leftRect); 
    middle = CGImageCreateWithImageInRect([image CGImage], middleRect); 
    right = CGImageCreateWithImageInRect([image CGImage], rightRect); 


    leftImage = [UIImage imageWithCGImage:left]; 
    middleImage = [UIImage imageWithCGImage:middle]; 
    rightImage = [UIImage imageWithCGImage:right]; 

    leftView = [[UIImageView alloc] initWithImage:leftImage]; 
    middleView = [[UIImageView alloc] initWithImage:middleImage]; 
    rightView = [[UIImageView alloc] initWithImage:rightImage]; 

    //make your image subviews, with scaling on the middle view 
    [leftView setFrame:CGRectMake(0, 0, width, rect.size.height)]; 
    [middleView setFrame:CGRectMake(width, 0, rect.size.width - 2*width, rect.size.height)]; 
    [rightView setFrame:CGRectMake(rect.size.width - width, 0, width, rect.size.height)]; 

//add your 3 subviews into a single image view 
    UIImageView *imgView = [[UIImageView alloc] initWithFrame:rect]; 
    [imgView addSubview:leftView]; 
    [imgView addSubview:middleView]; 
    [imgView addSubview:rightView]; 


    CGImageRelease(left); 
    CGImageRelease(middle); 
    CGImageRelease(right); 

    return imgView; 
} 

截圖：

Answer 2

檢查了這一點：Resizable UIImage where outside stretches and inside is kept the same

基本上你想的正好相反。希望能幫助到你！

Answer 3

我想你正在尋找的是可伸縮的圖像

[[UIImage imageNamed:@"someimage.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:5]; 

由於馬迪指出，這在iOS 5中已被棄用，對於我們這些可憐的靈魂必須支持的iOS 4.3，這是我們用什麼。

Answer 4

您可以指定圖像的駐留模式。選項是UIImageResizingModeStretch和UIImageResizingModeTile。

有一個可拉伸的圖像的想法是，讓你可以有一個小的圖像文件。您應該考慮使用較小的圖像來節省應用程序包中的空間。此外，您的左右邊緣插槽不必位於中間。他們應該超越曲線，看起來大約是40分。

下面的代碼用來設置調整大小模式：

bg = [bg resizableImageWithCapInsets:insets resizingMode: UIImageResizingModeStretch];