图像与界面(或控件)的自适应(fit window)

一张图片的分辨率(长和宽)不确定，一个界面(或者控件)的大小(同样指长和宽)不确定。
那么此时把这张图片放入界面(或控件)中，如何形成类似于下面三种情况呢(黑框为图像，红框为界面)？

其实只要计算出长宽比即可实现。
假设界面坐标系左上角为0,0点，引入几个变量名称
   * Wc : 控件横轴宽度
   * Hc : 控件纵轴高度
   * Wc/Hc=Ctrl_AspectRatio : 控件长宽比
   * Wi : 图像横轴分辨率
   * Hi : 图像纵轴分辨率
   * Wi/Hi=Img_AspectRatio : 图像长宽比
   * x,y,w及h代表Rect的左上点x,y坐标及横纵长度

当 Ctrl_AspectRatio >= Img_AspectRatio 时，控件Wc/Hc比大于等于图像Wi/Hi比。
h = Hc, Hi = Hc, Wi/Hi = Img_AspectRatio = Wi/Hc, 即Wi = Hc * (Wi/Hi) = Hc * Img_AspectRatio
此时 x = rect.left + (Wc - Wi)/2, y = rect.top, w = Wi = Hc* (Wi/Hi), h = Hc.

       x = rect.left + (int)((double)Wc - (double)Hc * Img_AspectRatio)/2.0;
       y = rect.top;
       w = (int)((double)Hc * Img_AspectRatio);
       h = Hc;

rect.left = x;
rect.right = x + w;

当 Ctrl_AspectRatio < Img_AspectRatio 时，控件Wc/Hc比小于图像Wi/Hi比。
w = Wc(宽度等于控件横轴宽度), Wi = Wc，Wi/Hi = Img_AspectRatio = Wc/Hi, 即Hi = Wc / Img_AspectRatio
此时 x = rect.left， y = rect.top + (Hc - Hi)/2 , w = Wc, h = Hi = Wc / (Wc/Hc)

       x = rect.left;
       y = rect.top + (int)((double)Hc - (double)Wc / Img_AspectRatio) / 2.0;
       w = Wc;
       h = ((double)Wc / Img_AspectRatio);

rect.top = y;
rect.bottom = y + h;

以上初步实现fit window.. 暂时不确定是否有bug..

图像与界面(或控件)的自适应(fit window)

相关推荐