Qt Quick Image探秘：从底层原理到高级应用（二）-阿里云开发者社区

Qt Quick Image探秘：从底层原理到高级应用（一）https://developer.aliyun.com/article/1464160

五、Image类与其他Qt Quick元素的交互 (Interactions between Image and Other Qt Quick Elements)

在Qt Quick应用中，Image类通常需要与其他元素进行交互。本章将介绍如何将Image类与其他Qt Quick元素结合使用，实现更丰富的交互效果。

5.1 在ListView中显示图片 (Displaying Images in ListView)

在很多应用中，需要在列表中显示图片。本节将介绍如何在Qt Quick的ListView中使用Image类展示图片。

首先，我们需要定义一个代表列表项的Component，其中包含一个Image对象。然后，在ListView的delegate属性中使用这个Component。以下是一个简单的示例：

import QtQuick 2.15
Rectangle {
    width: 320
    height: 480
    Component {
        id: imageDelegate
        Item {
            width: parent.width
            height: imageItem.height + 10
            Image {
                id: imageItem
                anchors.horizontalCenter: parent.horizontalCenter
                source: modelData
            }
        }
    }
    ListView {
        anchors.fill: parent
        spacing: 10
        model: ["qrc:/images/pic1.png", "qrc:/images/pic2.png", "qrc:/images/pic3.png"]
        delegate: imageDelegate
    }
}

在这个示例中，我们首先定义了一个名为imageDelegate的Component，其中包含一个Image对象。然后，我们创建了一个ListView，并将其model属性设置为一个包含图片URL的数组。最后，我们将ListView的delegate属性设置为imageDelegate。

在这个示例中，ListView将显示三张图片，它们在列表中垂直排列。通过这种方式，您可以轻松地在ListView中展示多张图片。

在下一节中，我们将介绍如何在Qt Quick的Repeater中使用Image类。

5.2 在Repeater中显示图片 (Displaying Images in Repeater)

Qt Quick的Repeater元素允许您根据模型数据动态创建多个相同的UI元素。在本节中，我们将介绍如何在Repeater中使用Image类来显示图片。

首先，我们需要创建一个包含Image对象的Item。然后，在Repeater的delegate属性中使用这个Item。以下是一个简单的示例：

import QtQuick 2.15
Rectangle {
    width: 320
    height: 480
    Item {
        id: imageContainer
        anchors.fill: parent
        Repeater {
            id: imageRepeater
            model: ["qrc:/images/pic1.png", "qrc:/images/pic2.png", "qrc:/images/pic3.png"]
            delegate: Item {
                width: imageItem.width
                height: imageItem.height
                Image {
                    id: imageItem
                    x: (parent.width * (index % 3)) + 5
                    y: (parent.height * Math.floor(index / 3)) + 5
                    source: modelData
                }
            }
        }
    }
}

在这个示例中，我们首先创建了一个名为imageContainer的Item，并将其大小设置为与父元素相同。接着，我们在Item中创建了一个Repeater，并将其model属性设置为一个包含图片URL的数组。最后，我们将Repeater的delegate属性设置为一个包含Image对象的Item。

在这个示例中，Repeater将创建三个Image对象，它们在imageContainer中以网格形式排列。通过这种方式，您可以在Repeater中方便地显示多张图片。

在下一节中，我们将介绍如何在Qt Quick的动画中使用Image类。

5.3 在动画中使用图片 (Using Images in Animations)

Qt Quick提供了丰富的动画功能，使得开发者可以轻松地为应用添加动画效果。在本节中，我们将介绍如何在动画中使用Image类。

以下是一个简单的示例，演示如何将Image类与Qt Quick的动画功能结合使用，实现图片的平滑缩放和移动动画效果：

import QtQuick 2.15
Rectangle {
    width: 320
    height: 480
    color: "#FFFFFF"
    Image {
        id: imageItem
        source: "qrc:/images/pic1.png"
        anchors.centerIn: parent
        SequentialAnimation on scale {
            id: scaleAnimation
            loops: Animation.Infinite
            PropertyAnimation {
                from: 1
                to: 1.5
                duration: 1000
                easing.type: Easing.InOutQuad
            }
            PropertyAnimation {
                from: 1.5
                to: 1
                duration: 1000
                easing.type: Easing.InOutQuad
            }
        }
        SequentialAnimation on x {
            id: moveAnimation
            loops: Animation.Infinite
            PropertyAnimation {
                from: parent.width / 2 - width / 2
                to: parent.width - width
                duration: 2000
                easing.type: Easing.InOutQuad
            }
            PropertyAnimation {
                from: parent.width - width
                to: parent.width / 2 - width / 2
                duration: 2000
                easing.type: Easing.InOutQuad
            }
        }
    }
}

在这个示例中，我们首先创建了一个Image对象，并将其锚点设置为父元素的中心。接着，我们为Image对象创建了两个SequentialAnimation对象，分别用于缩放和移动动画。

我们使用PropertyAnimation来指定动画的起始值、结束值、持续时间以及缓动类型。通过设置SequentialAnimation的loops属性为Animation.Infinite，我们使得动画无限循环。

运行这个示例，图片将在屏幕上平滑地缩放并左右移动。

通过这种方式，您可以将Image类与Qt Quick的动画功能结合使用，为您的应用添加生动的视觉效果。

六、Image类的高级应用 (Advanced Applications of Image Class)

在本章节中，我们将探讨一些Image类的高级应用，包括图片遮罩、图片叠加和动态修改图片内容等。

6.1 图片遮罩 (Image Masking)

图片遮罩是一种图像处理技术，可以将一个图像的某些部分透明化，从而显示另一个图像的相应部分。在Qt Quick中，我们可以使用ShaderEffect元素来实现图片遮罩效果。

以下是一个简单的示例，演示如何使用ShaderEffect和Image类创建一个图片遮罩效果：

import QtQuick 2.15
Rectangle {
    width: 320
    height: 480
    Image {
        id: backgroundImage
        source: "qrc:/images/background.jpg"
        anchors.fill: parent
    }
    Image {
        id: maskImage
        source: "qrc:/images/mask.png"
        anchors.centerIn: parent
    }
    ShaderEffect {
        anchors.fill: maskImage
        property variant src: backgroundImage
        property variant mask: maskImage
        fragmentShader: "
            uniform sampler2D src;
            uniform sampler2D mask;
            varying highp vec2 qt_TexCoord0;
            void main(void) {
                highp vec4 srcColor = texture2D(src, qt_TexCoord0);
                highp vec4 maskColor = texture2D(mask, qt_TexCoord0);
                gl_FragColor = vec4(srcColor.rgb, srcColor.a * maskColor.r);
            }
        "
    }
}

在这个示例中，我们首先创建了两个Image对象，分别用于显示背景图片和遮罩图片。接着，我们创建了一个ShaderEffect对象，并将其大小设置为与遮罩图片相同。我们为ShaderEffect对象定义了两个属性：src和mask，分别表示背景图片和遮罩图片。

在ShaderEffect对象的fragmentShader属性中，我们编写了一个简单的GLSL片段着色器。这个着色器将遮罩图片的红色通道值用作背景图片的透明度值，从而实现遮罩效果。

运行这个示例，遮罩图片将覆盖在背景图片上，使得背景图片的部分区域透明化。

通过这种方式，您可以使用Image类和ShaderEffect元素在Qt Quick中实现图片遮罩效果。

6.2 图片叠加 (Image Overlay)

图片叠加是将多个图片合并在一起，从而创建一个具有各个图片特征的新图片。在Qt Quick中，我们可以使用ShaderEffect元素来实现图片叠加效果。

以下是一个简单的示例，演示如何使用ShaderEffect和Image类创建一个图片叠加效果：

import QtQuick 2.15
Rectangle {
    width: 320
    height: 480
    Image {
        id: baseImage
        source: "qrc:/images/base.jpg"
        anchors.centerIn: parent
    }
    Image {
        id: overlayImage
        source: "qrc:/images/overlay.png"
        visible: false
    }
    ShaderEffect {
        anchors.fill: baseImage
        property variant base: baseImage
        property variant overlay: overlayImage
        fragmentShader: "
            uniform sampler2D base;
            uniform sampler2D overlay;
            varying highp vec2 qt_TexCoord0;
            void main(void) {
                highp vec4 baseColor = texture2D(base, qt_TexCoord0);
                highp vec4 overlayColor = texture2D(overlay, qt_TexCoord0);
                gl_FragColor = vec4(baseColor.rgb + overlayColor.rgb, baseColor.a);
            }
        "
    }
}

在这个示例中，我们首先创建了两个Image对象，分别用于显示基础图片和叠加图片。我们将叠加图片的visible属性设置为false，使其不可见。接着，我们创建了一个ShaderEffect对象，并将其大小设置为与基础图片相同。我们为ShaderEffect对象定义了两个属性：base和overlay，分别表示基础图片和叠加图片。

在ShaderEffect对象的fragmentShader属性中，我们编写了一个简单的GLSL片段着色器。这个着色器将叠加图片的RGB值与基础图片的RGB值相加，从而实现图片叠加效果。

运行这个示例，叠加图片将与基础图片叠加在一起，形成一个新的图片。

通过这种方式，您可以使用Image类和ShaderEffect元素在Qt Quick中实现图片叠加效果。

6.3 动态修改图片内容 (Dynamically Modifying Image Content)

在某些情况下，您可能需要根据应用程序的状态或用户交互动态地修改图片内容。在Qt Quick中，我们可以使用Canvas元素结合Image类来实现这一需求。

以下是一个简单的示例，演示如何使用Canvas和Image类动态修改图片内容：

import QtQuick 2.15
Rectangle {
    width: 320
    height: 480
    Image {
        id: sourceImage
        source: "qrc:/images/original.png"
        visible: false
    }
    Canvas {
        id: canvas
        anchors.fill: sourceImage
        anchors.centerIn: parent
        onPaint: {
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height);
            ctx.drawImage(sourceImage, 0, 0, width, height);
            ctx.fillStyle = Qt.rgba(1, 0, 0, 0.5);
            ctx.fillRect(0, 0, width, height);
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: canvas.requestPaint()
    }
}

在这个示例中，我们首先创建了一个Image对象，用于加载原始图片。接着，我们创建了一个Canvas对象，并将其大小设置为与原始图片相同。我们为Canvas对象定义了一个onPaint事件处理函数，该函数首先绘制原始图片，然后在图片上绘制一个半透明的红色矩形。

我们还创建了一个MouseArea对象，并将其大小设置为与父元素相同。当用户点击屏幕时，MouseArea对象的onClicked事件处理函数将调用canvas.requestPaint()，触发Canvas对象的重新绘制。

运行这个示例，您将看到原始图片被半透明的红色矩形覆盖。每次点击屏幕时，Canvas对象都会重新绘制图片和矩形。

通过这种方式，您可以使用Canvas元素结合Image类在Qt Quick中动态修改图片内容。

七、Image类底层实现原理 (Underlying Implementation Principles of Image)

7.1 Image类的渲染过程 (Rendering Process of Image Class)

在本节中，我们将简要介绍Qt Quick中Image类的底层实现原理，以及图片在渲染过程中的处理方式。

Qt Quick基于OpenGL（或者其嵌入式版本，OpenGL ES）实现，因此，其底层的渲染过程遵循OpenGL的渲染管线。当您在Qt Quick应用中使用Image类时，实际上是在使用OpenGL纹理（texture）来实现图片的显示。

以下是Image类的渲染过程：

加载图片数据：当您为Image类指定一个图片源（source）时，Qt Quick会从文件系统或资源系统中加载图片数据。然后，该数据被解码为像素格式，通常是RGBA格式。
创建OpenGL纹理：Qt Quick会为解码后的图片数据创建一个OpenGL纹理。纹理数据被上传到GPU内存中，供后续的渲染操作使用。
设置纹理参数：根据Image类的属性（如smooth和mipmap等），Qt Quick会设置相应的OpenGL纹理参数。这些参数决定了纹理在缩放和过滤等操作中的表现。
渲染准备：为了在屏幕上显示图片，Qt Quick需要创建一个矩形（quad）来承载纹理。该矩形的顶点数据和纹理坐标会被发送到GPU。
着色器处理：Qt Quick使用顶点着色器（vertex shader）和片段着色器（fragment shader）处理矩形的顶点和纹理数据。片段着色器负责将纹理数据转换为屏幕上的像素颜色。
渲染到帧缓冲区：经过着色器处理后，最终的像素颜色数据会被写入帧缓冲区（framebuffer）。随后，帧缓冲区的内容会被刷新到屏幕上，呈现给用户。

通过这个渲染过程，Image类实现了在Qt Quick应用中显示图片的功能。需要注意的是，这个过程可能会因Qt Quick版本、操作系统和GPU硬件的不同而略有差异。然而，从概念上讲，Image类的底层实现原理在大多数情况下是相似的。

7.2 图片加载和缓存策略 (Image Loading and Caching Strategy)

Qt Quick中的Image类具有一定的图片加载和缓存策略，以提高性能并减少内存使用。在本节中，我们将简要介绍这些策略。

7.2.1 延迟加载 (Asynchronous Loading)

在默认情况下，Image类使用延迟加载策略。当您为Image指定一个图片源（source）时，Qt Quick不会立即加载图片数据。相反，它会等待图片的可见性（visibility）和大小（width和height）属性被设置后才开始加载。这样可以确保只有真正需要显示的图片才会被加载到内存中。

您可以通过设置Image类的asynchronous属性来启用异步加载。当此属性设置为true时，Qt Quick会在后台线程中加载图片数据，而不会阻塞主线程。这可以提高应用程序的响应速度，特别是在加载大量图片时。

7.2.2 图片缓存 (Image Caching)

Qt Quick具有一个内置的图片缓存系统，用于存储已加载的图片数据。当同一个图片源被多个Image对象引用时，图片数据会被缓存起来，以避免重复加载。

图片缓存的大小和行为可以通过Qt Quick的全局属性进行配置。例如，您可以使用QQmlEngine::setOfflineStoragePath()函数设置缓存的路径，或者使用QQmlEngine::setOfflineStorageDefault_quota()函数设置缓存的大小限制。

需要注意的是，图片缓存并不总是有效的。在某些情况下，例如当图片源是一个动态生成的URL时，Qt Quick可能无法正确地缓存图片数据。在这种情况下，您需要自己实现一个缓存策略，或者使用第三方库来实现图片缓存。

7.2.3 内存优化 (Memory Optimization)

在处理大量图片时，内存优化尤为重要。Qt Quick提供了一些方法来减少图片的内存占用：

使用合适的图片格式：选择合适的图片格式可以降低内存占用。例如，使用JPEG格式的图片通常比使用PNG格式的图片占用更少的内存，因为JPEG具有更高的压缩率。然而，请注意，JPEG格式不支持透明度，因此在需要透明度的情况下，您需要使用PNG或其他支持透明度的格式。
使用压缩纹理：一些GPU支持特定的压缩纹理格式，如PVRTC或ETC。使用这些格式可以显著降低纹理在GPU内存中的占用。然而，压缩纹理的支持取决于硬件和操作系统，因此在跨平台

7.4 支持高分辨率设备 (Supporting High-Resolution Devices)

随着技术的发展，越来越多的设备拥有高分辨率屏幕。为了在这些设备上获得更清晰的图像显示，您需要针对高分辨率屏幕优化Image类的使用。

7.4.1 使用高分辨率图片资源 (Using High-Resolution Image Resources)

针对高分辨率设备，您可以准备一组高分辨率的图片资源。通常，这些资源的尺寸是标准分辨率资源的2倍（@2x）或3倍（@3x）。在Qt Quick中，您可以使用Image.source属性的URL选择器功能自动选择适当的资源：

Image {
    source: "image@2x.png;image@3x.png;image.png"
}

在这个示例中，Qt Quick会根据设备的屏幕分辨率自动选择最合适的图片资源。请注意，资源文件的顺序很重要：从左到右，它们的优先级依次降低。

7.4.2 使用设备像素比 (Using Device Pixel Ratio)

为了适应不同分辨率的屏幕，Qt Quick引入了设备像素比（Device Pixel Ratio，DPR）的概念。设备像素比表示屏幕上的物理像素和逻辑像素的比例。您可以使用Screen.devicePixelRatio属性获取当前设备的设备像素比。

在Qt Quick中，图像的大小（width和height属性）是以逻辑像素为单位的。当您为Image类指定一个高分辨率资源时，Qt Quick会自动将其缩放到适当的逻辑尺寸。您无需手动设置图像的大小，只需保证资源文件的尺寸与设备像素比相匹配即可。

7.4.3 高分辨率字体和图标 (High-Resolution Fonts and Icons)

除了图片资源之外，您还需要为高分辨率屏幕优化字体和图标的显示。Qt Quick的字体渲染系统会自动适应设备像素比，因此您无需对字体进行额外的设置。对于图标，您可以使用矢量图形（如SVG）或使用高分辨率的位图资源。

通过支持高分辨率设备，您可以确保Qt Quick应用在各种屏幕上都具有清晰、锐利的图像显示效果。

7.5 QML Image底层调用过程 (QML Image Underlying Call Process)

在本节中，我们将简要介绍QML Image在底层的调用过程。了解这一过程有助于更好地理解Image类的工作原理，并为进一步优化提供思路。

7.5.1 QML Image类的创建 (QML Image Object Creation)

当您在QML代码中声明一个Image对象时，Qt Quick会为该对象创建一个对应的C++实例。这个实例是QQuickImage类的一个对象，它继承自QQuickItem类。在QQuickImage类中，包含了与图片相关的所有属性和方法，如source、width、height等。

7.5.2 图片加载和解码 (Image Loading and Decoding)

当您为Image对象指定一个图片源（source属性）时，Qt Quick会调用底层的图片加载和解码库。在Qt中，这个库是QImageReader类，它支持多种图片格式（如PNG、JPEG、GIF等）。

QImageReader类会根据图片源的URL加载对应的图片数据，并将其解码为一个QImage对象。这个QImage对象包含了图片的像素数据、尺寸、格式等信息。

7.5.3 图片渲染 (Image Rendering)

在渲染过程中，Qt Quick会将QImage对象上传到GPU，并将其存储为一个OpenGL（或其他图形API）纹理。然后，Qt Quick会创建一个矩形（quad）几何体，其顶点位置和纹理坐标与Image对象的大小和纹理匹配。

最后，Qt Quick会使用一个默认的着色器程序来绘制这个矩形几何体。该着色器程序会根据纹理坐标从纹理中采样颜色，并将其与Image对象的其他属性（如透明度、颜色叠加等）进行计算，以生成最终的像素颜色。

7.5.4 图片缓存和优化 (Image Caching and Optimization)

为了提高性能，Qt Quick会将已加载的图片数据存储在一个缓存中。这个缓存由QQuickPixmap类管理，它负责跟踪图片源、QImage对象和纹理之间的关联。当同一个图片源被多个Image对象引用时，QQuickPixmap会从缓存中返回相同的QImage对象，以避免重复加载和解码。

此外，Qt Quick还会对图片进行一些优化操作，如预乘透明度、图像金字塔等。这些操作旨在改善图片的渲染性能和内存占用。

通过了解QML Image底层的调用过程，您可以更好地理解其工作原

7.6 QML Image与Qt QImage的区别及底层实现 (QML Image vs Qt QImage: Differences and Underlying Implementations)

QML Image和Qt QImage都是Qt框架中用于处理和显示图像的类。然而，它们之间存在一些重要的区别，并分别针对不同的应用场景。在本节中，我们将探讨这两者之间的区别以及它们的底层实现。

7.6.1 QML Image

QML Image是Qt Quick框架中的一个元素，用于在QML界面中显示图像。QML Image专为GPU加速的图形渲染设计，它支持各种高级功能，如透明度、缩放、旋转等。QML Image的底层实现使用了Qt Quick的渲染引擎（基于OpenGL或其他图形API），它将图像数据上传到GPU并以纹理的形式存储。

QML Image适用于创建动态、交互式的用户界面，特别是对性能和视觉效果要求较高的应用。

7.6.2 Qt QImage

Qt QImage是Qt GUI框架中的一个类，它表示一个可以在内存中修改和操作的图像。Qt QImage主要用于CPU上的图像处理任务，如加载、解码、编辑和保存图像。它支持多种像素格式，并提供了丰富的图像处理功能，如缩放、裁剪、颜色转换等。

Qt QImage适用于图像处理、计算机视觉和其他需要在内存中操作图像数据的场景。

7.6.3 底层实现

尽管QML Image和Qt QImage都用于处理图像，但它们的底层实现有很大不同。QML Image的底层实现侧重于GPU加速的图形渲染，它使用Qt Quick的渲染引擎将图像数据上传到GPU，并将其作为纹理进行绘制。这种实现方式可以充分利用现代GPU的性能，实现高效的图形渲染。

Qt QImage的底层实现则主要关注CPU上的图像处理。它使用Qt GUI的图像处理库（如QImageReader和QImageWriter）来实现图像的加载、解码、编辑和保存功能。Qt QImage通常以CPU内存中的位图形式存储图像数据，这使得它非常适合执行复杂的图像处理任务。

总之，QML Image和Qt QImage分别针对不同的应用场景和需求，它们的底层实现也有很大差异。在实际开发中，您可以根据需要选择合适的类来处理图像。

在QML Image底层调用过程中，当您为Image对象指定一个图片源（source属性）时，Qt Quick会调用底层的图片加载和解码库。在Qt中，这个库是QImageReader类，它支持多种图片格式（如PNG、JPEG、GIF等）。

QImageReader类会根据图片源的URL加载对应的图片数据，并将其解码为一个QImage对象。这个QImage对象包含了图片的像素数据、尺寸、格式等信息。

然后，在QML Image的渲染过程中，这个QImage对象会被上传到GPU并作为一个OpenGL（或其他图形API）纹理存储。这样，QML Image可以利用GPU加速的渲染能力来高效地显示图像。

所以，尽管QML Image和Qt QImage的底层实现有很大差异，但在某些阶段它们会共享一些底层库。例如，在加载和解码阶段，QML Image使用QImageReader读取和解码图像数据，然后将其转换为QImage对象。之后，QML Image会使用这个QImage对象进行GPU渲染。这样的设计使得QML Image可以充分利用现有的Qt图像处理库，同时实现高效的GPU渲染。

八、心理学角度的结语：深化学习与回顾

在这篇博客中，我们从多个角度深入剖析了Qt Quick的Image类，介绍了从底层原理到上层高级应用的多种方法。现在，我们将从心理学的角度出发，谈谈如何更好地学习、回顾和巩固这些知识。

8.1 刻意练习与深度学习 (Deliberate Practice and Deep Learning)

心理学研究表明，刻意练习和深度学习是提高技能和理解的关键。在学习Qt Quick的Image类时，我们鼓励您不仅仅满足于阅读和理解博客中的内容，还要积极地进行实践。通过实际编写代码、运行示例和调试问题，您可以更好地掌握Image类的各种功能和原理。

8.2 定期回顾与巩固 (Regular Review and Consolidation)

学习是一个持续的过程，而不是一次性的事情。为了确保您充分理解并掌握Qt Quick的Image类，我们建议您定期回顾本博客的内容。通过定期回顾和巩固，您可以将知识转化为长期记忆，从而提高学习效果。

8.3 互动与交流 (Interaction and Communication)

学习不应该是孤立的。我们鼓励您与其他读者和开发者进行互动交流，分享您在学习过程中的心得和问题。通过讨论和解答问题，您可以巩固已有的知识，同时也有机会学习到新的技巧和思路。

8.4 点赞、收藏与支持 (Like, Favorite, and Support)

如果您觉得本博客对您的学习有所帮助，欢迎点赞和收藏。您的支持是我们持续创作的动力。同时，您的点赞和收藏也可以帮助其他读者更容易地找到这篇博客，从而共同学习和进步。

最后，我们希望本博客能成为您学习Qt Quick的Image类的良好起点。希望您在学习的道路上取得更大的成就，期待您的反馈和建议。祝您学习愉快！

Qt Quick Image探秘：从底层原理到高级应用（二）