Přehled transformace štětce
Třída Brush poskytuje dvě transformační vlastnosti: Transform a RelativeTransform. Vlastnosti umožňují otočit, škálovat, zkosit a přeložit obsah štětce. Toto téma popisuje rozdíly mezi těmito dvěma vlastnostmi a uvádí příklady jejich použití.
Předpoklady
Abyste pochopili toto téma, měli byste porozumět funkcím štětce, který transformujete. Informace LinearGradientBrush o Malování s plnými barvami a přechody najdete v přehledu.RadialGradientBrush Viz Malování obrázků, výkresů a vizuálů.ImageBrushDrawingBrushVisualBrush Měli byste být také obeznámeni s 2D transformacemi popsanými v přehledu transformací.
Rozdíly mezi vlastnostmi Transformace a RelativeTransform
Pokud použijete transformaci na vlastnost štětce, musíte znát velikost malované oblasti, pokud chcete obsah štětce Transform transformovat o jeho středu. Předpokládejme, že malovaná oblast je 200 nezávislých pixelů na zařízení širokých a 150 výškových. Pokud jste použili RotateTransform k otočení výstupu štětce o 45 stupňů o jeho středu, dáte RotateTransformCenterX 100 a CenterY 75 stupňů.
Když použijete transformaci na vlastnost štětce RelativeTransform , použije se tato transformace na štětec před namapovaným výstupem na vykreslenou oblast. Následující seznam popisuje pořadí zpracování a transformace obsahu štětce.
Zpracovat obsah štětce Pro oblast GradientBrushpřechodu to znamená určení oblasti přechodu. TileBrushPro , je Viewbox mapován na Viewport. To se stane výstupem štětce.
Promítni výstup štětce na obdélník transformace 1 x 1.
Použijte štětec RelativeTransform, pokud ho má.
Nakreslit transformovaný výstup do oblasti.
Použijte štětec Transform, pokud ho má.
Vzhledem k tomu, že se RelativeTransform použije při mapování výstupu štětce na obdélník 1 x 1, zdá se, že hodnoty středu transformace a posunu jsou relativní. Pokud jste například použili RotateTransform k otočení výstupu štětce o 45 stupňů o jeho středu, dáte RotateTransformCenterX 0,5 a CenterY 0,5.
Následující obrázek znázorňuje výstup několika štětců, které byly otočeny o 45 stupňů pomocí RelativeTransform vlastností a Transform vlastností.
Použití funkce RelativeTransform s TileBrush
Vzhledem k tomu, že štětce dlaždic jsou složitější než jiné štětce, může použití RelativeTransform na jeden z nich vést k neočekávaným výsledkům. Například udělejte následující obrázek.
Následující příklad používá ImageBrush k vykreslení obdélníkové oblasti s předchozím obrázkem. RotateTransform Vztahuje se na vlastnost objektu ImageBrushRelativeTransform a nastaví jeho Stretch vlastnost na UniformToFill, která by měla zachovat poměr stran obrázku při roztažení na úplné vyplnění obdélníku.
<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>
Tento příklad vytvoří následující výstup:
Všimněte si, že obrázek je zkreslený, i když byl štětec Stretch nastaven na UniformToFill. Je to proto, že relativní transformace se použije po mapování štětce Viewbox na jeho Viewport. Následující seznam popisuje jednotlivé kroky procesu:
Promítni obsah štětce (Viewbox) na základní dlaždici (Viewport) pomocí nastavení štětce Stretch .
Promítnou základní dlaždici na obdélník transformace 1 x 1.
Použít .RotateTransform
Nakreslit transformovanou základní dlaždici do oblasti.
Příklad: Otočení obrázku Brush o 45 stupňů
Následující příklad se vztahuje RotateTransform na RelativeTransform vlastnost .ImageBrush Objekt RotateTransformCenterX i CenterY vlastnosti jsou nastaveny na hodnotu 0,5, relativní souřadnice středového bodu obsahu. V důsledku toho se obsah štětce otočí o střed.
//
// 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>
Další příklad také aplikuje na RotateTransform , ImageBrushale používá Transform vlastnost místo RelativeTransform vlastnosti. Chcete-li otočit štětec o středu objektu RotateTransformCenterX a CenterY musí být nastaven na absolutní souřadnice. Vzhledem k tomu, že obdélník malovaný štětcem je 175 o 90 pixelů, jeho středový bod je (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>
Následující obrázek znázorňuje štětec bez transformace s transformací použitou na RelativeTransform vlastnost a s transformací použitou na Transform vlastnost.
Tento příklad je součástí většího vzorku. Kompletní ukázku najdete v ukázce štětců. Další informace o štětce naleznete v přehledu štětců WPF.
Viz také
.NET Desktop feedback