Qt在控件中只显示图片指定大小的部分

一、显示图片指定大小的部分

有些控件，如QLabel、QWidget中需要只显示图片的一部分内容。此时有两种方式：

• 一种方法是将需要的图片用工具进行裁剪之后再进行显示，但是该方法会让有透明度的图片在编辑裁剪之后丢失透明度，且会修改原图片，因此不是很适用。
• 另一种更好的方式是只显示原图片指定大小的内容，而不会改变原图片的尺寸等内容。具体方式是：根据需要只取其中一个指定大小的矩形区域。参数为矩形区域到各边的距离，顺序是：上、右、下、左

1、在QLabel和QWidget控件中显示图片指定部分内容

1. UI布局中用来显示图片的尺寸为 600x800 px，图片的具体尺寸为 650x861 px。左边控件用来显示原图；右侧图片用来显示图片指定大小位置的内容，此时只显示图片上 600x800 px的内容。

2. 定义图片 IMG_01 为原图；IMG_02为要显示原图上指定区域的部分，其后面的参数意义及代码如下：

   • 41：为待显示图片区域上边到原图上边的距离为$41$像素
   • 10：为待显示图片区域右边到原图右边的距离为$10$像素
   • 20：为待显示图片区域下边到原图下边距离为$20$像素
   • 40：为待显示图片区域左边到原图左边距离为$40$像素

#define IMG_01  "QWidget {border-image: url(:/Pr02_ShowImage/Resources/Image/img01.jpg);}"
#define IMG_02  "QLabel {border-image: url(:/Pr02_ShowImage/Resources/Image/img01.jpg) 41 10 20 40;}"

ui.widgetLeft->setStyleSheet(IMG_01);
ui.labelRight->setStyleSheet(IMG_02);

注意：如果属性在{}中，则前面要加对应的对象名，表明是什么类型的控件(如上面代码所示)。否则直接以属性作为字符串的内容，而不加其它限制，如("border-image: url(:/Pr02_ShowImage/Resources/Image/img01.jpg);"作为setStyleSheet()的参数)。

3. 运行结果如下
   

右边的图片为指定原图的一部分，如下图红色虚线所示的部分

2、添加透明度等样式

有些控件需要被指定为透明的样式，此时通过设置background即可，如设置widget背景透明：
ui.widget->setStyleSheet("background:transparent;");

二、以有边缘阴影图作背景的布局

1、有些UI需要将一张带有边缘阴影的图片来作为背景，此时有两种实现方式

• 一种是直接将其作为独立大控件的背景，此时没有设置布局，在拉伸或其它条件变化时，不会自动调整。
• 另一种是将其设置在一个布局之中，将该图片分成 $5$ 个部分，即：中间、上、下、左、右等5个部分。

2、图片解析

1. 原图如下，为 1350 X 650 px，边框阴影宽度都为 37 px
   

2. 分解成5部分如下图
   

3. 对应5部分在原图上应选取的尺寸如下(按：上、右、下、左)

   • Center：37, 37, 37, 37
   • Left： 0, 1313, 0, 0
   • Right： 0, 0, 0, 1313
   • Top： 0, 37, 613, 37
   • Bottom： 613, 37, 0, 37

3、对应UI布局

4、代码如下

// 原图尺寸
#define IMG_ORANGE  "border-image: url(:/Pr02_ShowImage/Resources/Image/panel.png);"
// 选取图片左边大小
#define IMG_LEFT  "border-image: url(:/Pr02_ShowImage/Resources/Image/panel.png) 0 1313 0 0;"
// 选取图片右边大小
#define IMG_RIGHT  "border-image: url(:/Pr02_ShowImage/Resources/Image/panel.png) 0 0 0 1313;"
// 选取图片上边大小
#define IMG_TOP  "border-image: url(:/Pr02_ShowImage/Resources/Image/panel.png) 0 37 613 37;"
// 选取图片底部大小
#define IMG_BOTTOM  "border-image: url(:/Pr02_ShowImage/Resources/Image/panel.png) 613 37 0 37;"
// 选取图片中间大小
#define IMG_CENTER  "border-image: url(:/Pr02_ShowImage/Resources/Image/panel.png) 37 37 37 37;"


    ui.setupUi(this);

    ui.widgetCenter->setStyleSheet(IMG_CENTER);
    ui.widgetLeft->setStyleSheet(IMG_LEFT);
    ui.widgetRight->setStyleSheet(IMG_RIGHT);
    ui.widgetTop->setStyleSheet(IMG_TOP);
    ui.widgetBottom->setStyleSheet(IMG_BOTTOM);

    ui.horizontalSpacer->changeSize(25, 0, QSizePolicy::Fixed, QSizePolicy::Minimum);
    ui.horizontalSpacer_2->changeSize(25, 0, QSizePolicy::Fixed, QSizePolicy::Minimum);

5、运行结果如下图