examples/quick/vectorimage/Main.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.VectorImage

ApplicationWindow {
    id: topLevel
    width: 800
    height: 800
    visible: true
    title: qsTr("Vector Image Example")
    color: "lightpink"

    property real sourceSize: Math.min(topLevel.width / 12, topLevel.height / 12)

    Component {
        id: imageComponent
//! [image]
        Image {
            sourceSize: Qt.size(topLevel.sourceSize, topLevel.sourceSize)
            source: "heart.svg"
        }
//! [image]
    }

    Component {
        id: vectorImageComponent
//! [vectorimage]
        VectorImage {
            width: topLevel.sourceSize
            height: topLevel.sourceSize
            preferredRendererType: VectorImage.CurveRenderer
            source: "heart.svg"
        }
//! [vectorimage]
    }

    Component {
        id: svgtoqmlComponent
//! [svgtoqml]
        Heart {
            width: topLevel.sourceSize
            height: topLevel.sourceSize
        }
//! [svgtoqml]
    }

    GridLayout {
        id: grid
        anchors.fill: parent
        columns: 3
        uniformCellWidths: true
        rowSpacing: 0

        Label {
            id: label
            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
            text: "Image"
            color: "black"
            font.pixelSize: 20
            font.bold: true
        }

        Label {
            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
            text: "VectorImage"
            color: "black"
            font.pixelSize: 20
            font.bold: true
        }

        Label {
            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
            text: "svgtoqml"
            color: "black"
            font.pixelSize: 20
            font.bold: true
        }

        Repeater {
            id: repeater
            property int count: grid.columns
            model: grid.columns * count
            Item {
                id: repeaterDelegate
                required property int index
                property int margin: 10
                Layout.preferredHeight: ((grid.height - label.height - margin) / repeater.count)
                Layout.preferredWidth: ((grid.height - label.height - margin) / repeater.count)
                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                clip: true

                Rectangle {
                    anchors.fill: parent
                    border.width: 1
                    color: "lightcoral"
                    radius: 10
                }

                Item {
                    property int row: repeaterDelegate.index / grid.columns
                    transformOrigin: Item.Center
                    anchors.fill: parent
                    Loader {
                        id: loader
                        property int column: repeaterDelegate.index % grid.columns

                        anchors.centerIn: parent
                        sourceComponent: {
                            switch (column) {
                            case 0: return imageComponent
                            case 1: return vectorImageComponent
                            case 2: return svgtoqmlComponent
                            }
                        }
                    }
                    scale: 1 + row * 1.5
                }
            }
        }
    }
}