BrushTypesExample画刷类型

clipboard.png

关注点:
1、 RectangleGeometry.Rect值:

  1. 默认为相对值0,0,1,1;即在Rectangle.Fill中,使用DrawingBrush.Drawing,并在GeometryDrawing.Geometry的Rect值。
  2. 字面理解为使用二位矩形的相对全位置作为绘制画刷的绘制内容。进行Rectangle.Fill填充区域。若值为0,0,2,1,则出现什么?如图:

ps:可以认真查看图中的两个使用集合绘制画刷的ImageBrush使用几何方框的Rect在图中的原始相对位置
clipboard.png

clipboard.png

clipboard.png

代码:

<Rectangle Width="50" Height="50" Grid.Row="0" Grid.Column="1">
    <Rectangle.Fill>
      <DrawingBrush Viewport="0,0,1,1" TileMode="Tile">
        <DrawingBrush.Drawing>
          <DrawingGroup>
            <GeometryDrawing Brush="Pink">
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0,0,2,1" />
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing>
              <GeometryDrawing.Brush>
                <ImageBrush ImageSource="sampleImages\cherries.jpg"  />
              </GeometryDrawing.Brush>
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0,0,0.5,0.5" />
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing>
              <GeometryDrawing.Brush>
                <ImageBrush ImageSource="sampleImages\cherries.jpg"  />
              </GeometryDrawing.Brush>
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0.5,0.5,0.5,0.5" />
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>

2、白底蓝格DrawingBrush:

  1. 使用一个白色画刷的几何方框作底部
  2. 再使用蓝色画刷的几何线条,Data为代码中

clipboard.png

<!-- Paints a rectangle with a grid pattern. -->
<!-- Paints a rectangle with a grid pattern. -->
  <Rectangle Width="50" Height="50" Grid.Row="1" Grid.Column="1">
    <Rectangle.Fill>
      <DrawingBrush Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
        <DrawingBrush.Drawing>
          <DrawingGroup>
            <GeometryDrawing Brush="White">
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0,0,1,1" />
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing Brush="Blue"
              Geometry="M 0,0 L 0,1 0.1,1 0.1,0.1 1,0.1 1,0 Z" />
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>

3、实现黑方框中显示复杂放射渐变圆

  1. 转换思维为以复杂线性渐变作底部,以有透明的放射渐变显示中间圆,边缘设为黑色。
  2. 放射渐变边缘点设为0.9-1可显示为刚好圆内切,不超出方框边界。

clipboard.png

<!-- Demonstrates the use of gradient brushes within a DrawingBrush. Two overlapping gradients are layered to 
          create a complex gradient. -->
  <Rectangle Width="50" Height="50" Grid.Row="2" Grid.Column="1">
    <Rectangle.Fill>
      <DrawingBrush Viewport="0,0,1,1" TileMode="Tile">
        <DrawingBrush.Drawing>
          <DrawingGroup>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0,0,1,1" />
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Color="Blue" Offset="0.0" />
                    <GradientStop Color="#9966CC" Offset="0.5" />
                    <GradientStop Color="MediumBlue" Offset="1.0" />
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
              </GeometryDrawing.Brush>
            </GeometryDrawing>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0,0,1,1" />
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <RadialGradientBrush GradientOrigin="0.75,0.25">
                  <RadialGradientBrush.GradientStops>
                    <GradientStop Color="White" Offset="0.0" />
                    <GradientStop Color="Transparent" Offset="0.5" />
                    <GradientStop Color="Transparent" Offset="0.9" />
                    <GradientStop Color="Black" Offset="1.0" />
                  </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
              </GeometryDrawing.Brush>
            </GeometryDrawing>
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>

4、Brush.RelativeTransform 属性:获取或设置要使用相对坐标应用于画笔的变换。

  1. 此属性在以下两种情况下特别有用:希望围绕画笔中心对画笔进行旋转、缩放、扭曲或其他变换,但无法得知使用该画笔所绘制的区域大小时;或使用相同的画笔绘制不同大小的不同区域时。
  2. 图中画笔围绕中心点逆时针转45°。

clipboard.png

<!-- Paints a rectangle with a grid pattern. -->
  <Rectangle Width="50" Height="50" Grid.Row="1" Grid.Column="1">
    <Rectangle.Fill>
      <VisualBrush Viewport="0,0,1,0.25" TileMode="Tile" Stretch="Uniform">
        <VisualBrush.Visual>
          <StackPanel Background="White">
            <TextBlock FontSize="10pt" Margin="1">Hello, World!</TextBlock>
          </StackPanel>
        </VisualBrush.Visual>
        <VisualBrush.RelativeTransform>
          <RotateTransform Angle="-45" CenterX="0.5" CenterY="0.5" />
        </VisualBrush.RelativeTransform>
      </VisualBrush>
    </Rectangle.Fill>
  </Rectangle>

5、实现黑白棋格:

  1. 先做一个2*2黑白各2个的内容块,其次作为图块DrawingBrush贴图填充到输出区域,要多少贴多少
  2. 图中Viewport设为0,0,0.25,0.25,缩小到1/4填充输出方框。

clipboard.png

<!-- Paints a rectangle with a checkered pattern.
          The tile size and a tile mode using the DrawingBrush's
         Viewport and TileMode properties. The tile's content is defined
         by the DrawingBrush's Drawing property. -->
  <Rectangle Width="150" Height="150" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3">
    <Rectangle.Fill>
      <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
        <DrawingBrush.Drawing>
          <DrawingGroup>
            <GeometryDrawing Brush="White">
              <GeometryDrawing.Geometry>
                <RectangleGeometry Rect="0,0,1,1" />
              </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing Brush="Black"
              Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>

李志玮
22 声望34 粉丝

求索~~


引用和评论

0 条评论