Bagikan melalui

Transformasi jalur

  • Artikel

Browse sample. Telusuri sampel

UI Aplikasi Multi-platform .NET (.NET MAUI) 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. .NET MAUI mendefinisikan kelas untuk masing-masing klasifikasi transformasi ini:

.NET MAUI 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 ke Path 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 jenis double, mewakili sudut, dalam derajat, rotasi searah jarum jam. Nilai default properti ini adalah 0,0.
  • CenterX, dari jenis double, mewakili koordinat x dari titik pusat rotasi. Nilai default properti ini adalah 0,0.
  • CenterY, dari jenis double, 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 jenis double, yang mewakili faktor skala sumbu x. Nilai default properti ini adalah 1,0.
  • ScaleY, dari jenis double, yang mewakili faktor skala sumbu y. Nilai default properti ini adalah 1,0.
  • CenterX, dari jenis double, yang mewakili koordinat x dari titik tengah transformasi ini. Nilai default properti ini adalah 0,0.
  • CenterY, dari jenis double, 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 jenis double, 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 jenis double, 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 jenis double, yang mewakili koordinat x pusat transformasi. Nilai default properti ini adalah 0,0.
  • CenterY, dari jenis double, 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 jenis double, yang mewakili jarak untuk bergerak di sepanjang sumbu x. Nilai default properti ini adalah 0,0.
  • Y, dari jenis double, 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

.NET MAUI 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 jenis double, yang mewakili koordinat x dari titik tengah transformasi ini. Nilai default properti ini adalah 0,0.
  • CenterY, dari jenis double, yang mewakili koordinat y dari titik tengah transformasi ini. Nilai default properti ini adalah 0,0.
  • ScaleX, dari jenis double, yang mewakili faktor skala sumbu x. Nilai default properti ini adalah 1,0.
  • ScaleY, dari jenis double, yang mewakili faktor skala sumbu y. Nilai default properti ini adalah 1,0.
  • SkewX, dari jenis double, 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 jenis double, 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 jenis double, mewakili sudut, dalam derajat, rotasi searah jarum jam. Nilai default properti ini adalah 0,0.
  • TranslateX, dari jenis double, yang mewakili jarak untuk bergerak di sepanjang sumbu x. Nilai default properti ini adalah 0,0.
  • TranslateY, dari jenis double, 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:

  1. Skalakan (ScaleX dan ScaleY).
  2. Condong (SkewX dan SkewY).
  3. Putar (Rotation).
  4. 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 jenis double, yang mendapatkan penentu matriks.
  • HasInverse, dari jenis bool, yang menunjukkan apakah matriks tidak dapat dibalik.
  • Identity, dari jenis Matrix, yang mendapatkan matriks identitas.
  • IsIdentity, dari jenis bool, yang menunjukkan apakah matriks adalah matriks identitas.
  • M11, dari jenis double, yang mewakili nilai baris pertama dan kolom pertama matriks.
  • M12, dari jenis double, yang mewakili nilai baris pertama dan kolom kedua matriks.
  • M21, dari jenis double, yang mewakili nilai baris kedua dan kolom pertama matriks.
  • M22, dari jenis double, yang mewakili nilai baris kedua dan kolom kedua matriks.
  • OffsetX, dari jenis double, yang mewakili nilai baris ketiga dan kolom pertama matriks.
  • OffsetY, dari jenis double, 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 matriks .NET MAUI:

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 TranslateTransformobjek , , ScaleTransformRotateTransform, atau SkewTransform sama-sama dapat dijelaskan oleh MatrixTransform. Namun, TranslateTransformkelas , 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 RotateTransformkelas , , ScaleTransformSkewTransform, 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 .NET MAUI:

<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, M21M22, , . OffsetYOffsetX 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" />