Xamarin.Forms Formes : transformations de chemin d’accès

A Transform définit comment transformer un objet d’un Path espace de coordonnées en un autre espace de coordonnées. Lorsqu’une transformation est appliquée à un Path objet, elle modifie le rendu de l’objet dans l’interface utilisateur.

Les transformations peuvent être classées en quatre classifications générales : rotation, mise à l’échelle, asymétrie et traduction. Xamarin.Forms définit une classe pour chacune de ces classifications de transformation :

• RotateTransform, qui fait pivoter un Path par un spécifié Angle.
• ScaleTransform, qui met à l’échelle un Path objet selon les quantités et ScaleY les quantités spécifiéesScaleX.
• SkewTransform, qui asymétrie un Path objet par des quantités et AngleY des quantités spécifiéesAngleX.
• TranslateTransform, qui déplace un Path objet par des quantités et Y des quantités spécifiéesX.

Xamarin.Forms fournit également les classes suivantes pour créer des transformations plus complexes :

• TransformGroup, qui représente une transformation composite composée de plusieurs objets de transformation.
• CompositeTransform, qui applique plusieurs opérations de transformation à un Path objet.
• MatrixTransform, qui crée des transformations personnalisées qui ne sont pas fournies par les autres classes de transformation.

Toutes ces classes dérivent de la Transform classe, qui définit une Value propriété de type Matrix, qui représente la transformation actuelle en tant qu’objet Matrix . Cette propriété est sauvegardée par un BindableProperty objet, ce qui signifie qu’elle peut être la cible de liaisons de données et de style. Pour plus d’informations sur le Matrix struct, consultez Transform matrix.

Pour appliquer une transformation à un Path, vous créez une classe de transformation et définissez-la comme valeur de la Path.RenderTransform propriété.

Transformation de rotation

Une transformation de rotation fait pivoter un Path objet dans le sens des aiguilles d’une montre sur un point spécifié dans un système de coordonnées 2D x-y.

La RotateTransform classe, qui dérive de la Transform classe, définit les propriétés suivantes :

• Angle, de type double, représente l’angle, en degrés, de rotation au niveau des aiguilles d’une montre. La valeur par défaut de cette propriété est 0.0.
• CenterX, de type double, représente la coordonnée x du point central de rotation. La valeur par défaut de cette propriété est 0.0.
• CenterY, de type double, représente la coordonnée y du point central de rotation. La valeur par défaut de cette propriété est 0.0.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

Les CenterX propriétés et CenterY spécifient le point sur lequel l’objet Path est pivoté. Ce point central est exprimé dans l’espace de coordonnées de l’objet transformé. Par défaut, la rotation est appliquée à (0,0), qui est l’angle supérieur gauche de l’objet Path .

L’exemple suivant montre comment faire pivoter un Path objet :

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <RotateTransform CenterX="0"
                         CenterY="0"
                         Angle="45" />
    </Path.RenderTransform>
</Path>

Dans cet exemple, l’objet Path est pivoté de 45 degrés sur son angle supérieur gauche.

Transformation de mise à l’échelle

Une transformation d’échelle met à l’échelle un Path objet dans le système de coordonnées 2D x-y.

La ScaleTransform classe, qui dérive de la Transform classe, définit les propriétés suivantes :

• ScaleX, de type double, qui représente le facteur d’échelle de l’axe x. La valeur par défaut de cette propriété est 1.0.
• ScaleY, de type double, qui représente le facteur d’échelle de l’axe y. La valeur par défaut de cette propriété est 1.0.
• CenterX, de type double, qui représente la coordonnée x du point central de cette transformation. La valeur par défaut de cette propriété est 0.0.
• CenterY, de type double, qui représente la coordonnée y du point central de cette transformation. La valeur par défaut de cette propriété est 0.0.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

La valeur et ScaleXScaleY l’impact énorme sur la mise à l’échelle résultante :

• Les valeurs comprises entre 0 et 1 diminuent la largeur et la hauteur de l’objet mis à l’échelle.
• Les valeurs supérieures à 1 augmentent la largeur et la hauteur de l’objet mis à l’échelle.
• Les valeurs 1 indiquent que l’objet n’est pas mis à l’échelle.
• Les valeurs négatives retournent l’objet d’échelle horizontalement et verticalement.
• Les valeurs comprises entre 0 et -1 retournent l’objet d’échelle et diminuent sa largeur et sa hauteur.
• Les valeurs inférieures à -1 retournent l’objet et augmentent sa largeur et sa hauteur.
• Les valeurs de -1 retournent l’objet mis à l’échelle, mais ne changent pas sa taille horizontale ou verticale.

Les CenterX propriétés et CenterY spécifient le point sur lequel l’objet est mis à l’échelle Path . Ce point central est exprimé dans l’espace de coordonnées de l’objet transformé. Par défaut, la mise à l’échelle est appliquée à (0,0), qui est l’angle supérieur gauche de l’objet Path . Cela a pour effet de déplacer l’objet Path et de le rendre plus grand, car lorsque vous appliquez une transformation, vous modifiez l’espace de coordonnées dans lequel réside l’objet Path .

L’exemple suivant montre comment mettre à l’échelle un Path objet :

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <ScaleTransform CenterX="0"
                        CenterY="0"
                        ScaleX="1.5"
                        ScaleY="1.5" />
    </Path.RenderTransform>
</Path>

Dans cet exemple, l’objet Path est mis à l’échelle à 1,5 fois la taille.

Transformation d’asymétrie

Une transformation d’asymétrie asymétrie un Path objet dans le système de coordonnées x-y 2D et est utile pour créer l’illusion de profondeur 3D dans un objet 2D.

La SkewTransform classe, qui dérive de la Transform classe, définit les propriétés suivantes :

• AngleX, de type double, qui représente l’angle d’asymétrie de l’axe x, qui est mesuré en degrés dans le sens inverse à partir de l’axe y. La valeur par défaut de cette propriété est 0.0.
• AngleY, de type double, qui représente l’angle d’asymétrie de l’axe y, qui est mesuré en degrés dans le sens inverse à partir de l’axe x. La valeur par défaut de cette propriété est 0.0.
• CenterX, de type double, qui représente la coordonnée x du centre de transformation. La valeur par défaut de cette propriété est 0.0.
• CenterY, de type double, qui représente la coordonnée y du centre de transformation. La valeur par défaut de cette propriété est 0.0.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

Pour prédire l’effet d’une transformation d’asymétrie, pensez à ce que AngleX les valeurs de l’axe x par rapport au système de coordonnées d’origine. Par conséquent, pour une AngleX valeur de 30, l’axe y pivote de 30 degrés à travers l’origine et fait pivoter les valeurs en x de 30 degrés de cette origine. De même, une AngleY valeur de 30 écarte les valeurs y de l’objet Path de 30 degrés à partir de l’origine.

Remarque

Pour faire pivoter un Path objet en place, définissez les CenterX propriétés sur CenterY le point central de l’objet.

L’exemple suivant montre comment asymétrie d’un Path objet :

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <SkewTransform CenterX="0"
                       CenterY="0"
                       AngleX="45"
                       AngleY="0" />
    </Path.RenderTransform>
</Path>

Dans cet exemple, une asymétrie horizontale de 45 degrés est appliquée à l’objet Path , à partir d’un point central de (0,0).

Traduire la transformation

Une transformation de traduction déplace un objet dans le système de coordonnées x-y 2D.

La TranslateTransform classe, qui dérive de la Transform classe, définit les propriétés suivantes :

• X, de type double, qui représente la distance à parcourir le long de l’axe x. La valeur par défaut de cette propriété est 0.0.
• Y, de type double, qui représente la distance à déplacer le long de l’axe y. La valeur par défaut de cette propriété est 0.0.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

Les valeurs négatives X déplacent un objet vers la gauche, tandis que les valeurs positives déplacent un objet vers la droite. Les valeurs négatives Y déplacent un objet vers le haut, tandis que les valeurs positives déplacent un objet vers le bas.

L’exemple suivant montre comment traduire un Path objet :

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <TranslateTransform X="50"
                            Y="50" />
    </Path.RenderTransform>
</Path>

Dans cet exemple, l’objet Path est déplacé 50 unités indépendantes de l’appareil à droite et 50 unités indépendantes de l’appareil vers le bas.

Transformations multiples

Xamarin.Forms a deux classes qui prennent en charge l’application de plusieurs transformations à un Path objet. Il s’agit TransformGroup, et CompositeTransform. Un TransformGroup effectue des transformations dans n’importe quel ordre souhaité, tandis qu’une CompositeTransform transformation effectue dans un ordre spécifique.

Transformer des groupes

Les groupes de transformations représentent des transformations composites composées de plusieurs Transform objets.

La TransformGroup classe, qui dérive de la Transform classe, définit une Children propriété, de type TransformCollection, qui représente une collection d’objets Transform . Cette propriété est sauvegardée par un BindableProperty objet, ce qui signifie qu’elle peut être la cible de liaisons de données et de style.

L’ordre des transformations est important dans une transformation composite qui utilise la TransformGroup classe. Par exemple, si vous faites d’abord pivoter, puis effectuez une mise à l’échelle, vous obtenez un résultat différent de celui que si vous traduisez d’abord, puis faites pivoter, puis mettez à l’échelle. Un ordre de raison est important : les transformations telles que la rotation et la mise à l’échelle sont effectuées en fonction de l’origine du système de coordonnées. La mise à l’échelle d’un objet centré à l’origine produit un résultat différent pour mettre à l’échelle un objet qui a été déplacé loin de l’origine. De même, la rotation d’un objet centré à l’origine produit un résultat différent de celui d’un objet qui a été déplacé loin de l’origine.

L’exemple suivant montre comment effectuer une transformation composite à l’aide de la TransformGroup classe :

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1.5"
                            ScaleY="1.5" />
            <RotateTransform Angle="45" />
        </TransformGroup>
    </Path.RenderTransform>
</Path>

Dans cet exemple, l’objet Path est mis à l’échelle à 1,5 fois sa taille, puis pivoté de 45 degrés.

Transformations composites

Une transformation composite applique plusieurs transformations à un objet.

La CompositeTransform classe, qui dérive de la Transform classe, définit les propriétés suivantes :

• CenterX, de type double, qui représente la coordonnée x du point central de cette transformation. La valeur par défaut de cette propriété est 0.0.
• CenterY, de type double, qui représente la coordonnée y du point central de cette transformation. La valeur par défaut de cette propriété est 0.0.
• ScaleX, de type double, qui représente le facteur d’échelle de l’axe x. La valeur par défaut de cette propriété est 1.0.
• ScaleY, de type double, qui représente le facteur d’échelle de l’axe y. La valeur par défaut de cette propriété est 1.0.
• SkewX, de type double, qui représente l’angle d’asymétrie de l’axe x, qui est mesuré en degrés dans le sens inverse à partir de l’axe y. La valeur par défaut de cette propriété est 0.0.
• SkewY, de type double, qui représente l’angle d’asymétrie de l’axe y, qui est mesuré en degrés dans le sens inverse à partir de l’axe x. La valeur par défaut de cette propriété est 0.0.
• Rotation, de type double, représente l’angle, en degrés, de rotation au niveau des aiguilles d’une montre. La valeur par défaut de cette propriété est 0.0.
• TranslateX, de type double, qui représente la distance à parcourir le long de l’axe x. La valeur par défaut de cette propriété est 0.0.
• TranslateY, de type double, qui représente la distance à déplacer le long de l’axe y. La valeur par défaut de cette propriété est 0.0.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

Une CompositeTransform transformation s’applique dans cet ordre :

1. Mettre à l’échelle (ScaleX et ScaleY).
2. Asymétrie (SkewX et SkewY).
3. Faire pivoter (Rotation).
4. Traduire (TranslateX, TranslateY).

Si vous souhaitez appliquer plusieurs transformations à un objet dans un ordre différent, vous devez créer et TransformGroup insérer les transformations dans votre ordre prévu.

Important

A CompositeTransform utilise les mêmes points centraux et CenterXCenterY, pour toutes les transformations. Si vous souhaitez spécifier différents points centraux par transformation, utilisez un TransformGroup,

L’exemple suivant montre comment effectuer une transformation composite à l’aide de la CompositeTransform classe :

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <CompositeTransform ScaleX="1.5"
                            ScaleY="1.5"
                            Rotation="45"
                            TranslateX="50"
                            TranslateY="50" />
    </Path.RenderTransform>
</Path>

Dans cet exemple, l’objet Path est mis à l’échelle à 1,5 fois sa taille, puis pivoté de 45 degrés, puis traduit par 50 unités indépendantes de l’appareil.

Matrice de transformation

Une transformation peut être décrite en termes de matrice de transformation affine 3x3, qui effectue des transformations dans l’espace 2D. Cette matrice 3x3 est représentée par le Matrix struct, qui est une collection de trois lignes et trois colonnes de double valeurs.

Le Matrix struct définit les propriétés suivantes :

• Determinant, de type double, qui obtient le déterminant de la matrice.
• HasInverse, de type bool, qui indique si la matrice est inversée.
• Identity, de type Matrix, qui obtient une matrice d’identité.
• HasIdentity, de type bool, qui indique si la matrice est une matrice d’identité.
• M11, de type double, qui représente la valeur de la première ligne et de la première colonne de la matrice.
• M12, de type double, qui représente la valeur de la première ligne et de la deuxième colonne de la matrice.
• M21, de type double, qui représente la valeur de la deuxième ligne et de la première colonne de la matrice.
• M22, de type double, qui représente la valeur de la deuxième ligne et de la deuxième colonne de la matrice.
• OffsetX, de type double, qui représente la valeur de la troisième ligne et de la première colonne de la matrice.
• OffsetY, de type double, qui représente la valeur de la troisième ligne et de la deuxième colonne de la matrice.

Les OffsetX propriétés et OffsetY les propriétés sont ainsi nommées, car elles spécifient la quantité pour traduire l’espace de coordonnées le long de l’axe x et de l’axe y, respectivement.

En outre, le Matrix struct expose une série de méthodes qui peuvent être utilisées pour manipuler les valeurs de matrice, notamment Append, , InvertMultiply, et Prepend bien plus encore.

Le tableau suivant montre la structure d’une Xamarin.Forms matrice :

M11

M12

0.0

M21

M22

0.0

OffsetX

OffsetY

1.0

Remarque

Une matrice de transformation affine a sa colonne finale égale à (0,0,1), donc seuls les membres des deux premières colonnes doivent être spécifiés.

En manipulant des valeurs de matrice, vous pouvez faire pivoter, mettre à l’échelle, asymétrie et traduire des Path objets. Par exemple, si vous remplacez la OffsetX valeur par 100, vous pouvez l’utiliser pour déplacer un Path objet 100 unités indépendantes de l’appareil le long de l’axe x. Si vous remplacez la M22 valeur par 3, vous pouvez l’utiliser pour étirer un Path objet à trois fois sa hauteur actuelle. Si vous modifiez les deux valeurs, vous déplacez l’objet Path 100 unités indépendantes de l’appareil le long de l’axe x et étirez sa hauteur d’un facteur de 3. En outre, les matrices de transformation affine peuvent être multipliées pour former n’importe quel nombre de transformations linéaires, telles que la rotation et l’asymétrie, suivies de la traduction.

Transformations personnalisées

La MatrixTransform classe, qui dérive de la Transform classe, définit une Matrix propriété, de type Matrix, qui représente la matrice qui définit la transformation. Cette propriété est sauvegardée par un BindableProperty objet, ce qui signifie qu’elle peut être la cible de liaisons de données et de style.

Toute transformation que vous pouvez décrire avec un objet ou RotateTransformSkewTransform un TranslateTransformobjet ScaleTransformpeut également être décrite par un MatrixTransform. Toutefois, les classes , ScaleTransformet RotateTransformSkewTransform les TranslateTransformclasses sont plus faciles à conceptualiser que de définir les composants vectoriels dans un Matrix. Par conséquent, la MatrixTransform classe est généralement utilisée pour créer des transformations personnalisées qui ne sont pas fournies par les classes, ScaleTransformSkewTransformou TranslateTransform les RotateTransformclasses.

L’exemple suivant montre comment transformer un Path objet à l’aide d’un MatrixTransform:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <MatrixTransform>
            <MatrixTransform.Matrix>
                <!-- M11 stretches, M12 skews -->
                <Matrix OffsetX="10"
                        OffsetY="100"
                        M11="1.5"
                        M12="1" />
            </MatrixTransform.Matrix>
        </MatrixTransform>
    </Path.RenderTransform>
</Path>

Dans cet exemple, l’objet Path est étiré, asymétrique et décalé dans les dimensions X et Y.

Vous pouvez également écrire ceci dans un formulaire simplifié qui utilise un convertisseur de type intégré à Xamarin.Forms:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <MatrixTransform Matrix="1.5,1,0,1,10,100" />
    </Path.RenderTransform>
</Path>

Dans cet exemple, la Matrix propriété est spécifiée sous la forme d’une chaîne délimitée par des virgules composée de six membres : M11, M12, , M21, M22, OffsetX, OffsetY. Bien que les membres soient délimités par des virgules dans cet exemple, ils peuvent également être délimités par un ou plusieurs espaces.

En outre, l’exemple précédent peut être simplifié encore plus en spécifiant les six mêmes membres que la valeur de la RenderTransform propriété :

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      RenderTransform="1.5 1 0 1 10 100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z" />

Liens connexes

• Xamarin.Forms Formes