WPF：Graphics图画--Brushes--DrawingBrush绘图画刷

DrawingBrushExample

实现效果：

1. 背景的动画及其开关事件
2. DrawingBrush的转换、动画应用

关键词：

1. DockPanel.Background-DrawingBrush--DrawingGoup.Children[]-GeometryDrawing.Geometry-EllipseGoemetry
2. EventTrigger-ResumeStoryboard/PauseStoryboard

• 背景实现：

1. 使用DrawingBrush作为容器背景画刷，其Drawing属性中DrawingGroup.Children包含一个几何方框（黑灰边缘、亮灰填充)、两个几何圆

2、 同时设置DrawingBrush的旋转RotateTransform中心

<DockPanel.Background>    
  <DrawingBrush TileMode="Tile"
    Viewport="0,0,100,100" ViewportUnits="Absolute">
    <DrawingBrush.Drawing>
      <DrawingGroup>
        <DrawingGroup.Children>            
        
          <GeometryDrawing>
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,1,1" />
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Brush>
              <SolidColorBrush Color="LightGray" />
            </GeometryDrawing.Brush>
             <GeometryDrawing.Pen>
              <Pen Thickness="0.01" Brush="DarkGray" />
            </GeometryDrawing.Pen>               
          </GeometryDrawing>
          
          <GeometryDrawing Brush="#99CCCCCC">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="0.75,0.5" RadiusX="0.25" RadiusY="0.25" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>       
          <GeometryDrawing Brush="#66CCCCCC">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="0.25,0.25" RadiusX="0.1" RadiusY="0.1" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>                
        </DrawingGroup.Children>
      </DrawingGroup>
    </DrawingBrush.Drawing>
    <DrawingBrush.Transform>
      <RotateTransform CenterX="0.5" CenterY="0.5" />
    </DrawingBrush.Transform>
  </DrawingBrush>
</DockPanel.Background>   

• 背景动画触发事件

  1. 作为窗口触发器一部分，由Page.Loaded事件触发器开始故事板，对容器(DockPanel.Background)里的几何画刷颜色进行变化动画、对背景色的Drawing画刷进行旋转角度动画、对DrawingBrush中的第二个几何圆的X轴值进行动画。
  2. 一个由菜单中RadioButton的Uncheck、Checked事件触发动画的重新开始及暂停操作。

<Window.Triggers>
<Window.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard Name="backgroundAnimationsBeginStoryboard">
        <Storyboard >
          <ColorAnimation 
            Storyboard.TargetName="mainPanel"
            Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[0].(GeometryDrawing.Brush).(SolidColorBrush.Color)"
            From="LightGray" To="DarkGray" Duration="0:0:50" RepeatBehavior="Forever" 
            AutoReverse="True"/>
          <DoubleAnimation 
            Storyboard.TargetName="mainPanel"
            Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Transform).(RotateTransform.Angle)"
            From="0" To="360" Duration="0:5:00" RepeatBehavior="Forever" 
            AutoReverse="True"/>   
          <DoubleAnimation 
            Storyboard.TargetName="mainPanel"
            Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[1].(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)"
            From="0.1" To="0.25" Duration="0:0:5" RepeatBehavior="Forever" 
            AutoReverse="True"/> 
          <PointAnimation 
            Storyboard.TargetName="mainPanel"
            Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[2].(GeometryDrawing.Geometry).(EllipseGeometry.Center)"
            From="-0.25, -0.25" To="1.25,1.25" Duration="0:0:10" RepeatBehavior="Forever" 
            AutoReverse="True"/>  
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
    <EventTrigger SourceName="disableAnimationsRadioButton" RoutedEvent="RadioButton.Unchecked">
      <ResumeStoryboard BeginStoryboardName="backgroundAnimationsBeginStoryboard" />
    </EventTrigger>       
    <EventTrigger SourceName="disableAnimationsRadioButton" RoutedEvent="RadioButton.Checked">
      <PauseStoryboard BeginStoryboardName="backgroundAnimationsBeginStoryboard" />
    </EventTrigger>    
  </Window.Triggers>

Using DrawingBrush 使用绘图画刷

关注词：

1. Rectangle.Fill-DrawingBrush-DrawingBrush.Drawing-DrawingGroup-DrawingGroup.Children-GeometryDrawing-Geometry=
2. Rectangle.Fill-DrawingBrush-DrawingBrush.Drawing-GeometryDrawing-GeometryDrawing-GeometryDrawing.Geometry-GeometryGroup-EllipseGeometry

上2图代码：
通过DrawingBrush的贴图方式及本身作为画刷进行方框的填充。

<Rectangle Width="100" Height="100" Stroke="Black" StrokeThickness="1" Margin="10,0,10,0">
  <Rectangle.Fill>
    <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <DrawingGroup.Children>
            <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z"
              Brush="Gray" />
            <GeometryDrawing Geometry="M0.9,0 L1,0.1 0.1,1 0,0.9z"
              Brush="Gray" />
            <GeometryDrawing Geometry="M0.25,0.25 L0.5,0.125 0.75,0.25 0.5,0.5z"
              Brush="#FFFF00" />
            <GeometryDrawing Geometry="M0.25,0.75 L0.5,0.875 0.75,0.75 0.5,0.5z"
              Brush="Black" />
            <GeometryDrawing Geometry="M0.25,0.75 L0.125,0.5 0.25,0.25 0.5,0.5z"
              Brush="#FF0000" />
            <GeometryDrawing Geometry="M0.75,0.25 L0.875,0.5 0.75,0.75 0.5,0.5z"
              Brush="MediumBlue" />
            </DrawingGroup.Children>
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>

下3图 代码：
通过组合Geometry的GeometryGroup作为GeometryDrawing的内容方式 设置为DrawingBrush.Drawing值。

<Rectangle Width="100" Height="200" Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
      <DrawingBrush>
        <DrawingBrush.Drawing>
          <GeometryDrawing Brush="MediumBlue">
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <EllipseGeometry RadiusX="0.2" RadiusY="0.45" Center="0.5,0.5" />
                <EllipseGeometry RadiusX="0.45" RadiusY="0.2" Center="0.5,0.5" />
              </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
              <Pen Thickness="0.1" Brush="Black" />
            </GeometryDrawing.Pen>
          </GeometryDrawing>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>

TransformExample DrawingBrush的变换

关注词：

1. DrawingBrush.Transform-SkewTransform

图中通过DrawingBrush图块的扭曲、旋转得到这些效果

<Rectangle.Fill>
    <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
      <DrawingBrush.RelativeTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
      </DrawingBrush.RelativeTransform>
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <DrawingGroup.Children>
            <GeometryDrawing Geometry="M0,0.1 L0.1,0 1,0.9, 0.9,1z"
              Brush="Gray" />
              ...

ImageDrawingExample图像绘制

实现效果：

1. 把Image图像作为DrawingBrush绘制画刷进行填充区域。

关注词：

1. DrawingBrush-DrawingBrush.Drawing--DrawingGroup.Children-GeometryDrawing-GeometryDrawing.Geometry-RectangleGeometry/ImageDrawing
2. DrawingBrush-DrawingBrush.Drawing-ImageDrawing-ImageSource/Rect

图2，中为使用2个ImageDrawing的图片组合成DrawingBrush的Drawing参数，进行画刷的贴图填充几何圆。

<Ellipse Margin="15,0,0,0" Width="200" Height="200" Stroke="Red" StrokeThickness="1">
  <Ellipse.Fill>
    <DrawingBrush Viewport="0,0,150,50" ViewportUnits="Absolute" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <DrawingGroup.Children>                
            <ImageDrawing ImageSource="sampleImages\Apple.JPG" Rect="0,0,100,50" />
            <ImageDrawing ImageSource="sampleImages\cherries.JPG" Rect="100,0,50,50" />
          </DrawingGroup.Children>
        </DrawingGroup>                
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Ellipse.Fill>
</Ellipse>

图3中为在路径Path中使用含ImageDrawing的DrawingBrush画刷填充，Path由一个方框及圆联合组成几何形状，作为Path。

<Path Stretch="Uniform" Margin="15,0,0,0">
  <Path.Data>
    <CombinedGeometry GeometryCombineMode="Union">
      <CombinedGeometry.Geometry1>
        <RectangleGeometry Rect="50,70 100 100" />
      </CombinedGeometry.Geometry1>
      <CombinedGeometry.Geometry2>
        <EllipseGeometry Center="100,70" RadiusX="35" RadiusY="40"/>
      </CombinedGeometry.Geometry2>
    </CombinedGeometry>
  </Path.Data>
  <Path.Fill>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <ImageDrawing ImageSource="sampleImages\waterlilies.JPG">
          <ImageDrawing.Rect>
            <Rect X="100" Y="100" Width="50" Height="50" />
          </ImageDrawing.Rect>
        </ImageDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Path.Fill>
</Path>

AnimateGeometryDrawingExample几何绘图动画

实现效果：

1. 背景画面由X轴值变化的圆图块贴图的画刷 填充

关键词：

1. DrawingBrush-DrawingBrush.Drawing-GeometryDrawing
2. 动画(DockPanel.Background).(DrawingBrush.Drawing).(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)属性

图中实现代码如下:

<StackPanel Orientation="Horizontal">
    <DockPanel Name="myAnimatedDrawing" Height="400" Width="400">
      <DockPanel.Background>
        <DrawingBrush  TileMode="FlipXY" Viewport="0,0,100,100" ViewportUnits="Absolute" 
          Viewbox="0,0,1,1" ViewboxUnits="Absolute">
          <DrawingBrush.Drawing>  
            <GeometryDrawing >
              <GeometryDrawing.Pen>
                <Pen Brush="Orange" Thickness="0.1" />
              </GeometryDrawing.Pen>
              <GeometryDrawing.Geometry>                     
                <EllipseGeometry RadiusX="0.45" RadiusY="0.2" Center="0.5,0.5" />
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
          </DrawingBrush.Drawing>
        </DrawingBrush>
      </DockPanel.Background>
    </DockPanel>
  </StackPanel>
</StackPanel>
  </StackPanel>
  <Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation 
        Storyboard.TargetName="myAnimatedDrawing" 
        Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)"
        From="0.01" To="0.5" Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever" />         
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>
  </Page.Triggers>

扩展：

1. DrawingGroup 类:表示可以作为单个绘图进行运算的绘图集合。