指定图像的上限插图
您可以通过使用来设置拉伸细节UIImage
method .resizableImageWithCapInsets(_:UIEdgeInsets, resizingMode: UIImageResizingMode)
.
宣言
func resizableImageWithCapInsets(capInsets: UIEdgeInsets, resizingMode: UIImageResizingMode) -> UIImage
描述
创建并返回具有指定上限插图的新图像对象
和选项。
具有指定上限插图和调整大小模式的新图像对象。
参数
capInsets
:用于上限插入的值。
resizingMode
:图像内部的模式
调整大小。
示例:使用指定的帽插入进行自定义拉伸
举个例子,让我们尝试以编程方式沿其宽度拉伸我的(当前)个人资料图片,恰好在我的右腿(从观看角度来看左侧),并将图像的其余部分保留为原始图像比例。这类似于将某些按钮纹理的宽度拉伸到其内容的大小。
首先,让我们加载原始图像foo.png
as an UIImage
object:
let foo = UIImage(named: "foo.png") // 328 x 328
现在,使用.resizableImageWithCapInsets(_:UIEdgeInsets, resizingMode: UIImageResizingMode)
,我们将定义另一个UIImage
例如,使用指定的上限插入(到我的右腿中间),并将调整大小模式设置为.Stretch
:
/* middle of right leg at ~ |-> 0.48: LEG :0.52 <-| along
image width (for width normalized to 1.0) */
let fooWidth = foo?.size.width ?? 0
let leftCapInset = 0.48*fooWidth
let rightCapInset = fooWidth-leftCapInset // = 0.52*fooWidth
let bar = UIEdgeInsets(top: 0, left: leftCapInset, bottom: 0, right: rightCapInset)
let fooWithInsets = foo?.resizableImageWithCapInsets(bar, resizingMode: .Stretch) ?? UIImage()
注意0.48
上面的文字对应于您输入的值X
在界面生成器中,如上面问题中的图片所示(或如所描述的详细信息请参阅 Matt 提供的链接 http://macoscope.com/blog/stretchable-images-using-interface-builder/).
继续,我们最终将带有帽子插图的图像放置在UIImageView
,并让该图像视图的宽度大于图像的宽度
/* put 'fooWithInsets' in an imageView.
as per default, frame will cover 'foo.png' size */
let imageView = UIImageView(image: fooWithInsets)
/* expand frame width, 328 -> 600 */
imageView.frame = CGRect(x: 0, y: 0, width: 600, height: 328)
生成的视图按指定拉伸原始图像,产生不成比例的长腿。
现在,只要图像的框架有1:1
width:height
比例(328:328
),拉伸将是均匀的,就好像只将任何图像适合更小/更大的框架。对于任何具有width
值大于height
(a:1
, 比率,a>1
),腿部将开始不成比例地伸展。
扩展以匹配X
, width
, Y
and height
Interface Builder 中的拉伸属性
最后,为了彻底地实际回答你的问题(我们实际上只是在上面隐式地完成了这个问题),我们可以利用X
, width
, Y
and height
Interface Builder 中的拉伸属性马特提供的链接 http://macoscope.com/blog/stretchable-images-using-interface-builder/,构建我们自己的UIImage
扩展使用(显然)相同的属性,转换为扩展中的上限插入:
extension UIImage {
func resizableImageWithStretchingProperties(
X X: CGFloat, width widthProportion: CGFloat,
Y: CGFloat, height heightProportion: CGFloat) -> UIImage {
let selfWidth = self.size.width
let selfHeight = self.size.height
// insets along width
let leftCapInset = X*selfWidth*(1-widthProportion)
let rightCapInset = (1-X)*selfWidth*(1-widthProportion)
// insets along height
let topCapInset = Y*selfHeight*(1-heightProportion)
let bottomCapInset = (1-Y)*selfHeight*(1-heightProportion)
return self.resizableImageWithCapInsets(
UIEdgeInsets(top: topCapInset, left: leftCapInset,
bottom: bottomCapInset, right: rightCapInset),
resizingMode: .Stretch)
}
}
使用这个扩展,我们可以实现相同的水平拉伸foo.png
如上所述,如下:
let foo = UIImage(named: "foo.png") // 328 x 328
let fooWithInsets = foo?.resizableImageWithStretchingProperties(
X: 0.48, width: 0, Y: 0, height: 0) ?? UIImage()
let imageView = UIImageView(image: fooWithInsets)
imageView.frame = CGRect(x: 0, y: 0, width: 600, height: 328)
扩展我们的示例:拉伸宽度和高度
现在,假设我们要像上面那样拉伸我的右腿(沿着宽度),但除此之外还要沿着图像的高度拉伸我的手和左腿。我们通过使用来控制这个Y
上面扩展中的属性:
let foo = UIImage(named: "foo.png") // 328 x 328
let fooWithInsets = foo?.resizableImageWithStretchingProperties(
X: 0.48, width: 0, Y: 0.45, height: 0) ?? UIImage()
let imageView = UIImageView(image: fooWithInsets)
imageView.frame = CGRect(x: 0, y: 0, width: 500, height: 500)
产生以下拉伸图像:
该扩展显然允许更通用地使用 cap 插入拉伸(与使用 Interface Builder 的多功能性相当),但请注意,当前形式的扩展不包括任何用户输入验证,因此由调用者决定在正确的范围内使用参数。
最后,关于任何涉及图像及其操作的相关注释坐标:
Note:图像坐标轴x
(宽度)和y
(高度)运行为
x (width): left to right (as expected)
y (height): top to bottom (don't miss this!)