iphone - 中央を引き伸ばさずにUIImageViewを引き伸ばす方法は?

Question

上の写真の左右を伸ばして、真ん中の矢印は伸ばしたままにしたいです。どうやってやるの？

Answer 1

Photoshop を煩わせたくない場合、および画像を動的にサイズ変更する必要がない場合は、UIImage で私のカテゴリ メソッドを使用できます。

「17maA.png」という名前のサンプル画像の幅は 124 ピクセルです。したがって、これを使用して 300 ピクセル幅のバージョンを簡単に作成できます。

UIImage *image = [UIImage imageNamed:@"17maA"];
UIImage *newImage = [image pbResizedImageWithWidth:300 andTiledAreaFrom:10 to:20 andFrom:124-20 to:124-10];

これはカテゴリメソッドです:

- (UIImage *)pbResizedImageWithWidth:(CGFloat)newWidth andTiledAreaFrom:(CGFloat)from1 to:(CGFloat)to1 andFrom:(CGFloat)from2 to:(CGFloat)to2  {
    NSAssert(self.size.width < newWidth, @"Cannot scale NewWidth %f > self.size.width %f", newWidth, self.size.width);

    CGFloat originalWidth = self.size.width;
    CGFloat tiledAreaWidth = (newWidth - originalWidth)/2;

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(originalWidth + tiledAreaWidth, self.size.height), NO, self.scale);

    UIImage *firstResizable = [self resizableImageWithCapInsets:UIEdgeInsetsMake(0, from1, 0, originalWidth - to1) resizingMode:UIImageResizingModeTile];
    [firstResizable drawInRect:CGRectMake(0, 0, originalWidth + tiledAreaWidth, self.size.height)];

    UIImage *leftPart = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(newWidth, self.size.height), NO, self.scale);

    UIImage *secondResizable = [leftPart resizableImageWithCapInsets:UIEdgeInsetsMake(0, from2 + tiledAreaWidth, 0, originalWidth - to2) resizingMode:UIImageResizingModeTile];
    [secondResizable drawInRect:CGRectMake(0, 0, newWidth, self.size.height)];

    UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return fullImage;
}

Answer 2

Photoshopまたは別の画像編集ツールを使用して、画像を端と中央の2つの部分に分割します。エッジ画像は1ピクセル幅で、左端と右端に使用できます。ただし、中心は矢印をキャプチャする幅のピクセル数が多いです。UIImageView次に、左端、中央、右端の3つのインスタンスを並べて配置できます。中央が元の寸法を維持しながら、左端と右端が希望の幅にサイズ変更されます。

Answer 3

（あまり役に立ちませんが、反対のサポートがあります。画像の中央を引き伸ばし、エッジ部分を同じサイズに保ちます。コーナーを維持しながらUIImageを引き伸ばすを参照してください。）

独自のソリューションを作成するために、左の画像、中央の画像、右の画像の3つの部分を含むコンポーネントを作成できます。次に、左右のコンポーネント（画像）が伸びている間、中央部分が同じ幅のままであることを確認して、コンポーネントのサイズ変更を処理します。

代替戦略： 2つの画像を積み重ねたコンポーネントを作成します。下の画像はフラットバービット（三角形なし）で、使用可能なスペースを埋めるために水平方向に伸びています。上の画像は三角形の中央部分で、使用可能なスペースの中央に配置されています。これはあなたが探している効果を与えるでしょう。

また、伸縮性のある優れたコンポーネントを作成するのに役立つアプリ（無料ではありません！）があります：PaintCode。

Answer 4

@Arashk の回答に基づいて、パラメーターUIImageを取る Swift 拡張機能。size

ストレッチされた画像の中心はまだ中心にあります。

extension UIImage {

  func strechedImageSides(newSize: CGSize) -> UIImage? {
    guard size.width < newSize.width || size.height < newSize.height else {
      return self
    }

    let originalWidth = size.width
    let originalHeight = size.height

    let tiledAreaWidth  = ceil(newSize.width  - originalWidth)  / 2.0
    let tiledAreaHeight = ceil(newSize.height - originalHeight) / 2.0

    UIGraphicsBeginImageContextWithOptions(CGSize(width: originalWidth + tiledAreaWidth,
                                                  height: originalHeight + tiledAreaHeight),
                                           false,
                                           scale)

    let bottomRightResizable = resizableImage(withCapInsets: UIEdgeInsets(top: 0,
                                                                                left: 0,
                                                                                bottom: originalHeight - 1,
                                                                                right: originalWidth - 1),
                                                    resizingMode: .stretch)
    bottomRightResizable.draw(in: CGRect(x: 0,
                                         y: 0,
                                         width: originalWidth + tiledAreaWidth,
                                         height: originalHeight + tiledAreaHeight))

    let topLefthPart = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    UIGraphicsBeginImageContextWithOptions(newSize,
                                           false,
                                           scale)

    let topLeftResizable = topLefthPart?.resizableImage(withCapInsets: UIEdgeInsets(top: tiledAreaHeight + originalHeight - 1,
                                                                                    left: tiledAreaWidth + originalWidth - 1,
                                                                                    bottom: 0,
                                                                                    right: 0),
                                                        resizingMode: .stretch)

    topLeftResizable?.draw(in: CGRect(origin: .zero, size: newSize))

    let fullImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return fullImage
  }
}