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 (что означает, что общая ширина Rect должна быть 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]; 

Мэддите баллы из этого является устаревшим в прошивке 5, для тех из нас, бедных душ, имеющие для поддержки IOS 4.3 это то, что мы используем.

Answer 4

Вы можете указать режим проживания для вашего изображения. Возможные варианты: UIImageResizingModeStretch и UIImageResizingModeTile.

Идея иметь растяжимое изображение заключается в том, что вы можете иметь небольшой файл изображения. Вы должны рассмотреть возможность использования меньшего изображения для экономии места в своем приложении. Кроме того, ваши левые и правые вставки края не должны быть посередине. Они должны быть за пределами кривой, которая выглядит примерно на 40 точек в вашем изображении.

Вот код, используемый для установки режима изменения размера:

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