深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例
昨天我在《簡述WPF中的畫刷(Brush) 》中簡要介紹了WPF中的畫刷的使用。現(xiàn)在接著深入研究一下其中的ImageBrush。
如上文所述,ImageBrush是一種TileBrush,它使用ImageSource屬性來定義圖像作為畫刷的繪制內(nèi)容。你可以控制圖像的縮放、對齊、鋪設(shè)方式。ImageBrush可用于繪制形狀、控件,文本等。
下面看看它的一些簡單應(yīng)用:
首先看一下效果圖片:
先看看上圖的左邊部分:
圖1為原始圖片,圖2是將原始圖片作為Border的繪制畫刷的效果,圖3是將圖片應(yīng)用于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>
淺藍(lán)色底部分為關(guān)鍵代碼,黃色底部分為增加的外發(fā)光特效(也就是Photoshop中常說的“輝光效果”)。
關(guān)鍵部分的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的效果,這里使用了我的一個(gè)美女好友的圖片。(相關(guān)代碼見下)
圖4的XAML代碼:
<Ellipse x:Name="ellipseWithImageBrush" Stroke="#FF000000" Height="150" Width="150">
?? <Ellipse.Fill>
??? <ImageBrush ImageSource="xian.png"/>
?? </Ellipse.Fill>
</Ellipse>
關(guān)鍵的C#代碼:
ImageBrush imgBrush = new ImageBrush();
imgBrush.ImageSource =
??????????????? new BitmapImage(
??????????????????? new Uri(@"xian.png", UriKind.Relative)
??????????????? );
ellipseWithImageBrush.Fill = imgBrush;
圖5使用了ImageBrush的鋪設(shè)方式屬性之后的效果。(具體代碼見下一篇文章《深入WPF中的圖像畫刷(ImageBrush)之2——ImageBrush的鋪設(shè)方式》)
圖6與圖3類似,不同的是使用了DropShadowBitmapEffect,同時(shí)還對文字大小進(jìn)行了變形處理(垂直高度加高至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+中實(shí)現(xiàn)文字的輝光效果、陰影效果,是不是需要寫非常多的C# 代碼?現(xiàn)在,WPF已經(jīng)不再麻煩,幾句代碼搞定!你是不是想將它們保存為圖片?如是,讀讀我以前寫的這篇BLOG吧:WPF中,如何使用圖像API進(jìn)行繪 制而不是XAML?
本文來自CSDN博客,轉(zhuǎn)載請標(biāo)明出處:http://blog.csdn.net/johnsuna/archive/2007/09/05/1772912.aspx
轉(zhuǎn)載于:https://www.cnblogs.com/songtzu/archive/2012/04/09/2439468.html
總結(jié)
以上是生活随笔為你收集整理的深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 计失败的一次js优化
- 下一篇: 一步一步asp.net_页面静态化管理