在保留角落的同时拉伸UIImage [英] Stretching an UIImage while preserving the corners

问题描述

我正在尝试拉伸导航箭头图像，同时保留边缘以使中间伸展并且末端固定。

I'm trying to stretch a navigation arrow image while preserving the edges so that the middle stretches and the ends are fixed.

这是我的图像我试图伸展：

Here is the image that I'm trying to stretch:

以下iOS 5代码允许在调整大小时图像拉伸UIEdgeInsets定义的图像的中心部分。

The following iOS 5 code allows the image when resized to stretch the center portions of the image defined by the UIEdgeInsets.

[[UIImage imageNamed:@"arrow.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 7, 15, 15)];

这会产生一个如下图像（如果图像的帧设置为70像素宽） ：

This results in an image that looks like this (if the image's frame is set to 70 pixels wide):

这实际上是我想要的，但 resizableImageWithCapInsets 仅在iOS 5及更高版本上受支持。

This is actually what I want but resizableImageWithCapInsets is only supported on iOS 5 and later.

在iOS 5之前，唯一类似的方法是 stretchableImageWithLeftCapWidth：topCapHeight 但您只能指定顶部和左侧插图，这意味着图像必须具有相同的形状边缘。

Prior to iOS 5 the only similar method is stretchableImageWithLeftCapWidth:topCapHeight but you can only specify the top and left insets which means the image has to have equal shaped edges.

是否有iOS 4方式调整图像大小与iOS 5的 resizableImageWithCapInsets 方法或其他方法相同？ / p>

Is there an iOS 4 way of resizing the image the same as iOS 5's resizableImageWithCapInsets method, or another way of doing this?

推荐答案

你的假设是错误的：

在iOS 5之前，唯一类似的方法是stretchableImageWithLeftCapWidth：topCapHeight但你只能指定顶部和左侧插图，这意味着图像必须具有相同的形状边缘。

上限计算如下 - 我将单步执行左上限，但同样的原则适用于上限。

The caps are figured out as follows - I'll step through the left cap, but the same principle applies to the top cap.

假设您的图片宽度为20px。

Say your image is 20px wide.

• 左帽宽度 - 这是左侧的部分无法拉伸的图像。在 stretchableImage 方法中，为此发送值为10。


• 可伸展部分 - 假设宽度为一个像素，所以它将是11列中的像素，因为想要更好的描述


• 这意味着你的图像的剩余9px有隐含的右上限 - 这也不是扭曲。

• Left cap width - this is the part on the left hand side of the image that cannot be stretched. In the stretchableImage method you send a value of 10 for this.
• Stretchable part - this is assumed to be one pixel in width, so it will be the pixels in column "11", for want of a better description
• This means there is an implied right cap of the remaining 9px of your image - this will also not be distorted.

这取自 documentation

leftCapWidth

leftCapWidth

结束大写指定图像拉伸时不应调整大小的部分。该技术用于实现按钮和其他可调整大小的基于图像的界面元素。当调整带有端盖的按钮时，调整大小仅发生在按钮的中间，在端盖之间的区域中。端盖本身保持其原始尺寸和外观。

End caps specify the portion of an image that should not be resized when an image is stretched. This technique is used to implement buttons and other resizable image-based interface elements. When a button with end caps is resized, the resizing occurs only in the middle of the button, in the region between the end caps. The end caps themselves keep their original size and appearance.

此属性指定左端盖的大小。假设中间（可伸展）部分是1个像素宽。因此，通过将左端盖和中间部分的大小相加，然后从图像的宽度中减去该值来计算右端盖：

This property specifies the size of the left end cap. The middle (stretchable) portion is assumed to be 1 pixel wide. The right end cap is therefore computed by adding the size of the left end cap and the middle portion together and then subtracting that value from the width of the image:

rightCapWidth = image.size.width - （image.leftCapWidth + 1）;

这篇关于在保留角落的同时拉伸UIImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！