Afficher une grille redimensionnable sur une image

Version imprimable

19/03/2013, 18h56
darkman19320

Afficher une grille redimensionnable sur une image

Bonjour tout le monde,

Je cherche à m'entrainer à faire du Qt 5.0 (QtQuick & Co) en réalisant un "splitter" de sprites contenu dans une image.

Comme le dit le titre, j'aimerai afficher une grille qui puisse être redimensionnée et l'appliqué sur l'image contenant tous les sprites (qui ne sont pas forcément tous de la même taille).

Je vois la grille comme un ensemble de quadrilatères dont la taille de chacun peut varier.

J'ai vu l'exemple "Image Composition" sur le site de Qt donc la partie "fusion" de deux images ne me semble pas forcément difficile grace à l'aide de QPainter.
C'est plus la partie pour redimenssionner dynamiquement la grille qui me semble compliquer.

Je ne sais pas quels mots clés utiliser pour mes recherches donc forcément j'obtiens rien de bien concret...

Si vous avez des idées, je suis preneur.

Merci pour tout!
22/03/2013, 18h26
gbdivers

Salut

Si tu fais du QML, le plus simple est encore de dessiner ta grille avec l'élément Canvas (plus particulièrement avec Context2D::lineTo)
09/04/2013, 15h11
darkman19320

Salut!

Merci pour ta réponse! Je viens seulement de la voir... :oops:

J'étais parti sur une GridView avec pour modèle des Rectangles contenant 4 MouseArea pour chaque côté.
Le problème est que je n'arrive pas à répercuter les changements sur les voisins de la case courante. Je pense qu'il faut que je fasse un système de signal/slot mais je ne sais pas quel est la meilleur façon de trouver les voisins.
Y-a-t-il une fonction miracle qui fait ceci facilement?

J'ai cherché un peu sur le net mais je n'ai rien trouvé.

Merci pour tout.
09/04/2013, 15h28
gbdivers

Ok, j'ai pas trop compris ce que tu veux faire et comment tu veux le faire.
Dans tous les cas, le plus simple est de séparer les problématiques : la gestion de la grille ("modèle") et l'affichage de la grille ("vue")
Tu peux montrer des images de ce que tu veux faire ? Et le code de ce que tu as déjà fait ?

Pour le moment, j'ai séparé ma vue (GridView) de mon modèle (ListModel):

Voici mon code (très brouillon):

Code:

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
import QtQuick 2.0
 
Image {
    id: anImage
    source: "testImage"
 
    // Lorsque l'image est chargé, on appel la fonction addElement
    Component.onCompleted: listModel.addElement(anImage.width, anImage.height, gridView.cellWidth, gridView.cellHeight)
 
    ListModel {
        id: listModel
 
        // Fonction qui ajoute un élément en fonction de la taille de l'image et d'une cellule.
        function addElement(width, height, cellWidth, cellHeight)
        {
            var nbElementsByRow = width/cellWidth
            var nbElementsByCol = height/cellHeight
            console.log("nbElementsByRow: " + nbElementsByRow)
            console.log("nbElementsByCol: " + nbElementsByCol)
            for (var i=0; i<nbElementsByRow; ++i)
            {
                for (var j=0; j<nbElementsByCol; ++j)
                {
                    listModel.append({"name": i + "_" + j})
                }
            }
        }
    }
 
    GridView {
        id: gridView
        width: anImage.width
        height: anImage.height
        anchors.top: parent.top // je ne pense pas que tous ces anchors soient nécessaires... Je veux juste que la grille ne change pas de position
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
 
        cellWidth: 50
        cellHeight: 50
 
        model: listModel;
 
delegate: Item {
            id: content
            x: 0
            height: 50
            Column {
                Rectangle {
                    width: 50
                    height: 50
                    border.color: "black"
                    border.width: 1
                    color: "#00FFFFFF"
 
                    MouseArea {
                        id: up
                        anchors.top: parent.top
                        width: parent.width
                        height: 2
                        hoverEnabled: true
                        property variant prevPosition
 
                        onEntered: {
                            cursorShape = Qt.SizeVerCursor
                        }
 
                        onExited: {
                            cursorShape = Qt.ArrowCursor
                        }
 
                        onPressed: {
                            prevPosition = Qt.point(mouseX, mouseY);
                        }
 
                        onPositionChanged: {
                            if (pressedButtons == Qt.LeftButton)
                            {
                                var dy = (mouseY - prevPosition.y)/2.0
                                parent.height += dy
                            }
                        }
 
                    } // MouseArea up
 
                    MouseArea {
                        id: right
                        anchors.right: parent.right
                        width: 2
                        height: parent.height
                        hoverEnabled: true
                        property variant prevPosition
 
                        onEntered: {
                            cursorShape = Qt.SizeHorCursor
                        }
 
                        onExited: {
                            cursorShape = Qt.ArrowCursor
                        }
 
                        onPressed: {
                            prevPosition = Qt.point(mouseX, mouseY);
                        }
 
                        onPositionChanged: {
                            if (pressedButtons == Qt.LeftButton)
                            {
                                var dx = (mouseX - prevPosition.x)/2.0
                                parent.width += dx
                            }
                        }
 
                    } // MouseArea right
                }
            }
        }
  }
}

Pour l'image, j'ai utilisé un version modifiée de celle-ci :http://www.sfml-dev.org/wiki/_media/...h=&cache=cache (les sprites d'animation dans un tuto de sfml) à laquelle j'ai supprimé le fond noir.

J'espère que j'ai été un peu plus clair.

Edit:

Voici le résultat que donne ce code:
http://img15.hostingpics.net/pics/66...0409165631.png