AspectFill VS. AspectFit

从去年10月进入公司,到现在差不多忙碌了3个月,期间几乎所有精力和时间都花在了公司的项目上,有很多工作学习的心得一直没有总结,趁周末无事就来使这写一写。

除了刚进公司的那一个月是做一些修修补补的工作,后面的时间直接就在项目里大刀阔斧的搞改造,大概用了不到一个月的时间完成一个新的核心功能,当然是多亏了安卓版的前车之鉴,进度来的比较快,那段时间总体来说就是跟CoreGrahics 打交道,玩弄动画和affineTransform ,然后就是移植opencv的代码,很无脑的移植而已。这里唯一值得一提的是搞清楚了 AspectFill 和 AspectFit 是怎么回事。

AspectFill VS. AspectFit

  如果跟图片打过交道,这两个概念几乎是最常见的,其实也不仅限于图片,这个概念涉及到所有内容和容器的关系。通常,如果我们要把一个固定大小的内容,比如图片放到一个固定大小的容器里,但是这个容器的宽高比例和图片的不一样的时候,我们不能简单粗暴的直接把图片的宽高设置成和容器的一样,这样图片会被挤压而失真。所以就需要按比例来缩放图片,使其既保证真实的比例,又能塞进给定的容器。但是如何缩放就是个问题:

  1. 容器和图片的比例一样,这个好办,只需要按照比例缩放就行了,比如缩小3倍,newWidth = width / 3; newHeight = height /3
  2. 容器和图片比例不一样,问题来了。

假设容器宽和高分别是H, W;图片宽高分别是h, w。图片和容器比例不一样可能带来这个问题 h / H = 3; w / W = 2。因为要按比例,所以我们只能从缩小3倍和缩小2倍中选一个来缩放。

如果我们选择缩3 倍,那么新图片的高度刚好和容器契合,但是宽度本来只需缩小2倍就够了,但是我们缩了3倍,于是新图片在容器里的宽度就不能填满而出现了留白,这样的缩放方式就是AspectFit 因为他取了最大的缩放值从而保证整张图片都能完整的放进容器(这就是Fit),代价是不能充满容器。

对于AspectFill 当然就是与Fit 相反,其目的是“Fill” 即保证充满容器。所以选择两个缩放值中较小的那个,接上例,因为选择缩小2倍,所以宽度刚好契合容器,但是高度因为只缩了2倍所以导致一部分图片内容被截在了容器外面。

Conclusion

  AspectFill   用途:保证图片充满整个容器,方式:选取宽高缩放值里较小的值来缩放,代价:一部分图片内容被截断。

  AspectFit 用途:保证图片完整地装进容器,方式:选取宽高缩放值里较大的值来缩放,代价:容器无法装满,出现留白。

To Be Continued....

时间: 2024-08-24 03:25:09

AspectFill VS. AspectFit的相关文章

IOS开发 常用知识点

1获取系统语言设置      NSUserDefaults *userDefault = [NSUserDefaults standardUserDefaults];      NSArray *languages = [userDefault objectForKey:@"AppleLanguages"];      NSString *preferredLang = [languages objectAtIndex:0]; 2 缓存路径下文件大小 - (unsigned long 

ios基础知识

1 1获取系统语言设置 2 3 NSUserDefaults *userDefault = [NSUserDefaults standardUserDefaults]; 4 5 NSArray *languages = [userDefault objectForKey:@"AppleLanguages"]; 6 7 NSString *preferredLang = [languages objectAtIndex:0]; 8 9 2 10 11 缓存路径下文件大小 12 13 14

滑动图片自适应image组件中aspectFill

<!--html--> <view class="videoBox"> <view class="videoBox-text"> <image src="https://xcx.hy720.com/wtt/videobtn.png"></image> <text>美食视频</text> <view>更多 ></view> </v

微信小程序------媒体组件(视频,音乐,图片)

今天主要是简单的讲一下小程序当中的媒体组件,媒体组件包括:视频,音乐,图片等. 先来看看效果图: 1:图片Image <!-- scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 widthFix:宽度不变,高度自动变化,保持原图宽高比不变 aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来. 也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取. aspectFit: 保持纵横比缩放图片,使图片的长边能完全显示出来.

[课堂笔记]斯坦福大学公开课:IOS 7应用开发 lecture7

1.One is CGFloat.It’s a floating point number.All floating point numbers that have to do with drawing on the screen or getting touch events or whatever are CGFloats.This might be a double.It might be just a regular floating point number.Not only usin

(7/18)重学Standford_iOS7开发_视图、绘制、手势识别_课程笔记

第七课: 1.View 一般来说,视图是一个构造块,代表屏幕上一块矩形区域,定义了一个坐标空间,并在其中绘制及添加触控事件等. ①视图的层级关系 一个视图只能有一个父视图,可以有多个子视图 1 - (void)addSubview:(UIView *)aView; // 父视图添加子视图 2 - (void)removeFromSuperview; // 子视图从父视图移除自己 ②UIWindow UIView的顶级视图:一般情况下,iOS应用程序中只有一个UIWindow,指当前显示的屏幕内容

iOS开发拓展篇—音频处理(音乐播放器6)

iOS开发拓展篇—音频处理(音乐播放器6) 一.图片处理 说明: Aspect表示按照原来的宽高比进行缩放. Aspectfit表示按照原来的宽高比缩放,要求看到全部图片,后果是不能完全覆盖窗口,会留有空白. Aspectfill表示按照原来的宽高比缩放,但只能看到部分图片.引发的问题:可能会有一部分超出屏幕. 所以,如果选择了Aspectfill模式,那么需要剪切超出的图片,在storyboard中也可以进行设置. 下面的两种设置是等效的. (1)在storyboard中进行设置 (2)使用代

Xamarin.Forms学习之位图(一)

在开始我的分享之前呢,让我先问下我的问题: 1.最近更新了Xamarin 4.1.1.3,我想问下版本更新信息在哪里看? 2.更新后我新建的项目没有UWP项目了(虽然没有用过,但是我想确认是4.1.1.3移除了还是我自身的问题),其实我觉得移除了也好,UWP就用UWP写最好了! 3.我的模拟器无法使用,是我安装的问题还是说有其他的设置? 再吐个槽: 1.Xamarin.Froms早已经更新到了2.3了,但是vs的模板一直没更新(还是说可以其他设置更新?还是说2.3不稳定?),导致新建的项目的Fr

PatentTips - Sprite Graphics Rendering System

BACKGROUND This disclosure relates generally to the field of computer graphics. More particularly, but not by way of limitation, it relates to technique for manipulating sprites in a rendering system for use with a graphics processor unit (GPU). A sp