Xamarin.Forms Bentuk: Transformasi jalur
Transform
menentukan cara mengubah Path
objek dari satu ruang koordinat ke ruang koordinat lain. Saat transformasi diterapkan ke Path
objek, itu mengubah cara objek dirender di UI.
Transformasi dapat dikategorikan menjadi empat klasifikasi umum: rotasi, penskalaan, condong, dan terjemahan. Xamarin.Forms mendefinisikan kelas untuk masing-masing klasifikasi transformasi ini:
RotateTransform
, yang memutarPath
dengan yang ditentukanAngle
.ScaleTransform
, yang menskalakanPath
objek berdasarkan yang ditentukanScaleX
danScaleY
jumlahnya.SkewTransform
, yang condong objekPath
berdasarkan yang ditentukanAngleX
danAngleY
jumlahnya.TranslateTransform
, yang memindahkanPath
objek menurut yang ditentukanX
danY
jumlahnya.
Xamarin.Forms juga menyediakan kelas berikut untuk membuat transformasi yang lebih kompleks:
TransformGroup
, yang mewakili transformasi komposit yang terdiri dari beberapa objek transformasi.CompositeTransform
, yang menerapkan beberapa operasi transformasi kePath
objek.MatrixTransform
, yang membuat transformasi kustom yang tidak disediakan oleh kelas transformasi lainnya.
Semua kelas ini berasal dari Transform
kelas , yang mendefinisikan Value
properti jenis Matrix
, yang mewakili transformasi saat ini sebagai Matrix
objek. Properti ini didukung oleh BindableProperty
objek, yang berarti dapat menjadi target pengikatan data, dan ditata. Untuk informasi selengkapnya tentang Matrix
struktur, lihat Mengubah matriks.
Untuk menerapkan transformasi ke Path
, Anda membuat kelas transformasi dan mengaturnya sebagai nilai Path.RenderTransform
properti.
Transformasi rotasi
Transformasi putar memutar objek searah Path
jarang tentang titik tertentu dalam sistem koordinat 2D x-y.
Kelas RotateTransform
, yang berasal dari Transform
kelas , mendefinisikan properti berikut:
Angle
, dari jenisdouble
, mewakili sudut, dalam derajat, rotasi searah jarum jam. Nilai default properti ini adalah 0,0.CenterX
, dari jenisdouble
, mewakili koordinat x dari titik pusat rotasi. Nilai default properti ini adalah 0,0.CenterY
, dari jenisdouble
, mewakili koordinat y dari titik pusat rotasi. Nilai default properti ini adalah 0,0.
Properti ini didukung oleh BindableProperty
objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.
Properti CenterX
dan CenterY
menentukan titik di mana objek diputar Path
. Titik tengah ini dinyatakan dalam ruang koordinat objek yang diubah. Secara default, rotasi diterapkan ke (0,0), yang merupakan sudut Path
kiri atas objek.
Contoh berikut menunjukkan cara memutar Path
objek:
<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>
Dalam contoh ini, objek diputar Path
45 derajat tentang sudut kiri atasnya.
Transformasi skala
Transformasi skala menskalakan Path
objek dalam sistem koordinat 2D x-y.
Kelas ScaleTransform
, yang berasal dari Transform
kelas , mendefinisikan properti berikut:
ScaleX
, dari jenisdouble
, yang mewakili faktor skala sumbu x. Nilai default properti ini adalah 1,0.ScaleY
, dari jenisdouble
, yang mewakili faktor skala sumbu y. Nilai default properti ini adalah 1,0.CenterX
, dari jenisdouble
, yang mewakili koordinat x dari titik tengah transformasi ini. Nilai default properti ini adalah 0,0.CenterY
, dari jenisdouble
, yang mewakili koordinat y dari titik tengah transformasi ini. Nilai default properti ini adalah 0,0.
Properti ini didukung oleh BindableProperty
objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.
Nilai ScaleX
dan ScaleY
memiliki dampak besar pada penskalaan yang dihasilkan:
- Nilai antara 0 dan 1 mengurangi lebar dan tinggi objek berskala.
- Nilai yang lebih besar dari 1 meningkatkan lebar dan tinggi objek berskala.
- Nilai 1 menunjukkan bahwa objek tidak diskalakan.
- Nilai negatif membalik objek skala secara horizontal dan vertikal.
- Nilai antara 0 dan -1 membalik objek skala dan mengurangi lebar dan tingginya.
- Nilai kurang dari -1 membalik objek dan meningkatkan lebar dan tingginya.
- Nilai -1 membalik objek berskala tetapi tidak mengubah ukuran horizontal atau vertikalnya.
Properti CenterX
dan CenterY
menentukan titik tempat objek diskalakan Path
. Titik tengah ini dinyatakan dalam ruang koordinat objek yang diubah. Secara default, penskalaan diterapkan ke (0,0), yang merupakan sudut Path
kiri atas objek. Ini memiliki efek memindahkan Path
objek dan membuatnya tampak lebih besar, karena ketika Anda menerapkan transformasi, Anda mengubah ruang koordinat tempat Path
objek berada.
Contoh berikut menunjukkan cara menskalakan Path
objek:
<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>
Dalam contoh ini, Path
objek diskalakan hingga 1,5 kali ukurannya.
Transformasi condong
Transformasi condong condong membuat Path
objek dalam sistem koordinat 2D x-y, dan berguna untuk membuat ilusi kedalaman 3D dalam objek 2D.
Kelas SkewTransform
, yang berasal dari Transform
kelas , mendefinisikan properti berikut:
AngleX
, dari jenisdouble
, yang mewakili sudut miring sumbu x, yang diukur dalam derajat berlawanan arah jarum jam dari sumbu y. Nilai default properti ini adalah 0,0.AngleY
, dari jenisdouble
, yang mewakili sudut miring sumbu y, yang diukur dalam derajat berlawanan arah jarum jam dari sumbu x. Nilai default properti ini adalah 0,0.CenterX
, dari jenisdouble
, yang mewakili koordinat x pusat transformasi. Nilai default properti ini adalah 0,0.CenterY
, dari jenisdouble
, yang mewakili koordinat y dari pusat transformasi. Nilai default properti ini adalah 0,0.
Properti ini didukung oleh BindableProperty
objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.
Untuk memprediksi efek transformasi condong, pertimbangkan bahwa AngleX
condongkan nilai sumbu x relatif terhadap sistem koordinat asli. Oleh karena itu, untuk AngleX
30, sumbu y memutar 30 derajat melalui asal dan condong nilai dalam x sebesar 30 derajat dari asal tersebut. Demikian pula, AngleY
dari 30 condong nilai Path
y objek sebesar 30 derajat dari asal.
Catatan
Untuk membuat condong Path
objek di tempat, atur CenterX
properti dan CenterY
ke titik tengah objek.
Contoh berikut menunjukkan cara membuat condong Path
objek:
<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>
Dalam contoh ini, condong horizontal 45 derajat diterapkan ke Path
objek, dari titik tengah (0,0).
Menerjemahkan transformasi
Transformasi terjemahan memindahkan objek dalam sistem koordinat 2D x-y.
Kelas TranslateTransform
, yang berasal dari Transform
kelas , mendefinisikan properti berikut:
X
, dari jenisdouble
, yang mewakili jarak untuk bergerak di sepanjang sumbu x. Nilai default properti ini adalah 0,0.Y
, dari jenisdouble
, yang mewakili jarak untuk bergerak di sepanjang sumbu y. Nilai default properti ini adalah 0,0.
Properti ini didukung oleh BindableProperty
objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.
Nilai negatif X
memindahkan objek ke kiri, sementara nilai positif memindahkan objek ke kanan. Nilai negatif Y
memindahkan objek ke atas, sementara nilai positif memindahkan objek ke bawah.
Contoh berikut menunjukkan cara menerjemahkan Path
objek:
<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>
Dalam contoh ini, Path
objek dipindahkan 50 unit independen perangkat ke kanan, dan 50 unit independen perangkat ke bawah.
Beberapa transformasi
Xamarin.Forms memiliki dua kelas yang mendukung penerapan beberapa transformasi ke Path
objek. Ini adalah TransformGroup
, dan CompositeTransform
. TransformGroup
Melakukan transformasi dalam urutan yang diinginkan, sementara CompositeTransform
performa berubah dalam urutan tertentu.
Mengubah grup
Mengubah grup mewakili transformasi komposit yang terdiri dari beberapa Transform
objek.
Kelas TransformGroup
, yang berasal dari Transform
kelas , mendefinisikan Children
properti, jenis TransformCollection
, yang mewakili kumpulan Transform
objek. Properti ini didukung oleh BindableProperty
objek, yang berarti dapat menjadi target pengikatan data, dan ditata.
Urutan transformasi penting dalam transformasi komposit yang menggunakan TransformGroup
kelas . Misalnya, jika Anda pertama kali memutar, kemudian menskalakan, kemudian menerjemahkan, Anda mendapatkan hasil yang berbeda daripada jika Anda pertama kali menerjemahkan, lalu memutar, lalu menskalakan. Salah satu alasan urutannya signifikan adalah bahwa transformasi seperti rotasi dan penskalaan dilakukan sehubungan dengan asal sistem koordinat. Penskalaan objek yang berpusat di asal menghasilkan hasil yang berbeda untuk menskalakan objek yang telah dipindahkan dari asal. Demikian pula, memutar objek yang berpusat di asal menghasilkan hasil yang berbeda dari memutar objek yang telah dipindahkan dari asal.
Contoh berikut menunjukkan cara melakukan transformasi komposit menggunakan TransformGroup
kelas :
<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>
Dalam contoh ini, Path
objek diskalakan hingga 1,5 kali ukurannya, lalu diputar sebesar 45 derajat.
Transformasi komposit
Transformasi komposit menerapkan beberapa transformasi ke objek.
Kelas CompositeTransform
, yang berasal dari Transform
kelas , mendefinisikan properti berikut:
CenterX
, dari jenisdouble
, yang mewakili koordinat x dari titik tengah transformasi ini. Nilai default properti ini adalah 0,0.CenterY
, dari jenisdouble
, yang mewakili koordinat y dari titik tengah transformasi ini. Nilai default properti ini adalah 0,0.ScaleX
, dari jenisdouble
, yang mewakili faktor skala sumbu x. Nilai default properti ini adalah 1,0.ScaleY
, dari jenisdouble
, yang mewakili faktor skala sumbu y. Nilai default properti ini adalah 1,0.SkewX
, dari jenisdouble
, yang mewakili sudut miring sumbu x, yang diukur dalam derajat berlawanan arah jarum jam dari sumbu y. Nilai default properti ini adalah 0,0.SkewY
, dari jenisdouble
, yang mewakili sudut miring sumbu y, yang diukur dalam derajat berlawanan arah jarum jam dari sumbu x. Nilai default properti ini adalah 0,0.Rotation
, dari jenisdouble
, mewakili sudut, dalam derajat, rotasi searah jarum jam. Nilai default properti ini adalah 0,0.TranslateX
, dari jenisdouble
, yang mewakili jarak untuk bergerak di sepanjang sumbu x. Nilai default properti ini adalah 0,0.TranslateY
, dari jenisdouble
, yang mewakili jarak untuk bergerak di sepanjang sumbu y. Nilai default properti ini adalah 0,0.
Properti ini didukung oleh BindableProperty
objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.
Menerapkan CompositeTransform
transformasi dalam urutan ini:
- Skalakan (
ScaleX
danScaleY
). - Condong (
SkewX
danSkewY
). - Putar (
Rotation
). - Terjemahkan (
TranslateX
,TranslateY
).
Jika Anda ingin menerapkan beberapa transformasi ke objek dalam urutan yang berbeda, Anda harus membuat TransformGroup
dan menyisipkan transformasi dalam urutan yang Anda inginkan.
Penting
menggunakan CompositeTransform
titik tengah yang sama, CenterX
dan CenterY
, untuk semua transformasi. Jika Anda ingin menentukan titik pusat per transformasi yang berbeda, gunakan TransformGroup
,
Contoh berikut menunjukkan cara melakukan transformasi komposit menggunakan CompositeTransform
kelas :
<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>
Dalam contoh ini, Path
objek diskalakan menjadi 1,5 kali ukurannya, lalu diputar sebesar 45 derajat, lalu diterjemahkan oleh 50 unit independen perangkat.
Mengubah matriks
Transformasi dapat dijelaskan dalam hal matriks transformasi affine 3x3, yang melakukan transformasi dalam ruang 2D. Matriks 3x3 ini diwakili oleh Matrix
struktur, yang merupakan kumpulan tiga baris dan tiga kolom double
nilai.
Struktur Matrix
menentukan properti berikut:
Determinant
, dari jenisdouble
, yang mendapatkan penentu matriks.HasInverse
, dari jenisbool
, yang menunjukkan apakah matriks tidak dapat dibalik.Identity
, dari jenisMatrix
, yang mendapatkan matriks identitas.HasIdentity
, dari jenisbool
, yang menunjukkan apakah matriks adalah matriks identitas.M11
, dari jenisdouble
, yang mewakili nilai baris pertama dan kolom pertama matriks.M12
, dari jenisdouble
, yang mewakili nilai baris pertama dan kolom kedua matriks.M21
, dari jenisdouble
, yang mewakili nilai baris kedua dan kolom pertama matriks.M22
, dari jenisdouble
, yang mewakili nilai baris kedua dan kolom kedua matriks.OffsetX
, dari jenisdouble
, yang mewakili nilai baris ketiga dan kolom pertama matriks.OffsetY
, dari jenisdouble
, yang mewakili nilai baris ketiga dan kolom kedua matriks.
Properti OffsetX
dan OffsetY
dinamai demikian karena menentukan jumlah untuk menerjemahkan ruang koordinat di sepanjang sumbu x, dan sumbu y.
Selain itu, Matrix
struktur mengekspos serangkaian metode yang dapat digunakan untuk memanipulasi nilai matriks, termasuk Append
, Invert
, Multiply
, Prepend
dan banyak lagi.
Tabel berikut ini memperlihatkan struktur Xamarin.Forms matriks:
M11
M12
0.0
M21
M22
0.0
OffsetX
Offsety
1.0
Catatan
Matriks transformasi affine memiliki kolom akhir yang sama dengan (0,0,1), sehingga hanya anggota di dua kolom pertama yang perlu ditentukan.
Dengan memanipulasi nilai matriks, Anda dapat memutar, menskalakan, condong, dan menerjemahkan Path
objek. Misalnya, jika Anda mengubah nilai menjadi OffsetX
100, Anda dapat menggunakannya memindahkan Path
objek 100 unit independen perangkat di sepanjang sumbu x. Jika Anda mengubah nilai menjadi M22
3, Anda dapat menggunakannya untuk meregangkan Path
objek hingga tiga kali tingginya saat ini. Jika Anda mengubah kedua nilai, Anda memindahkan Path
objek 100 unit independen perangkat di sepanjang sumbu x dan meregangkan tingginya dengan faktor 3. Selain itu, matriks transformasi affine dapat dikalikan untuk membentuk sejumlah transformasi linier, seperti rotasi dan condong, diikuti dengan terjemahan.
Transformasi kustom
Kelas MatrixTransform
, yang berasal dari Transform
kelas , mendefinisikan Matrix
properti, jenis Matrix
, yang mewakili matriks yang mendefinisikan transformasi. Properti ini didukung oleh BindableProperty
objek, yang berarti dapat menjadi target pengikatan data, dan ditata.
Setiap transformasi yang dapat Anda jelaskan dengan TranslateTransform
objek , , ScaleTransform
RotateTransform
, atau SkewTransform
sama-sama dapat dijelaskan oleh MatrixTransform
. Namun, TranslateTransform
kelas , ScaleTransform
, RotateTransform
, dan SkewTransform
lebih mudah dikonsep daripada mengatur komponen vektor dalam Matrix
. Oleh karena itu, MatrixTransform
kelas biasanya digunakan untuk membuat transformasi kustom yang tidak disediakan oleh RotateTransform
kelas , , ScaleTransform
SkewTransform
, atau TranslateTransform
.
Contoh berikut menunjukkan cara mengubah Path
objek menggunakan 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>
Dalam contoh ini, Path
objek direntangkan, condong, dan offset dalam dimensi X dan Y.
Atau, ini dapat ditulis dalam bentuk yang disederhanakan yang menggunakan pengonversi jenis yang disertakan dalam 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>
Dalam contoh ini, Matrix
properti ditentukan sebagai string yang dibatasi koma yang terdiri dari enam anggota: M11
, , M12
, M21
M22
, , . OffsetY
OffsetX
Meskipun anggota dibatasi koma dalam contoh ini, mereka juga dapat dibatasi oleh satu atau beberapa spasi.
Selain itu, contoh sebelumnya dapat disederhanakan lebih lanjut dengan menentukan enam anggota yang sama dengan nilai RenderTransform
properti:
<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" />