Aracılığıyla paylaş

Xamarin.Forms Şekiller: Yol dönüşümleri

  • Makale

A Transform , bir nesneyi bir koordinat alanından başka bir Path koordinat alanına dönüştürmeyi tanımlar. Bir nesneye Path bir dönüşüm uygulandığında, nesnenin kullanıcı arabiriminde nasıl işlendiğini değiştirir.

Dönüşümler dört genel sınıflandırmaya ayrılır: döndürme, ölçeklendirme, eğme ve çeviri. Xamarin.Forms bu dönüşüm sınıflandırmalarının her biri için bir sınıf tanımlar:

  • RotateTransform, tarafından belirtilen Anglebir Path döndürür.
  • ScaleTransform, bir Path nesneyi belirtilene ScaleX ve ScaleY tutarlara göre ölçeklendirir.
  • SkewTransform, bir Path nesneyi belirtilene AngleX ve AngleY tutarlara göre çarpıtır.
  • TranslateTransform, bir Path nesneyi belirtilene X ve Y tutarlara göre taşır.

Xamarin.Forms ayrıca daha karmaşık dönüştürmeler oluşturmak için aşağıdaki sınıfları sağlar:

  • TransformGroup, birden çok dönüştürme nesnesinden oluşan bileşik bir dönüşümü temsil eder.
  • CompositeTransform, bir Path nesneye birden çok dönüştürme işlemi uygular.
  • MatrixTransform, diğer dönüştürme sınıfları tarafından sağlanmayan özel dönüşümler oluşturur.

Bu sınıfların tümü sınıfından Transform türetilir. Bu, geçerli dönüşümü nesne olarak temsil eden türündeki Matrixbir Matrix özelliği tanımlarValue. Bu özellik bir BindableProperty nesne tarafından desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir. Yapı hakkında Matrix daha fazla bilgi için bkz . Dönüştürme matrisi.

bir dönüşümü uygulamak için bir Pathdönüştürme sınıfı oluşturur ve bunu özelliğinin Path.RenderTransform değeri olarak ayarlarsınız.

Döndürme dönüşümü

Döndürme dönüşümü, nesneyi Path 2B x y koordinat sisteminde belirtilen bir nokta hakkında saat yönünde döndürür.

RotateTransform sınıfından Transform türetilen sınıfı aşağıdaki özellikleri tanımlar:

  • Angletüründe double, saat yönünde döndürmenin açısını derece cinsinden temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • CenterXdoubletüründe, döndürme merkezi noktasının x koordinatını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • CenterYdoubletüründe, döndürme merkezi noktasının y koordinatını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

CenterX ve CenterY özellikleri, nesnenin Path döndürüldiği noktayı belirtir. Bu merkez noktası, dönüştürülen nesnenin koordinat alanında ifade edilir. Varsayılan olarak, döndürme nesnenin sol üst köşesi Path olan (0,0) öğesine uygulanır.

Aşağıdaki örnek, bir Path nesnenin nasıl döndürüldüğünü gösterir:

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

Bu örnekte, Path nesne sol üst köşesi hakkında 45 derece döndürülür.

Dönüştürmeyi ölçeklendirme

Ölçek dönüştürmesi Path , bir nesneyi 2B x y koordinat sisteminde ölçeklendirir.

ScaleTransform sınıfından Transform türetilen sınıfı aşağıdaki özellikleri tanımlar:

  • ScaleX, türündedir doubleve x ekseni ölçek faktörünü temsil eder. Bu özelliğin varsayılan değeri 1.0'dır.
  • ScaleY, türündedir doubleve y ekseni ölçek faktörünü temsil eder. Bu özelliğin varsayılan değeri 1.0'dır.
  • CenterX, türündedir double. Bu, bu dönüşümün merkez noktasının x koordinatını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • CenterY, türündedir doubleve bu, bu dönüşümün merkez noktasının y koordinatını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

değerinin ScaleX ve ScaleY değeri, sonuçta elde edilen ölçeklendirme üzerinde büyük bir etkiye sahiptir:

  • 0 ile 1 arasındaki değerler, ölçeklendirilmiş nesnenin genişliğini ve yüksekliğini azaltır.
  • 1'den büyük değerler, ölçeklendirilmiş nesnenin genişliğini ve yüksekliğini artırır.
  • 1 değerleri, nesnenin ölçeklendirilmediğini gösterir.
  • Negatif değerler ölçek nesnesini yatay ve dikey olarak çevirir.
  • 0 ile -1 arasındaki değerler ölçek nesnesini çevirir ve genişliğini ve yüksekliğini azaltır.
  • -1'den küçük değerler nesneyi çevirir ve genişliğini ve yüksekliğini artırır.
  • -1 değerleri ölçeklendirilmiş nesneyi çevirir, ancak yatay veya dikey boyutunu değiştirmez.

CenterX ve CenterY özellikleri, nesnenin Path ölçeklendirildiği noktayı belirtir. Bu merkez noktası, dönüştürülen nesnenin koordinat alanında ifade edilir. Varsayılan olarak, ölçeklendirme nesnenin sol üst köşesi Path olan (0,0) öğesine uygulanır. Bu, nesneyi taşımanın Path ve daha büyük görünmesini sağlamanın etkisine sahiptir, çünkü bir dönüşüm uyguladığınızda nesnenin Path bulunduğu koordinat alanını değiştirirsiniz.

Aşağıdaki örnekte bir Path nesnenin nasıl ölçeklendirilecekleri gösterilmektedir:

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

Bu örnekte, nesne boyutunun Path 1,5 katına ölçeklendirilir.

Eğriltme dönüşümü

Eğriltme dönüşümü, 2B x-y koordinat sistemindeki bir Path nesneyi çarpıtır ve 2B nesnede 3B derinlik yanılsaması oluşturmak için kullanışlıdır.

SkewTransform sınıfından Transform türetilen sınıfı aşağıdaki özellikleri tanımlar:

  • AngleXtüründe, doublex ekseni eğme açısını temsil eder ve y ekseninden saat yönünün tersine derece cinsinden ölçülür. Bu özelliğin varsayılan değeri 0,0'dır.
  • AngleYtüründe double, x ekseninden saat yönünün tersine derece cinsinden ölçülen y ekseni eğme açısını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • CenterX, türündedir doubleve dönüştürme merkezinin x koordinatını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • CenterY, türündedir doubleve dönüştürme merkezinin y koordinatını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Eğriltme dönüştürmesinin etkisini tahmin etmek için x ekseni değerlerini özgün koordinat sistemine göre çarpıttığını AngleX düşünün. Bu nedenle, y ekseni 30 derecelik bir AngleX değer için çıkış noktası üzerinden 30 derece döner ve x içindeki değerleri bu kaynaktan 30 derece eğer. Benzer şekilde, 30'dan biri AngleY nesnenin y değerlerini Path kaynaktan 30 derece eğer.

Not

Bir Path nesneyi yerinde eğmek için ve CenterY özelliklerini nesnenin orta noktasına ayarlayınCenterX.

Aşağıdaki örnekte bir Path nesnenin nasıl eğriltiği gösterilmektedir:

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

Bu örnekte, nesneye Path merkez noktasından (0,0) 45 derecelik yatay bir dengesizlik uygulanır.

Dönüştürmeyi çevir

Çeviri dönüşümü, bir nesneyi 2B x-y koordinat sisteminde taşır.

TranslateTransform sınıfından Transform türetilen sınıfı aşağıdaki özellikleri tanımlar:

  • X, türündedir doubleve x ekseni boyunca hareket etmek için gereken mesafeyi temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • Y, türündedir doubleve y ekseni boyunca hareket etmek için gereken mesafeyi temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Negatif X değerler bir nesneyi sola taşırken pozitif değerler nesneyi sağa taşır. Negatif Y değerler nesneyi yukarı taşırken pozitif değerler nesneyi aşağı taşır.

Aşağıdaki örnekte bir Path nesnenin nasıl çevrildiği gösterilmektedir:

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

Bu örnekte nesne, cihazdan Path bağımsız 50 birim sağa ve 50 cihazdan bağımsız birim aşağı taşınır.

Birden çok dönüşüm

Xamarin.Forms bir nesneye Path birden çok dönüşüm uygulamayı destekleyen iki sınıfı vardır. Bunlar , ve CompositeTransformşeklindedirTransformGroup. , TransformGroup dönüştürmeleri istenen sırada gerçekleştirirken CompositeTransform , dönüşümleri belirli bir sırada gerçekleştirir.

Grupları dönüştürme

Dönüştürme grupları, birden çok Transform nesneden oluşan bileşik dönüşümleri temsil eder.

TransformGroup sınıfından Transform türetilen sınıfı, nesne Children koleksiyonunu Transform temsil eden türünde TransformCollectionbir özellik tanımlar. Bu özellik bir BindableProperty nesne tarafından desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

Dönüşümlerin sırası, sınıfını kullanan bileşik bir dönüşümde TransformGroup önemlidir. Örneğin, önce döndürdükten sonra ölçeklendikten sonra çeviri yaparsanız, önce çevirip, sonra döndürdükten sonra ölçeklendirmekten farklı bir sonuç elde edersiniz. Sıralamanın önemli bir nedeni, döndürme ve ölçeklendirme gibi dönüşümlerin koordinat sisteminin kaynağına göre gerçekleştirilmesidir. Kaynakta ortalanmış bir nesneyi ölçeklendirmek, kaynaktan uzağa taşınan bir nesneyi ölçeklendirmek için farklı bir sonuç üretir. Benzer şekilde, kaynakta ortalanmış bir nesneyi döndürmek, kaynaktan uzaklaşmış bir nesneyi döndürmekten farklı bir sonuç verir.

Aşağıdaki örnekte, sınıfını kullanarak bileşik dönüştürme işleminin nasıl gerçekleştirebileceğiniz gösterilmektedir TransformGroup :

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

Bu örnekte, nesne boyutunun Path 1,5 katına ölçeklendirilir ve ardından 45 derece döndürülür.

Bileşik dönüşümler

Bileşik dönüşüm, bir nesneye birden çok dönüşüm uygular.

CompositeTransform sınıfından Transform türetilen sınıfı aşağıdaki özellikleri tanımlar:

  • CenterX, türündedir double. Bu, bu dönüşümün merkez noktasının x koordinatını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • CenterY, türündedir doubleve bu, bu dönüşümün merkez noktasının y koordinatını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • ScaleX, türündedir doubleve x ekseni ölçek faktörünü temsil eder. Bu özelliğin varsayılan değeri 1.0'dır.
  • ScaleY, türündedir doubleve y ekseni ölçek faktörünü temsil eder. Bu özelliğin varsayılan değeri 1.0'dır.
  • SkewXtüründe, doublex ekseni eğme açısını temsil eder ve y ekseninden saat yönünün tersine derece cinsinden ölçülür. Bu özelliğin varsayılan değeri 0,0'dır.
  • SkewYtüründe double, x ekseninden saat yönünün tersine derece cinsinden ölçülen y ekseni eğme açısını temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • Rotationtüründe double, saat yönünde döndürmenin açısını derece cinsinden temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • TranslateX, türündedir doubleve x ekseni boyunca hareket etmek için gereken mesafeyi temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • TranslateY, türündedir doubleve y ekseni boyunca hareket etmek için gereken mesafeyi temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

A CompositeTransform , dönüşümleri şu sırayla uygular:

  1. Ölçek (ScaleX ve ScaleY).
  2. Eğme (SkewX ve SkewY).
  3. Döndür (Rotation).
  4. Çeviri (TranslateX, TranslateY).

Bir nesneye farklı bir sırayla birden çok dönüşüm uygulamak istiyorsanız, oluşturmalı TransformGroup ve dönüşümleri hedeflenen sırasına eklemelisiniz.

Önemli

A CompositeTransform , CenterX tüm dönüştürmeler için aynı merkez noktalarını ve CenterYkullanır. Dönüşüm başına farklı merkez noktaları belirtmek istiyorsanız, kullanın TransformGroup.

Aşağıdaki örnekte, sınıfını kullanarak bileşik dönüştürme işleminin nasıl gerçekleştirebileceğiniz gösterilmektedir CompositeTransform :

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

Bu örnekte nesne boyutunun Path 1,5 katına ölçeklendirilir, ardından 45 derece döndürülür ve ardından cihazdan bağımsız 50 birim çevrilmiştir.

Dönüştürme matrisi

Dönüşüm, 2B alanda dönüşümler gerçekleştiren 3x3 benze dönüştürme matrisi açısından açıklanabilir. Bu 3x3 matrisi, üç satır ve üç değer sütunu double koleksiyonu olan yapısıyla Matrix temsil edilir.

Matrix Yapısı aşağıdaki özellikleri tanımlar:

  • Determinant, türündedir doubleve matrisin determinantını alır.
  • HasInverse, türündedir boolve matrisin ters çevrilemez olup olmadığını gösterir.
  • Identity, türüne Matrixgöre bir kimlik matrisi alır.
  • HasIdentity, türündedir boolve matrisin bir kimlik matrisi olup olmadığını gösterir.
  • M11, türündedir doubleve matrisin ilk satırının ve ilk sütununun değerini temsil eder.
  • M12, türündedir doubleve matrisin ilk satırının ve ikinci sütununun değerini temsil eder.
  • M21, türündedir doubleve matrisin ikinci satırının ve ilk sütununun değerini temsil eder.
  • M22, türündedir doubleve matrisin ikinci satırının ve ikinci sütununun değerini temsil eder.
  • OffsetX, türündedir doubleve matrisin üçüncü satırının ve ilk sütununun değerini temsil eder.
  • OffsetY, türündedir doubleve matrisin üçüncü satırının ve ikinci sütununun değerini temsil eder.

OffsetX ve OffsetY özellikleri, sırasıyla x ekseni ve y ekseni boyunca koordinat alanını çevirecek miktarı belirttiğinden bu şekilde adlandırılır.

Ayrıca yapısı, Matrix , Invert, MultiplyPrepend ve daha birçok matris değerini Appendişlemek için kullanılabilecek bir dizi yöntemi kullanıma sunar.

Aşağıdaki tabloda matrisin Xamarin.Forms yapısı gösterilmektedir:

M11

M12

0,0

M21

M22

0,0

Offsetx

Offsety

1.0

Not

Bir benzeşim dönüştürme matrisinin son sütunu (0,0,1) değerine eşittir, bu nedenle yalnızca ilk iki sütundaki üyelerin belirtilmesi gerekir.

Matris değerlerini değiştirerek nesneleri döndürebilir, ölçeklendirebilir, eğebilir ve çevirebilirsiniz Path . Örneğin, değeri 100 olarak değiştirirseniz OffsetX , nesnenin x ekseni boyunca cihazdan bağımsız 100 birim taşımasını Path kullanabilirsiniz. Değeri 3 olarak değiştirirseniz, nesneyi Path geçerli yüksekliğinin M22 üç katına uzatmak için kullanabilirsiniz. Her iki değeri de değiştirirseniz, nesne 100 cihazdan bağımsız birimi x ekseni boyunca taşır Path ve yüksekliğini 3 kat uzatırsınız. Buna ek olarak, dönüş ve eğme gibi herhangi bir sayıda doğrusal dönüşümü ve ardından çeviriyi oluşturmak için benze dönüştürme matrisleri çarpılabilir.

Özel dönüşümler

MatrixTransform sınıfından türetilen sınıfı, dönüştürmeyi Transform tanımlayan matrisi temsil eden türünde Matrixbir Matrix özellik tanımlar. Bu özellik bir BindableProperty nesne tarafından desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

, , ScaleTransformRotateTransformveya SkewTransform nesnesiyle TranslateTransformaçıklayabileceğiniz tüm dönüştürmeler, ile MatrixTransformeşit olarak açıklanabilir. Ancak , ScaleTransform, RotateTransformve SkewTransform sınıflarının kavramsallaştırılması, TranslateTransformiçindeki Matrixvektör bileşenlerini ayarlamaktan daha kolaydır. Bu nedenle, MatrixTransform sınıfı genellikle , , ScaleTransformSkewTransformveya TranslateTransform sınıfları tarafından sağlanmayan RotateTransformözel dönüştürmeler oluşturmak için kullanılır.

Aşağıdaki örnekte kullanarak bir Path nesnenin nasıl dönüştürüldüğü gösterilmektedir 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>

Bu örnekte nesne hem Path X hem de Y boyutlarında esnetilmiş, eğilmiş ve uzaklıktadır.

Alternatif olarak, bu yerleşik bir tür dönüştürücü Xamarin.Formskullanan basitleştirilmiş bir biçimde yazılabilir:

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

Bu örnekte, Matrix özelliği altı üyeden oluşan virgülle ayrılmış bir dize olarak belirtilir: M11, M12, M21, M22, , OffsetX. OffsetY Bu örnekte üyeler virgülle sınırlandırılmış olsa da, bir veya daha fazla boşlukla da sınırlandırılabilir.

Ayrıca, özelliğin değeriyle RenderTransform aynı altı üye belirtilerek önceki örnek daha da basitleştirilebilir:

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