完整视频教程(177M)云盘,提取码为hyz4

元件和背景变形问题

问题描述

image.png

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


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

image.png


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


方案1、背景图变形,元件变形,设置如下:

image.png

image.png

此种方案的特点是:

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

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


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

image.png

image.png

此种方案的特点是:

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

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


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

image.png

image.png

此种方案的特点是:

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

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



综上:


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


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


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