Qt Quick Demo - Photo Surface▲

Image non disponible

Photo Surface demonstrates how to use a Repeater with a FolderListModel and a FolderDialog to access images from a folder selected by a user and how to handle dragging, rotation and pinch zooming within the same item using a PinchArea that contains a MouseArea.

All the app code is contained in one QML file, photosurface.qml. Inline JavaScript code is used to place, rotate, and scale images on the photo surface.

Running the Example▲

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Creating the Main Window▲

To create the main window for the Photo Surface app, we use the Window QML type as the root item. It automatically sets up the window for use with Qt Quick graphical types:

 
Sélectionnez
Window {
    id: root
    visible: true
    width: 1024; height: 600
    color: "black"
    property int highestZ: 0
    property real defaultSize: 200
    property var currentFrame: undefined

To use the Window type, we must import it:

 
Sélectionnez
import QtQuick.Window 2.1

Accessing Folder Contents▲

We use a Repeater QML type together with the FolderListModel to display GIF, JPG, and PNG images located in a folder:

 
Sélectionnez
        Repeater {
            model: FolderListModel {
                id: folderModel
                objectName: "folderModel"
                showDirs: false
                nameFilters: imageNameFilters
            }

To use the FolderListModel type, we must import it:

 
Sélectionnez
import Qt.labs.folderlistmodel 1.0

We use a FolderDialog to enable users to select the folder that contains the images:

 
Sélectionnez
    FolderDialog {
        id: folderDialog
        title: "Choose a folder with some images"
        folder: picturesLocation
        onAccepted: folderModel.folder = folder + "/"
    }

To use the FolderDialog type, we add the following import statement:

 
Sélectionnez
import Qt.labs.platform 1.1

We use the folderDialog.open() function to open the file dialog when the app starts:

 
Sélectionnez
Component.onCompleted: folderDialog.open()

Users can also click the folder dialog icon to open it. We use an Image QML type to display the icon. Inside the Image type, we use a MouseArea with the onClicked signal handler to call the folderDialog.open() function:

 
Sélectionnez
    Image {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 10
        source: "resources/folder.png"
        MouseArea {
            anchors.fill: parent
            anchors.margins: -10
            onClicked: folderDialog.open()
            hoverEnabled: true
            onPositionChanged: {
                tooltip.visible = false
                hoverTimer.start()
            }
            onExited: {
                tooltip.visible = false
                hoverTimer.stop()
            }

Displaying Images on the Photo Surface▲

We use a Rectangle as a delegate for a Repeater to provide a frame for each image that the FolderListModel finds in the selected folder. We use JavaScript Math() methods to place the frames randomly on the photo surface and to rotate them at random angles, as well as to scale the images:

 
Sélectionnez
            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
                }

Handling Pinch Gestures▲

We use a PinchArea that contains a MouseArea in the photo frames to handle dragging, rotation and pinch zooming of the frame:

 
Sélectionnez
                PinchArea