Xamarin.Forms Formas: Transformações de caminho
Um Transform
define como transformar um objeto de um Path
espaço de coordenadas para outro espaço de coordenadas. Quando uma transformação é aplicada a um Path
objeto , ela altera 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 tradução. Xamarin.Forms define uma classe para cada uma dessas classificações de transformação:
RotateTransform
, que gira umPath
por um especificadoAngle
.ScaleTransform
, que dimensiona umPath
objeto por quantidades especificadasScaleX
eScaleY
.SkewTransform
, que distorce umPath
objeto por quantidades especificadasAngleX
eAngleY
.TranslateTransform
, que move umPath
objeto por valores especificadosX
eY
.
Xamarin.Forms também fornece as seguintes classes para criar transformações mais complexas:
TransformGroup
, que representa uma transformação composta composta por vários objetos de transformação.CompositeTransform
, que aplica várias operações de transformação a umPath
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 ele pode ser o destino das associações de dados e estilizado. Para obter mais informações sobre o Matrix
struct, consulte Matriz de transformação.
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 sobre um ponto especificado em um sistema de coordenadas x-y 2D.
A RotateTransform
classe , que deriva da Transform
classe , define as seguintes propriedades:
Angle
, do tipodouble
, representa o ângulo, em graus, da rotação no sentido horário. O valor padrão dessa propriedade é 0,0.CenterX
, do tipodouble
, representa a coordenada x do ponto central de rotação. O valor padrão dessa propriedade é 0,0.CenterY
, do tipodouble
, representa a coordenada y do ponto central de rotação. O valor padrão dessa propriedade é 0,0.
Essas propriedades são apoiadas por BindableProperty
objetos, o que significa que elas podem ser destinos de associações de dados e estilizadas.
As CenterX
propriedades e CenterY
especificam o ponto sobre o 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 Path
objeto é girado 45 graus sobre 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 tipodouble
, que representa o fator de escala do eixo x. O valor padrão dessa propriedade é 1.0.ScaleY
, do tipodouble
, que representa o fator de escala do eixo y. O valor padrão dessa propriedade é 1.0.CenterX
, do tipodouble
, que representa a coordenada x do ponto central dessa transformação. O valor padrão dessa propriedade é 0,0.CenterY
, do tipodouble
, que representa a coordenada y do ponto central dessa transformação. O valor padrão dessa propriedade é 0,0.
Essas propriedades são apoiadas por BindableProperty
objetos, o que significa que elas podem ser destinos de associações de dados e estilizadas.
O valor de ScaleX
e ScaleY
tem um enorme impacto no dimensionamento resultante:
- Os 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.
- Os valores de 1 indicam que o objeto não é dimensionado.
- Valores negativos inverter o objeto de escala horizontal e verticalmente.
- Os valores entre 0 e -1 inverter o objeto de escala e diminuir sua largura e altura.
- Valores menores que -1 inverter o objeto e aumentar sua largura e altura.
- Os 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 torná-lo maior, pois quando você aplica uma transformação, 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 Path
objeto é dimensionado para 1,5 vezes o tamanho.
Transformação de distorção
Uma transformação de distorção distorce um Path
objeto no sistema de coordenadas x-y 2D 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 tipodouble
, que representa o ângulo de distorção do eixo x, que é medido em graus no sentido anti-horário do eixo y. O valor padrão dessa propriedade é 0,0.AngleY
, do tipodouble
, que representa o ângulo de distorção do eixo y, que é medido em graus no sentido anti-horário do eixo x. O valor padrão dessa propriedade é 0,0.CenterX
, do tipodouble
, que representa a coordenada x do centro de transformação. O valor padrão dessa propriedade é 0,0.CenterY
, do tipodouble
, que representa a coordenada y do centro de transformação. O valor padrão dessa propriedade é 0,0.
Essas propriedades são apoiadas por BindableProperty
objetos, o que significa que elas podem ser destinos de associações de dados e estilizadas.
Para prever o efeito de uma transformação de distorçã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 da origem.
Observação
Para distorcer um Path
objeto no local, defina as CenterX
propriedades e CenterY
como o ponto central do objeto.
O exemplo a seguir mostra como distorcer 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 distorçã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 traduçã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 tipodouble
, que representa a distância a ser movida ao longo do eixo x. O valor padrão dessa propriedade é 0,0.Y
, do tipodouble
, que representa a distância a ser movida ao longo do eixo y. O valor padrão dessa propriedade é 0,0.
Essas propriedades são apoiadas por BindableProperty
objetos, o que significa que elas podem ser destinos de associações de dados e estilizadas.
Valores negativos X
movem um objeto para a esquerda, enquanto os valores positivos movem um objeto para a direita. Valores negativos Y
movem um objeto para cima, enquanto os valores positivos movem um objeto para baixo.
O exemplo a seguir mostra como traduzir 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 do dispositivo para a direita e 50 unidades independentes do 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
. Um TransformGroup
executa transformações em qualquer ordem desejada, enquanto um CompositeTransform
executa transformações em uma ordem específica.
Transformar grupos
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 ele pode ser o destino das associações de dados e estilizado.
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. Um motivo pelo qual a ordem é significativa é que transformações como rotação e dimensionamento são executadas em relação à origem do sistema de coordenadas. O dimensionamento de um objeto centralizado na origem produz um resultado diferente para dimensionar 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 Path
objeto é dimensionado para 1,5 vezes o tamanho e 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 tipodouble
, que representa a coordenada x do ponto central dessa transformação. O valor padrão dessa propriedade é 0,0.CenterY
, do tipodouble
, que representa a coordenada y do ponto central dessa transformação. O valor padrão dessa propriedade é 0,0.ScaleX
, do tipodouble
, que representa o fator de escala do eixo x. O valor padrão dessa propriedade é 1.0.ScaleY
, do tipodouble
, que representa o fator de escala do eixo y. O valor padrão dessa propriedade é 1.0.SkewX
, do tipodouble
, que representa o ângulo de distorção do eixo x, que é medido em graus no sentido anti-horário do eixo y. O valor padrão dessa propriedade é 0,0.SkewY
, do tipodouble
, que representa o ângulo de distorção do eixo y, que é medido em graus no sentido anti-horário do eixo x. O valor padrão dessa propriedade é 0,0.Rotation
, do tipodouble
, representa o ângulo, em graus, da rotação no sentido horário. O valor padrão dessa propriedade é 0,0.TranslateX
, do tipodouble
, que representa a distância a ser movida ao longo do eixo x. O valor padrão dessa propriedade é 0,0.TranslateY
, do tipodouble
, que representa a distância a ser movida ao longo do eixo y. O valor padrão dessa propriedade é 0,0.
Essas propriedades são apoiadas por BindableProperty
objetos, o que significa que elas podem ser destinos de associações de dados e estilizadas.
Um CompositeTransform
aplica transformações nesta ordem:
- Escala (
ScaleX
eScaleY
). - Distorção (
SkewX
eSkewY
). - Girar (
Rotation
). - 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 em sua ordem pretendida.
Importante
Um CompositeTransform
usa os mesmos pontos de CenterX
centro e CenterY
, para todas as transformações. Se você quiser especificar pontos de centro diferentes 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 Path
objeto é dimensionado para 1,5 vezes o tamanho, girado em 45 graus e traduzido por 50 unidades independentes do dispositivo.
Matriz de transformação
Uma transformação pode ser descrita em termos de uma matriz de transformação de affine 3x3, que executa 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 tipodouble
, que obtém o determinante da matriz.HasInverse
, do tipobool
, que indica se a matriz é inverterível.Identity
, do tipoMatrix
, que obtém uma matriz de identidade.HasIdentity
, do tipobool
, que indica se a matriz é uma matriz de identidade.M11
, do tipodouble
, que representa o valor da primeira linha e da primeira coluna da matriz.M12
, do tipodouble
, que representa o valor da primeira linha e da segunda coluna da matriz.M21
, do tipodouble
, que representa o valor da segunda linha e da primeira coluna da matriz.M22
, do tipodouble
, que representa o valor da segunda linha e da segunda coluna da matriz.OffsetX
, do tipodouble
, que representa o valor da terceira linha e da primeira coluna da matriz.OffsetY
, do tipodouble
, que representa o valor da terceira linha e da segunda coluna da matriz.
As OffsetX
propriedades e OffsetY
são tão nomeadas porque especificam a quantidade para traduzir 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 de matriz, incluindo Append
, Invert
, Multiply
e Prepend
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 affine tem sua coluna final igual a (0,0,1), portanto, somente os membros nas duas primeiras colunas precisam ser especificados.
Manipulando valores de matriz, você pode girar, dimensionar, distorcer e traduzir Path
objetos. Por exemplo, se você alterar o OffsetX
valor para 100, poderá usá-lo para mover um Path
objeto 100 unidades independentes do 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, mova o Path
objeto 100 unidades independentes do dispositivo ao longo do eixo x e estique sua altura por um fator de 3. Além disso, as matrizes de transformação affine podem ser multiplicadas para formar qualquer número de transformações lineares, como rotação e distorção, seguidas de traduçã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 ele pode ser o destino das associações de dados e estilizado.
Qualquer transformação que você possa descrever com um TranslateTransform
objeto , ScaleTransform
, RotateTransform
ou SkewTransform
pode ser igualmente descrita por um MatrixTransform
. No entanto, as TranslateTransform
classes , 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 RotateTransform
classes , ScaleTransform
, SkewTransform
ou 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 é estendido, distorcido e deslocado nas dimensões X e Y.
Como alternativa, isso pode ser escrito em um formulário simplificado que usa um conversor de tipo integrado a 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 Matrix
propriedade é especificada como uma cadeia de caracteres delimitada por vírgulas que consiste em seis membros: M11
, , M12
, M21
, M22
, OffsetX
, OffsetY
. Embora os membros sejam delimitados por vírgulas 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" />