Qt的demo展示——photosurface

「爱情、让人受尽委屈。」 2024-04-08 08:52 130阅读 0赞

#### 一、效果 ####

一个很好的QML的实例，效果

![bd9620dfaef7423b9d23250dec2cf448.png][]

#### 二、源码分析 ####

示例代码也是相对比较简单，主要的代码都是使用qml实现，C++部分提供了程序所能支持读取的图片文件格式和获取当前系统图库目录，最后使用QQmlContext的setContextProperty接口将获取到的值注册到qml上下文系统中。

过滤文件

// 图像文件格式过滤，支持,jpg，bmp,png等
    static QStringList imageNameFilters()
    {
        QStringList result;
        QMimeDatabase mimeDatabase;// MIME类型数据库
        const auto supportedMimeTypes = QImageReader::supportedMimeTypes();
        for (const QByteArray &m : supportedMimeTypes) { // 支持的图像文件
            const auto suffixes = mimeDatabase.mimeTypeForName(m).suffixes();
            for (const QString &suffix : suffixes) {
                result.append(QLatin1String("*.") + suffix); // *.png
            }
        }
        return result;
    }

![0fcf419f65b14b28950ef0e9d6816c1a.png][]

获取当前系统目录

const QStringList nameFilters = imageNameFilters();
    
        QQmlApplicationEngine engine;
        QQmlContext *context = engine.rootContext();
    
        // 获取当前系统目录
        QUrl picturesLocationUrl = QUrl::fromLocalFile(QDir::homePath());
        const QStringList picturesLocations = QStandardPaths::standardLocations(QStandardPaths::PicturesLocation); // 查询本地文件系统上的标准位置的函数
        if (!picturesLocations.isEmpty()) {
            picturesLocationUrl = QUrl::fromLocalFile(picturesLocations.first());
            if (initialUrl.isEmpty()
                && !QDir(picturesLocations.first()).entryInfoList(nameFilters, QDir::Files).isEmpty()) { // 返回目录中所有文件和目录的QFileInfo对象列表
                initialUrl = picturesLocationUrl;
            }
        }
    
        context->setContextProperty(QStringLiteral("contextPicturesLocation"), picturesLocationUrl);
        context->setContextProperty(QStringLiteral("contextInitialUrl"), initialUrl);
        context->setContextProperty(QStringLiteral("contextImageNameFilters"), nameFilters);

![ceab016ead7f4cffbb8f6646ad784ab3.png][]

QT5之后获取系统路径的类变为QStandardPaths，通过该类可以获取到系统图库目录、系统音乐目录等，具体参见StandardLocation参数 .

加载QML

engine.load(QUrl("qrc:///photosurface.qml"));
        if (engine.rootObjects().isEmpty())
            return -1;

源码部分就结束了。

#### 三、qml部分 ####

查看代码结构，分析qml各个部分的功能

![8bc4e82fe9b840f7a8951b8813ad311e.png][]

打开目录选择对话框

FileDialog {
            id: fileDialog
            title: "Choose a folder with some images"
            selectFolder: true
            folder: picturesLocation
            onAccepted: folderModel.folder = fileUrl + "/"
        }

picturesLocation是通过C++程序获取的变量并注册到qml上下文系统中，该变量指明了当前对话框打开时默认选中的目录 。

组件加载完毕动作：这里可以看到C++与QML的交互

Component.onCompleted: {
            if (typeof contextInitialUrl !== 'undefined') {
                // Launched from C++ with context properties set.
                imageNameFilters = contextImageNameFilters;
                picturesLocation = contextPicturesLocation;
                if (contextInitialUrl == "")
                    fileDialog.open();
                else
                    folderModel.folder = contextInitialUrl + "/";
            } else {
                // Launched via QML viewer without context properties set.
                fileDialog.open();
            }
        }
    
        property var imageNameFilters : ["*.png", "*.jpg", "*.gif"];
        property string picturesLocation : "";

左上角文件夹图标

Image {
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.margins: 10
            source: "resources/folder.png"
            MouseArea {
                anchors.fill: parent
                anchors.margins: -10
                onClicked: fileDialog.open()
                hoverEnabled: true
                onPositionChanged: {
                    tooltip.visible = false
                    hoverTimer.start()
                }
                onExited: {
                    tooltip.visible = false
                    hoverTimer.stop()
                }
                Timer {
                    id: hoverTimer
                    interval: 1000
                    onTriggered: {
                        tooltip.x = parent.mouseX
                        tooltip.y = parent.mouseY
                        tooltip.visible = true
                    }
                }
                Rectangle {
                    id: tooltip
                    border.color: "black"
                    color: "beige"
                    width: tooltipText.implicitWidth + 8
                    height: tooltipText.implicitHeight + 8
                    visible: false
                    Text {
                        id: tooltipText
                        anchors.centerIn: parent
                        text: "Open an image directory (" + openShortcut.sequenceString + ")"
                    }
                }
            }
            Shortcut {
                id: openShortcut
                sequence: StandardKey.Open
                onActivated: fileDialog.open()
            }
        }

垂直 滚动条

Rectangle {
            id: verticalScrollDecorator
            anchors.right: parent.right
            anchors.margins: 2
            color: "cyan"
            border.color: "black"
            border.width: 1
            width: 5
            radius: 2
            antialiasing: true
            height: flick.height * (flick.height / flick.contentHeight) - (width - anchors.margins) * 2
            y: (flick.contentY - flick.originY) * (flick.height / flick.contentHeight)
            NumberAnimation on opacity { id: vfade; to: 0; duration: 500 }
            onYChanged: { opacity = 1.0; scrollFadeTimer.restart() }
        }

可滑动区域

Flickable {
            id: flick
            anchors.fill: parent
            contentWidth: width * surfaceViewportRatio
            contentHeight: height * surfaceViewportRatio
            Repeater {
                model: FolderListModel {
                    id: folderModel
                    objectName: "folderModel"
                    showDirs: false
                    nameFilters: imageNameFilters
                }
                Rectangle {
                    id: photoFrame
                    width: image.width * (1 + 0.10 * image.height / image.width)
                    height: image.height * 1.10
                    scale: defaultSize / Math.max(image.sourceSize.width, image.sourceSize.height)
                    Behavior on scale { NumberAnimation { duration: 200 } }
                    Behavior on x { NumberAnimation { duration: 200 } }
                    Behavior on y { NumberAnimation { duration: 200 } }
                    border.color: "black"
                    border.width: 2
                    smooth: true
                    antialiasing: true
                    Component.onCompleted: {
                        x = Math.random() * root.width - width / 2
                        y = Math.random() * root.height - height / 2
                        rotation = Math.random() * 13 - 6
                    }
                    Image {
                        id: image
                        anchors.centerIn: parent
                        fillMode: Image.PreserveAspectFit
                        source: folderModel.folder + fileName
                        antialiasing: true
                    }
                    PinchArea {
                        anchors.fill: parent
                        pinch.target: photoFrame
                        pinch.minimumRotation: -360
                        pinch.maximumRotation: 360
                        pinch.minimumScale: 0.1
                        pinch.maximumScale: 10
                        pinch.dragAxis: Pinch.XAndYAxis
                        onPinchStarted: setFrameColor();
                        property real zRestore: 0
                        onSmartZoom: {
                            if (pinch.scale > 0) {
                                photoFrame.rotation = 0;
                                photoFrame.scale = Math.min(root.width, root.height) / Math.max(image.sourceSize.width, image.sourceSize.height) * 0.85
                                photoFrame.x = flick.contentX + (flick.width - photoFrame.width) / 2
                                photoFrame.y = flick.contentY + (flick.height - photoFrame.height) / 2
                                zRestore = photoFrame.z
                                photoFrame.z = ++root.highestZ;
                            } else {
                                photoFrame.rotation = pinch.previousAngle
                                photoFrame.scale = pinch.previousScale
                                photoFrame.x = pinch.previousCenter.x - photoFrame.width / 2
                                photoFrame.y = pinch.previousCenter.y - photoFrame.height / 2
                                photoFrame.z = zRestore
                                --root.highestZ
                            }
                        }
    
                        MouseArea {
                            id: dragArea
                            hoverEnabled: true
                            anchors.fill: parent
                            drag.target: photoFrame
                            scrollGestureEnabled: false  // 2-finger-flick gesture should pass through to the Flickable
                            onPressed: {
                                photoFrame.z = ++root.highestZ;
                                parent.setFrameColor();
                            }
                            onEntered: parent.setFrameColor();
                            onWheel: {
                                if (wheel.modifiers & Qt.ControlModifier) {
                                    photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
                                    if (Math.abs(photoFrame.rotation) < 4)
                                        photoFrame.rotation = 0;
                                } else {
                                    photoFrame.rotation += wheel.angleDelta.x / 120;
                                    if (Math.abs(photoFrame.rotation) < 0.6)
                                        photoFrame.rotation = 0;
                                    var scaleBefore = photoFrame.scale;
                                    photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
                                }
                            }
                        }
                        function setFrameColor() {
                            if (currentFrame)
                                currentFrame.border.color = "black";
                            currentFrame = photoFrame;
                            currentFrame.border.color = "red";
                        }
                    }
                }
            }
        }

参考：

[qml demo分析(photosurface-图片涅拉)\_weixin\_34054931的博客-CSDN博客][qml demo_photosurface-_weixin_34054931_-CSDN]

[bd9620dfaef7423b9d23250dec2cf448.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3af90b9c018d4dc394bcac8422da5b4e.png
[0fcf419f65b14b28950ef0e9d6816c1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/de0ab67b5e814adfa64b6e02caed0bf3.png
[ceab016ead7f4cffbb8f6646ad784ab3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5db3fef9b72044cbb8cb3f4e281fb5c7.png
[8bc4e82fe9b840f7a8951b8813ad311e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/bf7d9740dee7430780afd6a6d970ff94.png
[qml demo_photosurface-_weixin_34054931_-CSDN]: https://blog.csdn.net/weixin_34054931/article/details/85863645