Aracılığıyla paylaş

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

  • Makale

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.

Ön koşullar

Bu konuyu anlamak için dönüştürdüğünüz fırçanın özelliklerini anlamanız gerekir. ve için LinearGradientBrush bkz. Düz Renkler ve Gradyanlarla Boyamaya Genel Bakış.RadialGradientBrush , veya için ImageBrushbkz. Resimler, Çizimler ve GörsellerleVisualBrush Boyama. DrawingBrush Dönüşümlere Genel Bakış bölümünde açıklanan 2B dönüşümleri de biliyor olmalısınız.

Transform ve RelativeTransform Özellikleri Arasındaki Farklar

Fırçanın Transform özelliğine bir dönüşüm uyguladığınızda, fırça içeriğini merkeziyle ilgili 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 kullandıysanız, 100 ve 75'lik bir CenterY verirsiniz RotateTransformCenterX.

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. için GradientBrushbu, gradyan alanı belirlemek anlamına gelir. için TileBrush, ile Viewbox eşlenir Viewport. Bu, fırçanın çıkışı 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 RelativeTransformöğesini uygulayın.

  4. Dönüştürülen çıkışı boyamak için alana yansıtın.

  5. Varsa fırçanın Transformöğesini uygulayın.

RelativeTransform fırçanın çıkışı 1 x 1 dikdörtgenle eşlenirken uygulandığından, dönüştürme merkezi ve uzaklık değerleri göreli olarak görünür. Örneğin, fırçanın çıkışını merkezinde 45 derece döndürmek için bir RotateTransform kullandıysanız, 0,5 ve CenterY 0,5 değerini verirsiniz CenterXRotateTransform.

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

RelativeTransform and Transform properties

TileBrush ile RelativeTransform Kullanma

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

The source image

Aşağıdaki örnekte, yukarıdaki görüntüyle dikdörtgen bir alanı boyamak için bir ImageBrush kullanılır. Nesnenin ImageBrushRelativeTransform özelliğine bir RotateTransform uygular ve özelliğini UniformToFillolarak ayarlar Stretch ve dikdörtgeni tamamen dolduracak şekilde genişletildiğinde görüntünün en boy oranını koruması gerekir.

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

The transformed output

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

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

    Stretch the Viewbox to fit the Viewport

  2. Temel kutucuğu 1 x 1 dönüştürme dikdörtgenine yansıtın.

    Map the Viewport to the transformation rectangle

  3. uygulamasını RotateTransformuygulayın.

    Apply the relative transform

  4. Dönüştürülen temel kutucuğu boyamak için alana yansıtın.

    Project the transformed brush onto the output area

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

Aşağıdaki örnek, özelliğine RotateTransformRelativeTransform bir ImageBrushuygular. Nesnenin RotateTransformCenterX ve CenterY özelliklerinin her ikisi de içeriğin merkez noktasının göreli koordinatları olan 0,5 olarak ayarlanır. Sonuç olarak, fırçanın içeriği ortası hakkı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 için bir RotateTransformImageBrushuygular, ancak özelliği yerine RelativeTransform özelliğini kullanırTransform. Fırçayı merkezi hakkında döndürmek için nesnenin RotateTransformCenterX ve CenterY değerleri 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 dönüştürme olmadan, dönüştürme özelliğine RelativeTransform uygulanmış ve dönüştürme özelliğine uygulanmış şekilde fırça gösterilmektedir Transform .

Brush RelativeTransform and Transform settings

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.