Concepts - Coordonnées visuelles dans Qt Quick

Coordonnées des éléments

Le système de coordonnées visuelles utilisé par défaut dans Qt Quick est celui des coordonnées d’élément. Il s’agit d’un système de coordonnées cartésiennes dont le point (0,0) se trouve au coin supérieur gauche de l’élément. L’axe x s’étend vers la droite et l’axe y vers le bas, de sorte que le coin inférieur droit de l’élément se trouve aux coordonnées (largeur, hauteur).

La position d’un élément individuel est spécifiée par rapport au système de coordonnées de son parent. Cela signifie que la lecture des valeurs x, y d’éléments non frères peut nécessiter une conversion pour les transposer dans le même système de coordonnées. Les coordonnées de scène sont souvent utilisées comme système de coordonnées intermédiaire dans ce cas.

Coordonnées de la scène

Les coordonnées de scène sont celles pour lesquelles (0, 0) correspond au coin supérieur gauche de la fenêtre dans laquelle la scène est actuellement affichée. Les coordonnées de scène correspondent généralement aux coordonnées de l’élément racine de la fenêtre.

Vous pouvez convertir les coordonnées d’un élément en coordonnées de scène à l’aide des fonctions de l’élément dont le système de coordonnées vous intéresse. Consultez Item::mapFromItem et Item::mapToItem pour savoir comment convertir en coordonnées de scène ou en coordonnées d’un autre élément.

Exemple pratique

Le code QML ci-dessous crée un agencement de carrés, avec des points ajoutés pour identifier les emplacements :

Rectangle {
    width: 200
    height: 200
    color: "red"

    Rectangle {
        x: 100
        y: 100
        width: 100
        height: 100
        color: "blue"

        Rectangle {
            width: 50
            height: 50
            color: "green"
        }
    }
}

Sur cette image, le point noir est positionné à (0,0) dans les coordonnées de l'élément du rectangle rouge. Si le rectangle rouge était l'élément racine de la scène, alors le point noir serait également positionné à (0,0) dans les coordonnées de la scène.

Le rectangle bleu est positionné au niveau du point blanc, (100, 100), par rapport au coin supérieur gauche du rectangle rouge.

Le rectangle vert n’ayant pas de coordonnées x, y spécifiées, sa position par défaut est (0,0). Comme il se trouve à (0,0) dans les coordonnées de son parent, le rectangle bleu, il est positionné au coin supérieur gauche de ce rectangle. Il s’agit du même point que le point blanc situé à (100, 100) dans les coordonnées du rectangle rouge.