Fırça Dönüşümüne Genel Bakış

Brush sınıfı iki dönüştürme özelliği sağlar: Transform ve RelativeTransform. Özellikler fırçanın içeriğini döndürmenizi, ölçeklendirmenizi, eğmenizi ve çevirmenizi sağlar. Bu konu başlığında, bu iki özellik arasındaki farklar açıklanır ve bunların kullanımına ilişkin örnekler sağlanır.

Önkoşullar

Bu konuyu anlamak için dönüştürdüğünüz fırçanın özelliklerini anlamanız gerekir. LinearGradientBrush ve RadialGradientBrushiçin, Düz Renkler ve Gradyanlarla Boyamaya Genel Bakışbakın. ImageBrush, DrawingBrushveya VisualBrushiçin bkz. Resimler, Çizimler ve Görsellerle Boyama. Ayrıca Dönüşümlere Genel Bakış'de açıklandığı gibi 2B dönüşümleri biliyor olmalısınız.

Transform ve RelativeTransform Özellikleri Arasındaki Farklar

Bir fırçanın Transform özelliğine dönüşüm uyguladığınızda, fırça içeriğini merkezi etrafında dönüştürmek istiyorsanız boyanmış alanın boyutunu bilmeniz gerekir. Boyanmış alanın 200 cihazdan bağımsız piksel genişliğinde ve 150 yüksekliğinde olduğunu varsayalım. Fırçanın çıkışını merkezinde 45 derece döndürmek için bir RotateTransform kullansaydınız, RotateTransform'e 100, CenterX'ye ve CenterY'e 75 verirdiniz.

Bir fırçanın RelativeTransform özelliğine dönüştürme uyguladığınızda, çıktısı boyalı alana eşlenmeden önce bu dönüşüm fırçaya uygulanır. Aşağıdaki listede bir fırçanın içeriğinin işlenme ve dönüştürülmesi sırası açıklanmaktadır.

1. Fırçanın içeriğini işleyin. GradientBrushiçin bu, gradyan alanı belirlemek anlamına gelir. TileBrushiçin ViewboxViewportile eşlenir. Bu, fırçanın çıktısı olur.

2. Fırçanın çıkışını 1 x 1 dönüştürme dikdörtgenine yansıtın.

3. Varsa fırçanın RelativeTransformuygulayın.

4. Dönüştürülen çıkışı boyanacak alana yansıtın.

5. Varsa fırçanın Transformuygulayın.

Fırçanın çıktısı 1 x 1'lik bir dikdörtgene eşlendiğinde RelativeTransform uygulandığı için, dönüşüm merkezi ve ofset değerleri göreli olarak görünmektedir. Örneğin, fırçanın çıkışını merkezine 45 derece döndürmek için bir RotateTransform kullandıysanız, RotateTransform için 0,5 CenterX ve 0,5 CenterY vermelisiniz.

Aşağıdaki çizimde, RelativeTransform ve Transform özellikleri kullanılarak 45 derece döndürülmüş birkaç fırçanın çıkışı gösterilmektedir.

TileBrush ile RelativeTransform Kullanma

Fayans fırçaları diğer fırçalara göre daha karmaşık olduğundan, bir RelativeTransform uygulamak beklenmeyen sonuçlara neden olabilir. Örneğin, aşağıdaki görüntüyü alın.

Aşağıdaki örnek, bir önceki resim ile bir dikdörtgen alanı renklendirmek için bir ImageBrush kullanır. RotateTransform, ImageBrush nesnesinin RelativeTransform özelliğine uygulanır ve Stretch özelliği UniformToFillolarak ayarlanır; bu da dikdörtgeni tamamen dolduracak şekilde genişletildiğinde görüntünün en boy oranının korunmasını sağlamalıdır.

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

Bu örnek aşağıdaki çıkışı oluşturur:

Fırçanın StretchUniformToFillolarak ayarlanmış olsa bile görüntünün bozuk olduğuna dikkat edin. Bunun nedeni, fırçanın Viewbox'sının Viewport'ine eşlendikten sonra göreli dönüşümün uygulanmasıdır. Aşağıdaki listede işlemin her adımı açıklanmaktadır:

1. Fırçanın Stretch ayarını kullanarak fırçanın içeriğini (Viewbox) ana karoya (Viewport) yansıtın.

   

2. Temel baz karoyu 1 x 1 dönüştürme dikdörtgenine yansıtın.

   graphicsmm_reltransform_3_output_to_transform

3. RotateTransformuygulayın.

   uygula

4. Dönüştürülmüş temel karoyu boyanacak alana yansıtın.

   

Örnek: ImageBrush'ları 45 Derece Döndürme

Aşağıdaki örnek, bir RotateTransform'yi bir ImageBrush'nin RelativeTransform özelliğine uygular. RotateTransform nesnesinin CenterX ve CenterY özellikleri, içeriğin orta noktasının göreli koordinatları olan 0,5 olarak ayarlanır. Sonuç olarak, fırçanın içeriği merkezi etrafında döndürülür.

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

Sonraki örnek de RotateTransform özelliğini bir ImageBrush'e uygular, ancak Transform özelliğini RelativeTransform özelliği yerine kullanır. Fırçayı ortasında döndürmek için, RotateTransform nesnesinin CenterX ve CenterY mutlak koordinatlara ayarlanmalıdır. Fırça tarafından boyanan dikdörtgen 175 x 90 piksel olduğundan, orta noktası (87,5, 45) şeklindedir.

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

Aşağıdaki çizimde, transformasyon uygulanmamış haldeki fırça, transformasyonun RelativeTransform özelliğine uygulandığı halde ve transformasyonun Transform özelliğine uygulandığı haldeki fırça gösterilmektedir.

Bu örnek, daha büyük bir örneğin parçasıdır. Örneğin tamamı için bkz. Fırça örneği. Fırçalar hakkında daha fazla bilgi için bkz. WPF Fırçalarına Genel Bakış.

Ayrıca bkz.

• Transform
• RelativeTransform
• Transform
• Brush
• Düz Renkler ve Gradyanlarla Boyamaya Genel Bakış
• Resimler, Çizimler ve Görseller ile Boyama
• Dönüşümlere Genel Bakış