找回密码
 立即注册
  • QQ空间
  • 回复
  • 收藏

第12篇 Qt Quick入门教程之图形动画(二)图片和边界图片

admin 2019-11-29 07:12 276人围观 Qt相关



导语


在界面编程中经常会使用图片,前面章节中我们已经使用过图片类型,这一篇将具体来讲一下图片使用的相关内容,其中还会涉及到边界图片的知识。

下面我们开始。

图片


在Qt Quick中的Image类型用来显示一张图片。要显示图片,只需要通过source属性指定图片的路径。例如:
Window {
    visible: true
    width: 200 ; height: 200

    Image {
        source: "qt-logo.png"
    }
}

这里将图片放到了资源文件中,所以可以直接使用。效果如下图所示。



但是一般情况下,我们还会指定图片的显示大小,比如,这里设置为整个窗口的大小:
Image {
    anchors.fill: parent
    source: "qt-logo.png"
}

效果如下图所示。



可以看到,设置Image的大小,图片的显示大小也会随之改变。默认情况下图片会被拉伸。如果要更改默认的显示效果,那么可以使用fillMode属性来设置填充模式,常用的有:

  • Image.Stretch - 将图片进行拉伸来适应指定的大小;

  • Image.PreserveAspectFit - 图片保持宽高比进行缩放来填充,不会进行裁剪;

  • Image.PreserveAspectCrop - 图片保持宽高比进行缩放来填充,必要时进行裁剪;

  • Image.Tile - 水平和垂直方向均进行平铺;

  • Image.TileVertically - 水平方向拉伸,垂直方向平铺;

  • Image.TileHorizontally - 水平方向平铺,垂直方向拉伸。

例如:
Image {
    anchors.fill: parent
    source: "qt-logo.png"

    fillMode: Image.Tile
}

效果如下图所示。



其他选项的效果可以参照下图。



有的读者可能会说,当图片平铺时,图片是在中间,然后向四周平铺,怎么能让其从左上角开始呢?其实只需设置对齐方式即可,例如:
Image {
    anchors.fill: parent
    source: "qt-logo.png"

    fillMode: Image.Tile
    horizontalAlignment: Image.AlignLeft
    verticalAlignment: Image.AlignTop
}

效果如下图所示。



除了使用本地的图片,Image还可以直接指定网络图片,例如:
Window {
    visible: true
    width: 600 ; height: 400

    Image {
        x: 50; y: 50
        source: "http://qter-images.qter.org/homepage/test.png"
        sourceSize.width: 200; sourceSize.height: 200
    }

    Image {
        x: 200; y: 50
        source: "http://qter-images.qter.org/homepage/test.png"
        sourceSize.width: 200; sourceSize.height: 200
        mirror: true
    }

    Image {
        x: 350; y: 50
        source: "http://qter-images.qter.org/homepage/test.png"
        width: 200; height: 200
    }
}

这里设置了3个Image,都使用了相同的网络图片,在第一个当中指定了sourceSize,它用来设置内存中保存的图片的原始大小,对于较大的图片,建议指定该属性;在第二个当中设置了mirror属性,可以实现图片水平翻转的镜面效果;在第三个当中,指定的是图片的显示大小。可以看到,当指定sourceSize时图片是保持宽高比进行缩放的。代码运行效果如下。



另外,对于初学者,建议以后在程序中尽可能使用PNG格式图片,因为Qt对PNG格式是原生支持的。

边界图片


在Qt Quick中还有一个特殊的图片类型BorderImage,从名字来看,它是一个边框图片类型,顾名思义,该类型可以将图片设置为边框,当然,了解了该类型的特性后,也可以实现其他一些效果。

BorderImage类型通过border属性将一个图片分为9部分,如下图所示:



这里的border是一个属性组,分为border.left、border.right、border.top和border.bottom,即上图中的左、右、上、下四条线,它们指定了从该线到相应图片边界的偏移像素。当图片缩放时,图中的9部分,会进行不同的操作,具体来说:

  • 四个角1、3、7、9不进行缩放;

  • 2和8会通过horizontalTileMode属性指定的方式进行缩放;

  • 4和6通过verticalTileMode属性指定的方式进行缩放;

  • 而中间的区域5会结合horizontalTileMode和verticalTileMode进行缩放。

这里的horizontalTileMode和verticalTileMode可取的值均为:BorderImage.Stretch、BorderImage.Repeat和BorderImage.Round。

下面通过一个例子来理解。
Window {
    visible: true
    width: 750; height: 350

    Image {
        x:10; y:100;
        source: "colors.png"
    }

    BorderImage {
          x:150; y:100; width: 180; height: 180
          border { left: 30; top: 30; right: 30; bottom: 30 }
          horizontalTileMode: BorderImage.Stretch
          verticalTileMode: BorderImage.Stretch
          source: "colors.png"
      }

    BorderImage {
          x:350; y:100; width: 165; height: 180
          border { left: 30; top: 30; right: 30; bottom: 30 }
          horizontalTileMode: BorderImage.Repeat
          verticalTileMode: BorderImage.Stretch
          source: "colors.png"
      }

    BorderImage {
          x:550; y:100; width: 165; height: 180
          border { left: 30; top: 30; right: 30; bottom: 30 }
          horizontalTileMode: BorderImage.Round
          verticalTileMode: BorderImage.Repeat
          source: "colors.png"
      }
}

这里第一个显示的是原始图片,后面是边界图片的不同效果,如下图所示,大家自己体会下。



使用边界图片可以实现的效果有很多,比如实现Item项目的阴影,来看一个例子:
Window {
    visible: true
    width: 300; height: 300

    Rectangle {
        anchors.centerIn: parent; width: 250; height: 250

        BorderImage {
            anchors.fill: parent
            anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
            border { left: 10; top: 10; right: 10; bottom: 10 }
            source: "shadow.png"
        }

        Rectangle { id: rectangle; anchors.fill: parent ; color: "lightsteelblue"}
    }
}

实现的效果如下图所示。



结语


在本篇中介绍了常用的Image和BorderImage类型,有的读者可能还需要显示动态图片,比如GIF图片,那么可以使用AnimatedImage类型,该类型也很简单,这里就不再具体讲解。



第11篇 Qt Quick入门教程之图形动画(一)颜色和渐变




----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:yafeilinux和他的朋友们,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

yafeilinux和他的朋友们微信公众号二维码

微信公众号

专注于Qt嵌入式Linux开发等。扫一扫立即关注。

Qt开源社区官方QQ群二维码

QQ交流群

欢迎加入QQ群大家庭,一起讨论学习!

我有话说......