Gambaran Umum Transformasi Kuas

Kelas Brush menyediakan dua properti transformasi: Transform dan RelativeTransform. Properti ini memungkinkan Anda memutar, menskalakan, condong, dan menerjemahkan konten kuas. Topik ini menjelaskan perbedaan antara kedua properti ini dan memberikan contoh penggunaannya.

Prasyarat

Untuk memahami topik ini, Anda harus memahami fitur kuas yang Anda ubah. Untuk LinearGradientBrush dan RadialGradientBrush, lihat Gambaran Umum Melukis dengan Warna Solid dan Gradien. Untuk ImageBrush, , DrawingBrushatau VisualBrush, lihat Melukis dengan Gambar, Gambar, dan Visual. Anda juga harus terbiasa dengan transformasi 2D yang dijelaskan dalam Gambaran Umum Transformasi.

Perbedaan antara Properti Transformasi dan RelativeTransform

Ketika Anda menerapkan transformasi ke properti kuas Transform , Anda perlu mengetahui ukuran area yang dicat jika Anda ingin mengubah konten kuas tentang pusatnya. Misalkan area yang dicat memiliki lebar 200 piksel independen perangkat dan tinggi 150. Jika Anda menggunakan RotateTransform untuk memutar output sikat 45 derajat tentang pusatnya, Anda akan memberikan RotateTransformCenterX 100 dan CenterY 75.

Ketika Anda menerapkan transformasi ke properti kuas RelativeTransform , transformasi tersebut diterapkan pada kuas sebelum outputnya dipetakan ke area yang dicat. Daftar berikut menjelaskan urutan di mana konten kuas diproses dan diubah.

1. Proses konten kuas. GradientBrushUntuk , ini berarti menentukan area gradien. TileBrushUntuk , dipetakan Viewbox ke Viewport. Ini menjadi output sikat.

2. Proyeksikan output kuas ke persegi panjang transformasi 1 x 1.

3. Terapkan kuas RelativeTransform, jika memilikinya.

4. Proyeksikan output yang diubah ke area untuk dicat.

5. Terapkan kuas Transform, jika memilikinya.

RelativeTransform Karena diterapkan saat output kuas dipetakan ke persegi panjang 1 x 1, nilai pusat transformasi dan offset tampaknya relatif. Misalnya, jika Anda menggunakan RotateTransform untuk memutar output sikat 45 derajat tentang pusatnya, Anda akan memberikan RotateTransformCenterX 0,5 dan CenterY 0,5.

Ilustrasi berikut menunjukkan output dari beberapa kuas yang telah diputar oleh 45 derajat menggunakan RelativeTransform properti dan Transform .

Menggunakan RelativeTransform dengan TileBrush

Karena sikat petak peta lebih kompleks daripada kuas lainnya, menerapkan ke RelativeTransform sikat mungkin menghasilkan hasil yang tidak terduga. Misalnya, ambil gambar berikut.

Contoh berikut menggunakan ImageBrush untuk melukis area persegi panjang dengan gambar sebelumnya. Ini menerapkan RotateTransform ke properti objekRelativeTransform, dan mengatur propertinya Stretch ke UniformToFill, yang harus mempertahankan rasio aspek gambar ketika direntangkan untuk mengisi ImageBrush persegi panjang sepenuhnya.

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1">
  <Rectangle.Fill>
    <ImageBrush Stretch="UniformToFill">
      <ImageBrush.ImageSource>
        <BitmapImage UriSource="sampleImages\square.jpg" />
      </ImageBrush.ImageSource>
      <ImageBrush.RelativeTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90" />
      </ImageBrush.RelativeTransform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

Contoh ini menghasilkan output berikut:

Perhatikan bahwa gambar terdistorsi, meskipun kuas Stretch diatur ke UniformToFill. Itu karena transformasi relatif diterapkan setelah kuas Viewbox dipetakan ke Viewport. Daftar berikut ini menjelaskan setiap langkah proses:

1. Proyeksikan konten kuas (Viewbox) ke petak peta dasarnya (Viewport) menggunakan pengaturan kuas Stretch .

   

2. Proyeksikan petak peta dasar ke persegi panjang transformasi 1 x 1.

   

3. Terapkan RotateTransform.

   

4. Proyeksikan petak peta dasar yang diubah ke area untuk dicat.

   

Contoh: Memutar GambarBrush 45 Derajat

Contoh berikut menerapkan RotateTransform ke RelativeTransform properti dari ImageBrush. Properti RotateTransform dan CenterY objek CenterX keduanya diatur ke 0,5, koordinat relatif dari titik tengah konten. Akibatnya, isi kuas diputar di tengahnya.

//
// Create an ImageBrush with a relative transform and
// use it to paint a rectangle.
//
ImageBrush relativeTransformImageBrush = new ImageBrush();
relativeTransformImageBrush.ImageSource =
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

// Create a 45 rotate transform about the brush's center
// and apply it to the brush's RelativeTransform property.
RotateTransform aRotateTransform = new RotateTransform();
aRotateTransform.CenterX = 0.5;
aRotateTransform.CenterY = 0.5;
aRotateTransform.Angle = 45;
relativeTransformImageBrush.RelativeTransform = aRotateTransform;

// Use the brush to paint a rectangle.
Rectangle relativeTransformImageBrushRectangle = new Rectangle();
relativeTransformImageBrushRectangle.Width = 175;
relativeTransformImageBrushRectangle.Height = 90;
relativeTransformImageBrushRectangle.Stroke = Brushes.Black;
relativeTransformImageBrushRectangle.Fill = relativeTransformImageBrush;

'
' Create an ImageBrush with a relative transform and
' use it to paint a rectangle.
'
Dim relativeTransformImageBrush As New ImageBrush()
relativeTransformImageBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))

' Create a 45 rotate transform about the brush's center
' and apply it to the brush's RelativeTransform property.
Dim aRotateTransform As New RotateTransform()
aRotateTransform.CenterX = 0.5
aRotateTransform.CenterY = 0.5
aRotateTransform.Angle = 45
relativeTransformImageBrush.RelativeTransform = aRotateTransform

' Use the brush to paint a rectangle.
Dim relativeTransformImageBrushRectangle As New Rectangle()
relativeTransformImageBrushRectangle.Width = 175
relativeTransformImageBrushRectangle.Height = 90
relativeTransformImageBrushRectangle.Stroke = Brushes.Black
relativeTransformImageBrushRectangle.Fill = relativeTransformImageBrush

<Rectangle Width="175" Height="90" Stroke="Black">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg">
      <ImageBrush.RelativeTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
      </ImageBrush.RelativeTransform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

Contoh berikutnya juga menerapkan RotateTransform ke ImageBrush, tetapi menggunakan Transform properti alih-alih RelativeTransform properti . Untuk memutar kuas tentang pusatnya, RotateTransform objek CenterX dan CenterY harus diatur ke koordinat absolut. Karena persegi panjang yang dicat oleh kuas adalah 175 kali 90 piksel, titik tengahnya adalah (87,5, 45).

//
// Create an ImageBrush with a transform and
// use it to paint a rectangle.
//
ImageBrush transformImageBrush = new ImageBrush();
transformImageBrush.ImageSource =
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

// Create a 45 rotate transform about the brush's center
// and apply it to the brush's Transform property.
RotateTransform anotherRotateTransform = new RotateTransform();
anotherRotateTransform.CenterX = 87.5;
anotherRotateTransform.CenterY = 45;
anotherRotateTransform.Angle = 45;
transformImageBrush.Transform = anotherRotateTransform;

// Use the brush to paint a rectangle.
Rectangle transformImageBrushRectangle = new Rectangle();
transformImageBrushRectangle.Width = 175;
transformImageBrushRectangle.Height = 90;
transformImageBrushRectangle.Stroke = Brushes.Black;
transformImageBrushRectangle.Fill = transformImageBrush;

'
' Create an ImageBrush with a transform and
' use it to paint a rectangle.
'
Dim transformImageBrush As New ImageBrush()
transformImageBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))

' Create a 45 rotate transform about the brush's center
' and apply it to the brush's Transform property.
Dim anotherRotateTransform As New RotateTransform()
anotherRotateTransform.CenterX = 87.5
anotherRotateTransform.CenterY = 45
anotherRotateTransform.Angle = 45
transformImageBrush.Transform = anotherRotateTransform

' Use the brush to paint a rectangle.
Dim transformImageBrushRectangle As New Rectangle()
transformImageBrushRectangle.Width = 175
transformImageBrushRectangle.Height = 90
transformImageBrushRectangle.Stroke = Brushes.Black
transformImageBrushRectangle.Fill = transformImageBrush

<Rectangle Width="175" Height="90" Stroke="Black">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg">
      <ImageBrush.Transform>
        <RotateTransform CenterX="87.5" CenterY="45" Angle="45" />
      </ImageBrush.Transform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

Ilustrasi berikut menunjukkan kuas tanpa transformasi, dengan transformasi yang diterapkan ke RelativeTransform properti, dan dengan transformasi yang diterapkan ke Transform properti.

Contoh ini adalah bagian dari sampel yang lebih besar. Untuk sampel lengkapnya, lihat Sampel Brush. Untuk informasi selengkapnya tentang kuas, lihat Gambaran Umum Sikat WPF.

Baca juga

• Transform
• RelativeTransform
• Transform
• Brush
• Gambaran Umum Lukisan dengan Warna Solid dan Gradien
• Melukis dengan Gambar, Gambar, dan Visual
• Gambaran Umum Transformasi