resizableImageWithCapInsets认知和对@2x图片的理解

1、resizableImageWithCapInsets


在很多编程语言中都有resizable image这样的概念,比如android中的NinePatch graphic ,css3中的border image,微软的Nine-Grid Rendering,还有就是iOS中UIImage的resizable image。

resizableImageWithCapInsets认知和对@2x图片的理解

可以将resizable image分成9部分,通过它生成大图片的时候遵循以下规则:四个角(1,3,7,9)保持不变,上下(2,8)进行横向平铺或拉伸,左右(4,6)进行纵向的平铺或拉伸,中央(5)则是双向平铺或拉伸。

resizableImageWithCapInsets认知和对@2x图片的理解
此9宫格的模型可以使用cap insets来进行描述,cap insets有四个参数,top,left,bottom,right,分别描述9宫格上左下右的大小。

capimage.py是一个使用python的PIL库写的脚本,用于将一个普通的图片去除重复部分生成一个可伸缩的图片(resizable image),这样使得图片资源的使用更加灵活和节省空间。cap image支持苹果格式的高清图片(命名格式为[email protected]),脚本会智能的进行检查,上面所提及的capinsets的单位是point而非pixel,在高清的情况下1point等于2pixel。

引用:https://github.com/kejinlu/capimage

2、@2x图片和非retina图片

在retina屏幕下程序会自动寻找@2x图片,如果没有后缀为@2x图片,就会自动拉伸非@2x图片,所以尽量将你的图片都带上@2x后缀,这样就不会造成在使用resizableImageWithCapInsets时因无法找到@2x图片对原图进行拉伸进而再使用resizableImageWithCapInsets进行平铺时造成图片变形问题。


你可能感兴趣的:(resizableImageWithCapInsets认知和对@2x图片的理解)