在保留角的同时拉伸 UIImage

问题描述

我正在尝试在保留边缘的同时拉伸导航箭头图像，以便中间拉伸而末端固定.

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

这是我要拉伸的图像:

以下 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 5 的 resizableImageWithCapInsets 方法相同的 iOS 4 调整图像大小的方法，或其他方法?

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，但您只能指定顶部和左侧插入 这意味着图像必须具有相同形状的边缘.

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.

帽子的计算方法如下 - 我将逐步介绍左边的帽子，但同样的原则也适用于顶帽.

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"列中的像素，因为需要更好的描述
• 这意味着您的图片剩余 9 像素有一个隐含的右上限 - 这也不会失真.

• 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.

这取自 文档

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！