Share via

Concepts de base

  • Article

Remarque

Pour les applications sur Windows 10, nous vous recommandons d’utiliser les API Windows.UI.Composition au lieu de DirectComposition. Pour plus d’informations, consultez Moderniser votre application de bureau à l’aide de la couche visuelle.

Cette rubrique fournit une vue d’ensemble des concepts de base de Microsoft DirectComposition. Il contient les sections suivantes :

Composition

DirectComposition définit une composition comme une collection de bitmaps qui sont combinées et manipulées en appliquant diverses transformations, effets et animations pour produire un résultat visuel dans l’interface utilisateur d’une application. DirectComposition fonctionne uniquement avec le contenu bitmap ; il ne prend pas en charge les vecteurs ou le texte. DirectComposition ne fournit pas de contenu bitmap. Au lieu de cela, il fournit des interfaces dans lesquelles les utilisateurs peuvent dessiner avec D2D, DXGI ou charger leur propre contenu de texture.

Une application DirectComposition crée deux ensembles d’objets pour composer une scène : les bitmaps composées ensemble et les visuels qui définissent les relations spatiales entre les bitmaps. Pour plus d’informations sur les objets bitmap pris en charge par DirectComposition, consultez Objets Bitmap.

Objets visuels

Les visuels (ou objets visuels) sont les éléments fondamentaux de DirectComposition. Il s’agit des blocs de construction de base que vous utilisez pour créer des compositions et des animations dans l’interface utilisateur de votre application.

En termes de programmation, un visuel est un objet qui a un ensemble de propriétés et expose une interface que vous utilisez pour définir la valeur des propriétés. La propriété Content d’un visuel associe une bitmap particulière au visuel, tandis que d’autres propriétés contrôlent la façon dont DirectComposition positionne et manipule le visuel à mesure qu’il est affiché à l’écran.

Pour plus d’informations, consultez Propriétés d’un visuel.

Arborescence visuelle

DirectComposition crée une composition à partir d’une collection hiérarchique d’objets visuels appelée arborescence visuelle. Le visuel à la racine d’une arborescence est appelé visuel racine et peut avoir un ou plusieurs visuels enfants associés. Un visuel enfant peut avoir un ou plusieurs visuels enfants. Tout visuel qui a des visuels enfants associés est appelé visuel parent, et tous les visuels enfants qui partagent le même parent sont appelés visuels frères. Un visuel particulier, ainsi que tous ses visuels enfants et descendants, est appelé une sous-arborescence visuelle.

L’emplacement d’un visuel dans l’arborescence permet de déterminer sa position d’écran et son ordre de plan par rapport aux autres visuels de la composition. Le visuel racine est positionné par rapport au coin supérieur gauche de la zone cliente de la fenêtre cible où la composition est rendue. Tous les visuels enfants sont positionnés par rapport au coin supérieur gauche de leur visuel parent (ou au visuel spécifié par la propriété TransformParent) et apparaissent toujours devant leur parent dans l’ordre de plan.

L’illustration suivante montre une composition de visuels et la structure de l’arborescence visuelle utilisée pour produire la composition. Visual 1 est le visuel racine et est également le parent des visuels enfants 2 et 3, qui sont des visuels frères. Visual 3 possède deux visuels enfants, Visuels 4 et 5. Ensemble, les visuels 3 à 5 constituent une sous-arborescence visuelle.

une composition de visuels et l’arborescence visuelle correspondante

Un visuel parent conserve une liste ordonnée de ses visuels enfants. Lorsque les visuels frères sont positionnés de telle sorte qu’ils se chevauchent, DirectComposition définit l’ordre de plan des frères et sœurs en fonction de l’ordre dans lequel ils apparaissent dans la liste des enfants du visuel parent. Un frère qui apparaît plus loin dans la liste est placé devant tous les frères et sœurs qui apparaissent plus haut dans la liste. L’illustration suivante montre l’ordre de plan des visuels enfants qui se chevauchent.

L’ordre de plan des visuels enfants qui se chevauchent

Propriétés d’un objet visuel

Un objet visuel expose un ensemble de propriétés qui vous permettent de définir le contenu bitmap du visuel et de contrôler la façon dont DirectComposition positionne et manipule le contenu visuel. Les sections suivantes décrivent chaque propriété en détail.

Propriété de contenu

La propriété Content d’un visuel spécifie le contenu bitmap associé au visuel. Il s’agit de la bitmap que DirectComposition utilise lorsque vous incluez le visuel dans une composition.

Vous définissez la propriété Content d’un visuel en appelant la méthode IDCompositionVisual::SetContent .

Pour plus d’informations sur les types de contenu bitmap pris en charge par DirectComposition, consultez Objets bitmap.

Propriété Clip

La propriété Clip d’un visuel spécifie une zone rectangulaire appelée zone de découpage (ou rectangle de découpage). Lorsqu’un visuel est affiché, seule la partie du visuel qui se trouve à l’intérieur de la zone de découpage est affichée, tandis que tout contenu qui s’étend en dehors de la zone de découpage est coupé (autrement dit, non affiché). DirectComposition prend en charge les régions de découpage qui ont des coins arrondis ou carrés.

Vous définissez la propriété Clip d’un visuel en appelant la méthode IDCompositionVisual::SetClip .

Pour plus d’informations, consultez Découpage.

Propriété BorderMode

La propriété BorderMode spécifie comment composer les bords des bitmaps et des clips associés à ce visuel, ou avec des visuels dans la sous-arborescence enracinée sur ce visuel.

Le mode bordure affecte la façon dont les bords d’une bitmap sont composés lorsque la bitmap est transformée de telle sorte que les bords ne soient pas alignés sur l’axe avec des coordonnées entières. Cela affecte également la façon dont le contenu est coupé aux coins d’un clip qui a des coins arrondis, et au bord d’un clip qui est transformé de sorte que les bords ne soient pas alignés sur l’axe avec des coordonnées entières.

Pour plus d’informations, consultez IDCompositionVisual::SetBorderMode.

Propriété BitmapInterpolationMode

La propriété BitmapInterpolationMode indique à DirectComposition comment composer une bitmap lorsqu’elle est transformée de telle sorte qu’il n’y ait pas de correspondance un-à-un entre les pixels de la bitmap et les pixels à l’écran.

Vous définissez la propriété BitmapInterpolationMode d’un visuel en appelant la méthode IDCompositionVisual::SetBitmapInterpolationMode .

Propriété CompositeMode

La propriété CompositeMode indique à DirectComposition comment fusionner le contenu bitmap d’un visuel avec la cible de rendu. Pour obtenir une description des modes composites pris en charge, consultez DCOMPOSITION_COMPOSITE_MODE.

Vous définissez la propriété CompositeMode d’un visuel en appelant la méthode IDCompositionVisual::SetCompositeMode .

Propriétés OffsetX et OffsetY

Les propriétés OffsetX et OffsetY indiquent à DirectComposition où positionner un visuel horizontalement et verticalement. Ils définissent la position fixe à deux dimensions à partir de laquelle toutes les transformations et effets du visuel sont calculés.

Pour un visuel racine, les propriétés OffsetX et OffsetY définissent la coordonnée x et la coordonnée y d’un point par rapport au coin supérieur gauche de la fenêtre qui héberge le visuel. Pour un visuel enfant, les coordonnées sont relatives au coin supérieur gauche du parent ou, si la propriété TransformParent est spécifiée, à l’angle supérieur gauche du visuel spécifié. Lorsqu’un visuel est affiché, il est positionné de telle sorte que le coin supérieur gauche du visuel coïncide avec les coordonnées spécifiées.

Vous définissez les propriétés OffsetX et OffsetY d’un visuel en appelant les méthodes IDCompositionVisual::SetOffsetX et SetOffsetY .

Propriété Effect

La propriété Effect vous permet de spécifier un effet, ou un groupe d’effets, qui modifiera la composition d’un visuel et de sa sous-arborescence. Par exemple, vous pouvez spécifier des effets qui contrôlent l’opacité d’un visuel, fusionner le visuel avec une autre bitmap de différentes manières et appliquer des transformations de perspective au visuel.

Vous définissez la propriété Effect d’un visuel en appelant la méthode IDCompositionVisual::SetEffect .

Pour plus d’informations, consultez Effets.

Transform (propriété)

La propriété Transform spécifie une transformation en deux dimensions (2D), ou un groupe de transformations 2D, que DirectComposition doit effectuer sur le visuel. Une transformation (ou transformation) est une opération qui modifie le système de coordonnées d’un visuel par rapport à son parent ou par rapport au visuel spécifié par la propriété TransformParent. Vous pouvez utiliser des transformations pour modifier la position, la taille ou la nature d’un visuel en le déplaçant vers un autre emplacement (traduction), en le rendant plus grand ou plus petit (mise à l’échelle), en le tournant (rotation), en déformant sa forme (inclinaison), etc.

Vous définissez la propriété Transform d’un visuel en appelant la méthode IDCompositionVisual::SetTransform .

Pour plus d’informations, consultez l’article Transforms (Transformations MSBuild).

Propriété TransformParent

Le système de coordonnées d’un visuel est modifié par les propriétés OffsetX, OffsetY et Transform. Normalement, ces propriétés définissent le système de coordonnées d’un visuel par rapport à son parent immédiat. Pour utiliser un visuel autre que le parent comme base du système de coordonnées d’un visuel enfant, utilisez la propriété TransformParent pour spécifier un autre visuel comme « parent » à des fins de transformation.

Vous définissez la propriété TransformParent d’un visuel en appelant la méthode IDCompositionVisual::SetTransformParent .

Objet d’appareil

Pour utiliser DirectComposition, vous devez créer et manipuler divers objets COM (Component Object Model). Le premier objet que vous devez créer est l’objet d’appareil DirectComposition, car il sert de fabrique pour créer tous les autres objets utilisés dans une composition.

Vous créez un objet d’appareil en appelant la fonction DCompositionCreateDevice , qui retourne un pointeur d’interface IDCompositionDevice . Cette interface expose un ensemble de méthodes que vous utilisez pour créer des objets visuels, des objets clip, des objets d’animation, des objets de transformation, des objets d’effet, etc.

L’objet d’appareil sert un autre objectif en plus d’être une fabrique pour créer d’autres objets. Il expose une méthode appelée Commit qui transmet une arborescence visuelle à DirectComposition pour traitement. Pour plus d’informations, consultez Composition transactionnelle.

N’oubliez pas que, bien que vous puissiez créer plusieurs instances de l’objet d’appareil dans votre application, tous les objets que vous utilisez dans une composition particulière doivent être créés par le même objet d’appareil, à une exception près : vous pouvez combiner des objets visuels de différents objets d’appareil dans la même arborescence visuelle. Dans ce cas, DirectComposition traite l’arborescence visuelle comme il le ferait normalement, sauf que les modifications apportées à un objet visuel particulier dans l’arborescence prennent effet uniquement lorsque la méthode Commit est appelée sur l’objet d’appareil qui a créé l’objet visuel.

La possibilité d’utiliser des visuels de différents appareils dans la même arborescence visuelle permet à plusieurs threads de créer et de manipuler une seule arborescence visuelle tout en conservant deux appareils indépendants qui peuvent être utilisés pour valider les modifications de manière asynchrone. Pour plus d’informations, consultez Arborescences visuelles inter-appareils.

Fenêtre cible de composition

Une arborescence visuelle doit être liée à une fenêtre pour qu’un des visuels de l’arborescence puisse être affiché à l’écran. La fenêtre, appelée fenêtre cible de composition, peut être une fenêtre de niveau supérieur ou une fenêtre enfant. En outre, la fenêtre cible de composition peut être une fenêtre en couches ; autrement dit, il peut avoir le style de fenêtre WS_EX_LAYERED .

DirectComposition permet à une application de lier un maximum de deux arborescences visuelles à chaque fenêtre. Les arborescences visuelles incluent une qui est composée au-dessus de la fenêtre elle-même, mais derrière toutes les fenêtres enfants de la fenêtre, et une autre qui est composée au-dessus de la fenêtre et au-dessus des fenêtres enfants. En d’autres termes, chaque fenêtre a quatre couches conceptuelles, et toutes les couches sont clippées dans la région visible de la fenêtre cible. L’illustration suivante montre les quatre couches conceptuelles d’une fenêtre.

couches conceptuelles d’une fenêtre

Composition transactionnelle

DirectComposition utilise un modèle transactionnel dans lequel vous créez un ensemble par lots de modifications apportées à un visuel, puis « commitez » le jeu sur DirectComposition pour le traitement en même temps. Vous pouvez modifier le même objet visuel DirectComposition et valider les modifications à n’importe quel nombre de fois. Lorsque le Gestionnaire de fenêtres de bureau (DWM) récupère les lots, il récupère tous les lots en attente et les applique à l’image suivante dans l’ordre dans lequel ils ont été engagés.

Toutes les modifications au sein d’un commit unique sont garanties pour être appliquées à une image unique. Étant donné que DWM collecte les lots une fois par image, vous ne pouvez modifier un objet particulier qu’une seule fois par image. Les validations suivantes qui modifient différents objets peuvent également être appliquées à l’image actuelle, mais DirectComposition ne garantit pas que les modifications se produisent dans la même image.

Les méthodes IDCompositionSurface::BeginDraw et IDCompositionSurface::EndDraw vous permettent de synchroniser les mises à jour de rendu avec les mises à jour visuelles. Par exemple, vous pouvez appeler IDCompositionSurface::BeginDraw, mettre à jour les propriétés OffsetX et Clip d’un visuel, appeler IDCompositionDevice::Commit, dessiner du contenu avec Microsoft DirectX, puis appeler IDCompositionSurface::EndDraw. Dans ce cas, Microsoft DirectComposition garantit que le contenu bitmap et les propriétés visuelles sont mis à jour en même temps.

Traitement par lot

Vous pouvez valider plusieurs modifications apportées au même visuel, ou plusieurs modifications apportées à différents visuels, dans le même cadre. Lorsque vous apportez plusieurs modifications au même visuel dans la même image, gardez à l’esprit les points suivants :

  • Si vous apportez plusieurs modifications à la même propriété d’un visuel, seule la dernière modification est appliquée. Par exemple, si vous définissez l’opacité sur 0, puis sur 0,5 et enfin sur 1.0, seule une opacité de 1.0 est appliquée au visuel.

  • Si vous modifiez plusieurs propriétés du même visuel, DirectComposition applique les modifications d’abord au visuel, puis aux visuels enfants. Les propriétés sont appliquées dans l’ordre suivant, quel que soit l’ordre dans lequel vous les spécifiez :

    1. Offset
    2. Transformation
    3. Découper
    4. Effet

    L’illustration suivante montre le résultat de l’application des quatre propriétés à un visuel.

    résultat de l’application des quatre propriétés à un visuel

    N’oubliez pas que toutes les modifications sont appliquées au visuel à la fois dans le contexte du même cadre. Cela signifie que, du point de vue de l’utilisateur, les modifications apportées au visuel se produisent instantanément.

  • Pour la propriété Transform, vous pouvez utiliser IDCompositionDevice::CreateTransformGroup pour créer un groupe de transformations à appliquer à un visuel en même temps. DirectComposition applique les transformations dans l’ordre que vous spécifiez.

  • Pour la propriété Effect, vous pouvez utiliser IDCompositionEffectGroup pour appliquer un groupe d’effets. DirectComposition applique les effets dans l’ordre que vous spécifiez. En outre, les transformations de perspective 3D entraînent l’aplatissement de l’arborescence visuelle une fois que toutes les transformations 3D du visuel actuel ont été appliquées. Cela permet de s’assurer que le visuel résultant se rapproche le plus possible de la 3D.

Synchronization

Votre application peut appeler DirectComposition à partir de plusieurs threads en même temps. L’ordre d’exécution est garanti pour les appels séquentiels, mais pas pour les appels simultanés. Par exemple, si le thread A modifie un visuel et que le thread B valide le lot en même temps, il n’est pas défini si cette modification visuelle est incluse dans le lot validée ou si elle démarre un nouveau lot. En revanche, si votre application utilise d’autres mécanismes de synchronisation pour s’assurer qu’une méthode est appelée avant l’autre, DirectComposition respecte l’ordre d’appel et les traite comme si les deux appels étaient émis dans cet ordre à partir d’un seul thread.

Arborescences visuelles inter-appareils

Les objets DirectComposition ne sont pas liés au thread ; vous pouvez utiliser plusieurs threads pour modifier le même ensemble d’objets. Toutefois, tenez compte des problèmes suivants lors du partage du même objet d’appareil.

  • Les deux threads doivent être en mesure d’appeler IDCompositionDevice::Commit. Si un seul des threads appelle IDCompositionDevice::Commit, l’autre thread ne peut valider aucune de ses modifications dans DirectComposition.
  • Le comportement transactionnel peut être perdu si un thread appelle IDCompositionDevice::Commit tandis que l’autre thread apporte toujours des modifications destinées à faire partie de la même transaction.

Si vous devez valider plusieurs transactions simultanées sur DirectComposition, vous devez utiliser plusieurs objets d’appareil, éventuellement à partir de plusieurs threads. Dans ce scénario, la même arborescence visuelle est partagée par les deux objets d’appareil et chaque objet d’appareil valide ses propres transactions.

L’illustration suivante montre une arborescence visuelle partagée par deux objets d’appareil. Les visuels 1, 2, 4 et 5 appartiennent à un appareil ou à l’autre, mais le visuel 3 est partagé par les deux appareils et peut donc être utilisé pour connecter deux sous-arborescences dans une seule arborescence visuelle plus grande. Le partage de l’arborescence visuelle permet de manipuler les deux appareils à partir de deux threads différents de manière asynchrone.

une arborescence visuelle partagée par deux appareils

Pour illustrer l’utilité du partage d’une arborescence visuelle entre deux appareils, envisagez une architecture qui permet une entrée tactile à faible latence. L’architecture peut utiliser deux threads, l’un qui gère la plupart des tâches de l’interface utilisateur, et un second thread dédié au traitement des événements d’entrée tactile. Le thread tactile met à jour la transformation d’un visuel particulier en fonction du mouvement d’entrée de l’utilisateur. En mettant à jour la transformation, le thread tactile peut faire en sorte que l’ensemble de la sous-arborescence sous ce visuel suive le doigt de l’utilisateur, effectue un scale-up ou un scale-down à mesure que l’utilisateur exécute un mouvement multipoint, et ainsi de suite. Le thread d’interface utilisateur conserve la propriété de la plupart de l’arborescence de composition, le thread tactile ne possédant que les quelques visuels étiquetés pour la réponse tactile asynchrone. L’illustration suivante montre une version simplifiée d’une telle arborescence de composition :

une arborescence visuelle partagée entre un thread d’interface utilisateur et un thread tactile

En règle générale, le thread d’interface utilisateur modifie uniquement les visuels qu’il possède exclusivement, et le thread tactile modifie uniquement le visuel partagé. La seule exception se produit lors de la création ou de la destruction d’une sous-arborescence tactile.

IDCompositionSurface::BeginDraw

IDCompositionSurface::EndDraw

IDCompositonDevice::Commit

DirectComposition Concepts