元件和背景变形问题

问题描述

如上图箭头所指，电视屏幕两边是黑的。原因就是电视屏幕的长宽比与影片图像的长宽比不一致，为了保证影片图像不失真(变形)，也就保证了图像的长宽比，因此两边留黑了。

组态画面同样存在这个问题。对于触摸屏，可以将组态的画面尺寸设置为与触摸屏的尺寸一致，这样在触摸屏上就刚好全屏、不变形，如下：

但在远程电脑和远程手机上，这个方法就不可行了，因为远程电脑和远程手机的尺寸千奇百怪、五花八门，没办法在组态时按某一固定的尺寸进行组态。针对远程电脑和远程手机上的显示，有以下3种方案，各有利弊。

方案1、背景图变形，元件变形，设置如下：

此种方案的特点是：

优点：背景图和元件都能按照组态时的样子铺满整个屏幕，元件与背景图可以对齐(严丝合缝)

缺点：背景图和元件都会变形，正方形可能变成了长方形

方案2、背景图不变形，元件不变形，设置如下：

此种方案的特点是：

优点：背景图和元件都能显示正常、不变形，元件与背景图可以对齐(严丝合缝)

缺点：显示出来的画面，两端会留空白(背景色)。如果将画面的背景色设置为与背景图相近，则可弥补该缺点

方案3、折衷上述两个方案，背景图全屏，元件不变形，设置如下：

此种方案的特点是：

优点：背景图全屏显示、元件不变形

缺点：元件和背景图对不齐了，比如背景图上有个”阀门“，再做一个透明的“按钮”元件盖在上面，最后会发现显示错位了。

综上：

如果元件需要与背景图对齐，则推荐方案2；

如果元件不需要与背景图对齐，则推荐方案3；

如果不关心显示变形问题，则推荐方案1