Partilhar via

Xamarin.Forms Formas: Transformações de caminho

  • Artigo

A Transform define como transformar um Path objeto de um espaço de coordenadas para outro espaço de coordenadas. Quando uma transformação é aplicada a um Path objeto, ela altera a forma como o objeto é renderizado na interface do usuário.

As transformações podem ser categorizadas em quatro classificações gerais: rotação, dimensionamento, distorção e translação. Xamarin.Forms define uma classe para cada uma dessas classificações de transformação:

  • RotateTransform, que gira a por Path um Angle.
  • ScaleTransform, que dimensiona um Path objeto por quantidades e especificadas ScaleX ScaleY .
  • SkewTransform, que distorce um Path objeto por quantidades especificadas AngleX e AngleY .
  • TranslateTransform, que move um Path objeto por especificado X e Y quantidades.

Xamarin.Forms O também fornece as seguintes classes para criar transformações mais complexas:

  • TransformGroup, que representa uma transformação composta por vários objetos de transformação.
  • CompositeTransform, que aplica várias operações de transformação a um Path objeto.
  • MatrixTransform, que cria transformações personalizadas que não são fornecidas pelas outras classes de transformação.

Todas essas classes derivam da Transform classe, que define uma Value propriedade do tipo Matrix, que representa a transformação atual como um Matrix objeto. Essa propriedade é apoiada por um BindableProperty objeto, o que significa que ela pode ser o destino de associações de dados e estilizada. Para obter mais informações sobre o Matrix struct, consulte Transformar matriz.

Para aplicar uma transformação a um Path, crie uma classe de transformação e defina-a Path.RenderTransform como o valor da propriedade.

Transformação de rotação

Uma transformação de rotação gira um Path objeto no sentido horário em torno de um ponto especificado em um sistema de coordenadas 2D x-y.

A RotateTransform classe, que deriva da Transform classe, define as seguintes propriedades:

  • Angle, do tipo double, representa o ângulo, em graus, de rotação no sentido horário. O valor padrão desta propriedade é 0.0.
  • CenterX, do tipo double, representa a coordenada x do ponto central de rotação. O valor padrão desta propriedade é 0.0.
  • CenterY, do tipo double, representa a coordenada y do ponto central de rotação. O valor padrão desta propriedade é 0.0.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

As CenterX propriedades e CenterY especificam o ponto em torno do qual o Path objeto é girado. Esse ponto central é expresso no espaço de coordenadas do objeto que é transformado. Por padrão, a rotação é aplicada a (0,0), que é o canto superior esquerdo do Path objeto.

O exemplo a seguir mostra como girar um Path objeto:

<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>

Neste exemplo, o objeto é girado Path 45 graus em torno de seu canto superior esquerdo.

Transformação de escala

Uma transformação de escala dimensiona um Path objeto no sistema de coordenadas x-y 2D.

A ScaleTransform classe, que deriva da Transform classe, define as seguintes propriedades:

  • ScaleX, do tipo double, que representa o fator de escala do eixo x. O valor padrão desta propriedade é 1.0.
  • ScaleY, do tipo double, que representa o fator de escala do eixo y. O valor padrão desta propriedade é 1.0.
  • CenterX, do tipo double, que representa a coordenada x do ponto central dessa transformação. O valor padrão desta propriedade é 0.0.
  • CenterY, do tipo double, que representa a coordenada y do ponto central dessa transformação. O valor padrão desta propriedade é 0.0.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

O valor e ScaleX ScaleY têm um enorme impacto no dimensionamento resultante:

  • Valores entre 0 e 1 diminuem a largura e a altura do objeto dimensionado.
  • Valores maiores que 1 aumentam a largura e a altura do objeto dimensionado.
  • Valores de 1 indicam que o objeto não está dimensionado.
  • Valores negativos invertem o objeto de escala horizontal e verticalmente.
  • Valores entre 0 e -1 invertem o objeto de escala e diminuem sua largura e altura.
  • Valores menores que -1 invertem o objeto e aumentam sua largura e altura.
  • Valores de -1 invertem o objeto dimensionado, mas não alteram seu tamanho horizontal ou vertical.

As CenterX propriedades e CenterY especificam o ponto sobre o qual o Path objeto é dimensionado. Esse ponto central é expresso no espaço de coordenadas do objeto que é transformado. Por padrão, o dimensionamento é aplicado a (0,0), que é o canto superior esquerdo do Path objeto. Isso tem o efeito de mover o Path objeto e fazê-lo parecer maior, porque quando você aplica uma transformação, você altera o espaço de coordenadas no qual o Path objeto reside.

O exemplo a seguir mostra como dimensionar um Path objeto:

<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>

Neste exemplo, o objeto é dimensionado Path para 1,5 vezes o tamanho.

Transformação de inclinação

Uma transformação de inclinação inclina um Path objeto no sistema de coordenadas 2D x-y e é útil para criar a ilusão de profundidade 3D em um objeto 2D.

A SkewTransform classe, que deriva da Transform classe, define as seguintes propriedades:

  • AngleX, do tipo double, que representa o ângulo de inclinação do eixo x, que é medido em graus no sentido anti-horário a partir do eixo y. O valor padrão desta propriedade é 0.0.
  • AngleY, do tipo double, que representa o ângulo de inclinação do eixo y, que é medido em graus no sentido anti-horário a partir do eixo x. O valor padrão desta propriedade é 0.0.
  • CenterX, do tipo double, que representa a coordenada x do centro de transformação. O valor padrão desta propriedade é 0.0.
  • CenterY, do tipo double, que representa a coordenada y do centro de transformação. O valor padrão desta propriedade é 0.0.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

Para prever o efeito de uma transformação de inclinação, considere que AngleX distorce os valores do eixo x em relação ao sistema de coordenadas original. Portanto, para um AngleX de 30, o eixo y gira 30 graus através da origem e distorce os valores em x em 30 graus a partir dessa origem. Da mesma forma, um AngleY de 30 distorce os valores y do Path objeto em 30 graus a partir da origem.

Observação

Para inclinar um Path objeto no local, defina as CenterX propriedades e CenterY como o ponto central do objeto.

O exemplo a seguir mostra como inclinar um Path objeto:

<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>

Neste exemplo, uma inclinação horizontal de 45 graus é aplicada ao Path objeto, a partir de um ponto central de (0,0).

Traduzir transformação

Uma transformação de translação move um objeto no sistema de coordenadas x-y 2D.

A TranslateTransform classe, que deriva da Transform classe, define as seguintes propriedades:

  • X, do tipo double, que representa a distância a ser percorrida ao longo do eixo x. O valor padrão desta propriedade é 0.0.
  • Y, do tipo double, que representa a distância a ser percorrida ao longo do eixo y. O valor padrão desta propriedade é 0.0.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

Os valores negativos X movem um objeto para a esquerda, enquanto os valores positivos movem um objeto para a direita. Os valores negativos Y movem um objeto para cima, enquanto os valores positivos movem um objeto para baixo.

O exemplo a seguir mostra como converter um Path objeto:

<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>

Neste exemplo, o Path objeto é movido 50 unidades independentes de dispositivo para a direita e 50 unidades independentes de dispositivo para baixo.

Várias transformações

Xamarin.Forms tem duas classes que dão suporte à aplicação de várias transformações a um Path objeto. Estes são TransformGroup, e CompositeTransform. A TransformGroup executa transformações em qualquer ordem desejada, enquanto a CompositeTransform executa transformações em uma ordem específica.

Grupos de transformação

Os grupos de transformação representam transformações compostas compostas por vários Transform objetos.

A TransformGroup classe, que deriva da Transform classe, define uma Children propriedade, do tipo TransformCollection, que representa uma coleção de Transform objetos. Essa propriedade é apoiada por um BindableProperty objeto, o que significa que ela pode ser o destino de associações de dados e estilizada.

A ordem das transformações é importante em uma transformação composta que usa a TransformGroup classe. Por exemplo, girar, ajustar a escala e mover terá um resultado diferente de mover, girar e ajustar a escala. Uma razão pela qual a ordem é significativa é que transformações como rotação e dimensionamento são executadas em relação à origem do sistema de coordenadas. Dimensionar um objeto centralizado na origem produz um resultado diferente do dimensionamento de um objeto que foi movido para longe da origem. Da mesma forma, girar um objeto centralizado na origem produz um resultado diferente de girar um objeto movido para fora da origem.

O exemplo a seguir mostra como executar uma transformação composta usando a 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>

Neste exemplo, o objeto é dimensionado Path para 1,5 vezes seu tamanho e, em seguida, girado em 45 graus.

Transformações compostas

Uma transformação composta aplica várias transformações a um objeto.

A CompositeTransform classe, que deriva da Transform classe, define as seguintes propriedades:

  • CenterX, do tipo double, que representa a coordenada x do ponto central dessa transformação. O valor padrão desta propriedade é 0.0.
  • CenterY, do tipo double, que representa a coordenada y do ponto central dessa transformação. O valor padrão desta propriedade é 0.0.
  • ScaleX, do tipo double, que representa o fator de escala do eixo x. O valor padrão desta propriedade é 1.0.
  • ScaleY, do tipo double, que representa o fator de escala do eixo y. O valor padrão desta propriedade é 1.0.
  • SkewX, do tipo double, que representa o ângulo de inclinação do eixo x, que é medido em graus no sentido anti-horário a partir do eixo y. O valor padrão desta propriedade é 0.0.
  • SkewY, do tipo double, que representa o ângulo de inclinação do eixo y, que é medido em graus no sentido anti-horário a partir do eixo x. O valor padrão desta propriedade é 0.0.
  • Rotation, do tipo double, representa o ângulo, em graus, de rotação no sentido horário. O valor padrão desta propriedade é 0.0.
  • TranslateX, do tipo double, que representa a distância a ser percorrida ao longo do eixo x. O valor padrão desta propriedade é 0.0.
  • TranslateY, do tipo double, que representa a distância a ser percorrida ao longo do eixo y. O valor padrão desta propriedade é 0.0.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

A CompositeTransform aplica transformações nesta ordem:

  1. Escala (ScaleX e ScaleY).
  2. Inclinar (SkewX e SkewY).
  3. Girar (Rotation).
  4. Traduzir (TranslateX, TranslateY).

Se você quiser aplicar várias transformações a um objeto em uma ordem diferente, crie um TransformGroup e insira as transformações na ordem pretendida.

Importante

A CompositeTransform usa os mesmos pontos CenterX centrais e CenterY, para todas as transformações. Se você quiser especificar diferentes pontos centrais por transformação, use um TransformGroup,

O exemplo a seguir mostra como executar uma transformação composta usando a 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>

Neste exemplo, o objeto é dimensionado Path para 1,5 vezes seu tamanho, depois girado em 45 graus e convertido em 50 unidades independentes de dispositivo.

Matriz de transformação

Uma transformação pode ser descrita em termos de uma matriz de transformação afim 3x3, que realiza transformações no espaço 2D. Essa matriz 3x3 é representada pelo Matrix struct, que é uma coleção de três linhas e três colunas de double valores.

O Matrix struct define as seguintes propriedades:

  • Determinant, do tipo double, que obtém o determinante da matriz.
  • HasInverse, do tipo bool, que indica se a matriz é invertível.
  • Identity, do tipo Matrix, que obtém uma matriz de identidade.
  • HasIdentity, do tipo bool, que indica se a matriz é uma matriz de identidade.
  • M11, do tipo double, que representa o valor da primeira linha e da primeira coluna da matriz.
  • M12, do tipo double, que representa o valor da primeira linha e da segunda coluna da matriz.
  • M21, do tipo double, que representa o valor da segunda linha e da primeira coluna da matriz.
  • M22, do tipo double, que representa o valor da segunda linha e da segunda coluna da matriz.
  • OffsetX, do tipo double, que representa o valor da terceira linha e da primeira coluna da matriz.
  • OffsetY, do tipo double, que representa o valor da terceira linha e da segunda coluna da matriz.

As OffsetX propriedades and OffsetY são assim chamadas porque especificam a quantidade para translamar o espaço de coordenadas ao longo do eixo x e do eixo y, respectivamente.

Além disso, o Matrix struct expõe uma série de métodos que podem ser usados para manipular os valores da matriz, incluindo Append, Invert, Multiply, Prepend e muitos mais.

A tabela a seguir mostra a estrutura de uma Xamarin.Forms matriz:

M11

M12

0,0

M21

M22

0,0

OffsetX

OffsetY

1.0

Observação

Uma matriz de transformação afim tem sua coluna final igual a (0,0,1), portanto, somente os membros nas duas primeiras colunas precisam ser especificados.

Ao manipular valores de matriz, você pode girar, dimensionar, inclinar e converter Path objetos. Por exemplo, se você alterar o OffsetX valor para 100, poderá usá-lo para mover um Path objeto 100 unidades independentes de dispositivo ao longo do eixo x. Se você alterar o M22 valor para 3, poderá usá-lo para esticar um Path objeto para três vezes sua altura atual. Se você alterar os dois valores, moverá o Path objeto 100 unidades independentes do dispositivo ao longo do eixo x e esticará sua altura por um fator de 3. Além disso, as matrizes de transformação afim podem ser multiplicadas para formar qualquer número de transformações lineares, como rotação e inclinação, seguidas de translação.

Transformações personalizadas

A MatrixTransform classe, que deriva da Transform classe, define uma Matrix propriedade, do tipo Matrix, que representa a matriz que define a transformação. Essa propriedade é apoiada por um BindableProperty objeto, o que significa que ela pode ser o destino de associações de dados e estilizada.

Qualquer transformação que você possa descrever com um TranslateTransformobjeto , ScaleTransform, RotateTransform, ou SkewTransform pode igualmente ser descrita por um MatrixTransform. No entanto, as TranslateTransformclasses , ScaleTransform, RotateTransform, e SkewTransform são mais fáceis de conceituar do que definir os componentes vetoriais em um Matrix. Portanto, a MatrixTransform classe normalmente é usada para criar transformações personalizadas que não são fornecidas pelas RotateTransformclasses , ScaleTransform, SkewTransform, or TranslateTransform .

O exemplo a seguir mostra como transformar um Path objeto usando um 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>

Neste exemplo, o Path objeto é esticado, inclinado e deslocado nas dimensões X e Y.

Como alternativa, isso pode ser escrito em uma forma simplificada que usa um conversor de tipo integrado em 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>

Neste exemplo, a propriedade é especificada como uma cadeia de caracteres delimitada por vírgulas Matrix que consiste em seis membros: M11, M12, M21, M22, OffsetX, OffsetY, . Embora os membros sejam delimitados por vírgula neste exemplo, eles também podem ser delimitados por um ou mais espaços.

Além disso, o exemplo anterior pode ser simplificado ainda mais especificando os mesmos seis membros que o valor da RenderTransform propriedade:

<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" />