zoukankan      html  css  js  c++  java
  • 深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例

    深入WPF中的图像画刷(ImageBrush)之1——ImageBrush使用举例
    2010年06月11日 星期五 15:20

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

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

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

    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?


    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/johnsuna/archive/2007/09/05/1772912.aspx

  • 相关阅读:
    (五)TortoiseSVN 客户端-----安装
    (四)svn 服务器端的使用之创建工程目录
    (三)svn 服务器端之创建仓库
    (二)svn服务端安装配置
    (一)svn介绍
    JFinal常量配置学习笔记
    继承、多态、重载和重写
    聊聊基本类型(内置类型)
    日期和时间的处理
    设计模式——享元模式
  • 原文地址:https://www.cnblogs.com/songtzu/p/2439468.html
Copyright © 2011-2022 走看看