QML_图像image

QML_图像image

**概述：**在qml的常用元素中，image图像元素绝对算得上是比较常用的了。image用于展示图片，使用source属性可以使用URL指定一张图片。image可以展示Qt支持的任何标准图像格式，包括常见的位图格式比如说png、jpg等和矢量图形格式如svg格式。当然，image只能显示静态图片，如果你用的是gif图，那image只能将gif的第一帧显示出来。
image在显示图片时，如果未指定width和height属性，则Image将自动使用加载的图像的大小。默认情况下，指定的对象的宽度和高度会使图像缩放。可以通过设置fillMode属性来指定填充模式，我们讲完属性之后会给大家例程来参考。

属性:
currentFrame: 保存当前可见帧，默认值为0，如果图像包含多个帧，则可以将其设置为介于0和frameCount-1之间的数字来显示不同的帧（Qt5.14引入的）
frameCount: 保存图像中的帧数。大多数图像只有一帧（Qt5.14引入的）
horizontalAlignment/verticalAlignment：设置图像的水平和垂直对齐方式
paintedHeight/paintedHeight：(只读)，获取实际绘制的图像的大小
asynchronous : 指定在单独的线程中异步加载本地文件系统上的图像。默认值为false
autoTransform : 指定图像是否自动转换图像
cache : 指定图像是否缓存。默认为true
mipmap : 指定图像在缩放或转换时是否使用mipmap过滤
mirror : 指定图像水平翻转
progress : (只读)，获取图像加载的进度
smooth : 指定图像在缩放和变换时是否平滑过滤
source : 需要加载的图像路径
sourceClipRect : 保存要加载的图像的矩形区域（Qt5.15引入的）
sourceSize : 指定了图像在内存中的大小
status : 获取加载图像的状态
fillMode : 定义当源图像大小和ui对象大小不同时将发生的情况
–>>Image.Stretch - 图像自动缩放至ui对象大小
–>>Image.PreserveAspectFit - 图像按照比例缩放，不裁剪
–>>Image.PreserveAspectCrop - 图像按照比例缩放填充，必要时裁剪
–>>Image.Tile - 图像水平和垂直方向平铺
–>>Image.TileVertically - 图像水平拉伸并垂直平铺
–>> Image.TileHorizontally - 图像垂直拉伸并水平平铺
–>>Image.Pad - 图像不变形

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    Image {
            id: image
            anchors.centerIn: parent
            source: "img/bigsnow.png"  //加载资源文件路径
        }
}

属性部分给大家说会展示一下填充模式fillMode的例程

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    Column{
        anchors.centerIn: parent
        spacing: 10

        Image {
            height: 50
            width: 50
            source: "img/smallsnow.png"
            fillMode: Image.Pad  //图像的填充方式-不变形
        }

        Image {
            height: 50
            width: 20
            source: "img/smallsnow.png"
            fillMode: Image.PreserveAspectFit  //图像的填充方式-按照比例缩放填充，不裁剪
        }

        Image {
            height: 50
            width: 50
            source: "img/smallsnow.png"
            fillMode: Image.PreserveAspectCrop  //图像的填充方式-按照比例缩放填充，必要时裁剪
        }

        Image {
             width: 100
             height: 100
             source: "img/smallsnow.png"
             fillMode: Image.Tile //图像的填充方式-水平垂直复制
        }

        Image {
             width: 100
             height: 100
             source: "img/smallsnow.png"
             fillMode: Image.TileVertically //图像的填充方式-水平填充，垂直复制
        }

        Image {
             width: 200
             height: 200
             source: "img/smallsnow.png"
             fillMode: Image.TileHorizontally  //图像的填充方式-垂直填充，水平复制
        }
    }
}

设置mirror属性一个为true,另一个为false，则可以实现水平或者垂直的镜像翻转

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")
    
    Row{
        anchors.centerIn: parent
        
        Image {
            source: "img/smallsnow.png"
            mirror: flase
        }
        
        Image {
            source: "img/smallsnow.png"
            mirror: true
        }
    }
}

除了本地导入的图片，image还可以显示网络图片，用法也十分简单，只需要将图片的网址链接写在source中即可

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    Image {
            id: image
            asynchronous: true
            cache: false
            anchors.fill: parent
            fillMode: Image.PreserveAspectCrop
            source: "http://seopic.699pic.com/photo/50046/5289.jpg_wh1200.jpg"
        }
}

裁剪头像，一般我们的头像都是圆形的，那么怎么在树莓派中裁剪头像图片呢？我们需要导入图形效果模块。
import QtGraphicalEffects 1.0
图形效果模块包含20多种效果作为单独的QML类型提供。这些效果涵盖了功能区域，例如混合，蒙版，模糊，着色等等。要使用效果，只需在QML场景中添加特定的效果声明并配置效果属性即可。裁剪圆形头像用到的效果是OpacityMask，它是用一个项目去掩盖另一个项目。

Window {
    visible: true
    width: 480
    height: 480
    title: qsTr("Image")
    color: "lightyellow"

    Image {
            id: cat
            anchors.centerIn: parent
            source: "img/cat.png"
            smooth: true
            visible: false
        }

        Rectangle {
            id: rect
            width: parent.width
            height: parent.height
            radius: height
            color: "red"
            visible: false
        }

        OpacityMask {
            anchors.fill: cat
            source: cat
            maskSource: rect
        }
}