深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例

Posted 2021-01-15 lonelyxmas

原文:深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例

昨天我在《简述WPF中的画刷(Brush)??》中简要介绍了WPF中的画刷的使用。现在接着深入研究一下其中的ImageBrush。

如上文所述，ImageBrush是一种TileBrush，它使用ImageSource属性来定义图像作为画刷的绘制内容。你可以控制图像的缩放、对齐、铺设方式。ImageBrush可用于绘制形状、控件，文本等。

下面看看它的一些简单应用：
首先看一下效果图片：

先看看上图的左边部分：
图1为原始图片，图2是将原始图片作为Border的绘制画刷的效果，图3是将图片应用于TextBlock的效果（为了演示，我增加了BitmapEffect效果）。
看看图2的XAML代码：
<Border BorderThickness="20,40,5,15" x:Name="borderWithImageBrush"? Margin="11.331,178.215,157.086,117.315">
???<Border.BorderBrush>
????<ImageBrush ImageSource="summer.jpg" Viewport="0,0,1,1" />
???</Border.BorderBrush>
???<DockPanel>
????<TextBlock DockPanel.Dock="Top" TextWrapping="Wrap" Margin="10">
??????? <Run Text="使用ImageBrush绘制的边框"/>
??? </TextBlock>
???</DockPanel>
??</Border>
（C#代码略）

再看看图3的XAML代码：
??<TextBlock FontWeight="Bold" FontSize="56pt" FontFamily="Arial"
???Text="BrawDraw" x:Name="wordsWithImageBrush" Height="88.214" Margin="11.331,0,143.972,7.996" VerticalAlignment="Bottom">
???<TextBlock.Foreground>
????<ImageBrush ImageSource="Summer.jpg" />
???</TextBlock.Foreground>
???<TextBlock.BitmapEffect>
????<OuterGlowBitmapEffect GlowColor="Black" GlowSize="8" Noise="0" Opacity="0.6" />
???</TextBlock.BitmapEffect>
??</TextBlock>
浅蓝色底部分为关键代码，黄色底部分为增加的外发光特效（也就是Photoshop中常说的“辉光效果”）。
关键部分的C#代码为：
TextBlock wordsWithImageBrush = new TextBlock();
// ...(其他定义wordsWithImageBrush属性的代码)
ImageBrush berriesBrush = new ImageBrush();
berriesBrush.ImageSource =
??????????????? new BitmapImage(
??????????????????? new Uri(@"Summer.jpg", UriKind.Relative)
??????????????? );
wordsWithImageBrush.Foreground = berriesBrush;

OuterGlowBitmapEffect glowEffect = new OuterGlowBitmapEffect();
glowEffect.GlowSize = 8;
glowEffect.GlowColor = Color.Black;
glowEffect.Noise = 0;
glowEffect.Opacity = 0.6;
wordsWithImageBrush.BitmapEffect = glowEffect;

再看看右边部分：
图4是使用了ImageBrush填充Ellipse的效果,这里使用了我的一个美女好友的图片。（相关代码见下）
图4的XAML代码：
<Ellipse x:Name="ellipseWithImageBrush" Stroke="#FF000000" Height="150" Width="150">
???<Ellipse.Fill>
????<ImageBrush ImageSource="xian.png"/>
???</Ellipse.Fill>
??</Ellipse>
关键的C#代码：
ImageBrush imgBrush = new ImageBrush();
imgBrush.ImageSource =
??????????????? new BitmapImage(
??????????????????? new Uri(@"xian.png", UriKind.Relative)
??????????????? );
ellipseWithImageBrush.Fill = imgBrush;

图5使用了ImageBrush的铺设方式属性之后的效果。（具体代码见下一篇文章《深入WPF中的图像画刷(ImageBrush)之2——ImageBrush的铺设方式》）

图6与图3类似，不同的是使用了DropShadowBitmapEffect,同时还对文字大小进行了变形处理（垂直高度加高至128％）。
图6的XAML代码：
<TextBlock FontWeight="Bold" FontSize="56pt" TextWrapping="Wrap" FontFamily="Arial Black"
???Text="Girl" x:Name="wordsWithGirlImageBrush" RenderTransformOrigin="0.5,0.5" Height="97.468" Margin="0,0,2.086,2.144" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="153.697">
???<TextBlock.Foreground>
????<ImageBrush ImageSource="xian.png" />
???</TextBlock.Foreground>
???<TextBlock.BitmapEffect>
????<DropShadowBitmapEffect Color="Black" Direction="315" ShadowDepth="4" Softness="0.5"
???????? Opacity="1.0"/>
???</TextBlock.BitmapEffect>
???<TextBlock.RenderTransform>
????<TransformGroup>
?????<ScaleTransform ScaleX="1" ScaleY="1.28"/>
????</TransformGroup>
???</TextBlock.RenderTransform>
??</TextBlock>
（C#代码略）

从上面例子中，我们可以思考一下，以前如果要在GDI+中实现文字的辉光效果、阴影效果，是不是需要写非常多的C#代码？现在，WPF已经不再麻烦，几句代码搞定！你是不是想将它们保存为图片？如是，读读我以前写的这篇BLOG吧：WPF中，如何使用图像API进行绘制而不是XAML? 。

相关文章：
深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例 〔本篇〕
深入WPF中的图像画刷(ImageBrush)之2——ImageBrush的铺设方式
简述WPF中的画刷(Brush)