WPF 图形绘制

无熵~

已于 2023-04-05 16:37:56 修改

阅读量1w

点赞数 4

分类专栏： # WPF系统学习文章标签： wpf microsoft c#

于 2022-02-15 16:41:07 首次发布

本文链接：https://blog.csdn.net/lvxingzhe3/article/details/122946413

版权

WPF系统学习专栏收录该内容

15 篇文章 27 订阅

订阅专栏

WPF图形绘制方式:

Shape
Path
Brush
DrawVisual

一、Shape绘制图形

WPF 提供了许多易于使用的 Shape 对象。所有形状对象都是从 Shape 类继承的。可用的 Shape 对象包括 Ellipse、Line、Path、Polygon、Polyline 和 Rectangle。Shape 对象共享以下通用属性。

Stroke：说明如何绘制形状的轮廓。
StrokeThickness：说明形状轮廓的粗细。
Fill：说明如何绘制形状的内部。
用于指定坐标和顶点的数据属性，以与设备无关的像素来度量

由于Shape对象派生于 UIElement，因此可以在面板和大多数控件中使用。 Canvas 面板是用于创建复杂绘图的特别理想的选择，因为它支持对其子对象的绝对定位。

Line:直线段，可以设置笔触(Stroke)，X1: 直线起点X坐标,Y1:直线起点Y坐标,X2:直线终点X坐标,Y2:直线终点Y坐标，StrokeDashArray = “2 2”设置虚线(第一个 2 表示虚线中每段实体的长度，第二个 2 表示虚线中每段空白的长度)

<!--实线-->
<Line  X1="10" Y1="60" X2="150" Y2="60" Stroke="Green"  StrokeThickness="4"/>
<!--虚线-->
<Line  X1="10" Y1="80" X2="150" Y2="80" Stroke="Orange" StrokeDashArray = "2 2"  StrokeThickness="4"/>

Rectangle:矩形,由笔触(Stroke)和填充(Fill)构成

<Rectangle  Height="100" Fill="Pink" Stroke="Red" StrokeThickness="2" Grid.Column="1" Width="100"/>

Ellipse:椭圆,由笔触(Stroke)和填充(Fill)构成

<Ellipse  Width="120" Height="80" Fill="Yellow" Stroke="Red" StrokeThickness="2" Grid.Row="1"/>

Polygon多边形，由多个Point(点)连接构成

<Polyline Points="30,120 100,80 200,80 150,140" StrokeThickness="2" Stroke="Blue" Grid.Row="1" Grid.Column="1" />

二、Path绘制图形

Path:路径,可以将直线、弧形、曲线等基本元素结合起来,形成更复杂的图形,WPF提供两个类来描述路径数据:一个是StreamGeometry，另一个是PathFigureCollection(不再需要修改时，可使用StreamGeometry方式，如果还需要对路径数值进行修改，则使用PathFigureCollection方式)。

StreamGeometry方式:

<Path Stroke="Red" StrokeThickness="2" Data="M 240,240 C 160,80 320,80 240,240"/>

下面来解释一下"M 240,240 C 160,80 320,80 240,240"这样字符串的意义。
分为四种情况来解释：
1. 移动指令：Move Command（M）：M 起始点或者：m 起始点
比如：M 100,240或m 100,240
使用大写M时，表示绝对值; 使用小写m时; 表示相对于前一点的值，如果前一点没有指定，则使用(0,0)。

2. 绘制指令(Draw Command):
我们可以绘制以下形状：
(1) 直线:Line(L)
(2) 水平直线: Horizontal line(H)
(3) 垂直直线: Vertical line(V)
(4) 三次方程式贝塞尔曲线: Cubic Bezier curve(C)
(5) 二次方程式贝塞尔曲线: Quadratic Bezier curve(Q)
(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)
(7) 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)
(8) 椭圆圆弧: elliptical Arc(A)
上面每种形状后用括号括起的英文字母为命令简写的大写形式，但你也可以使用小写。使用大写与小写的区别是：大写是绝对值，小写是相对值。

PathFigureCollection方式:

图形对象可以独立存在，可以独立绘制出具体需要的图形,几何图形对象没有具体的形体，他需要依赖于某一对象元素而存在，不能直接呈现在画板上。
几何绘图包含5种对象：

单一图形：LineGeometry、RectangleGeometry、EllipseGeometry
复合图形：PathGeometry、GeometryGroup(组合形状)

    
  <Canvas>
        <Path Stroke="Red" StrokeThickness="2" Fill="Yellow">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Exclude">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>

PolyLineSegment 构成图形：

代码如下：

<Path Stroke="Red" StrokeThickness="1">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,0">
                        <PolyLineSegment Points="100,0 100,90 55,90 50,100 45,90 0,90 0,0"></PolyLineSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
</Path>

图形裁剪:几何图形是创建形状的最强大的方法，另一种用途就是用于设置Clip属性，所有的元素都提供了该属性。可以通过Clip属性约束元素的外边界以符合特定的几何图形：

<Image 
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
</Image>

三、画刷(Brush)绘制图形
继承至Brush的画刷分为两大类，其中 SolidColorBrush、GradientBrush实现颜色绘制，SolidColorBrush是单色绘制，而GradientBrush采用渐变颜色进行绘制；另外一大类则是TileBrush，ImageBrush、VisualBrush以及 DrawingBrush均继承至TileBrush，利用这三类画刷，能够实现控制复杂背景图形的绘制。

VisualBrush 绘制:

  <StackPanel Margin="50">
    <!-- The object to reflect,镜像 -->
    <Border Name="ReflectedVisual" Width="400">
      <Border.Background>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
          <GradientStop Offset="0.0" Color="#CCCCFF" />
          <GradientStop Offset="1.0" Color="White" />
        </LinearGradientBrush>
      </Border.Background>
      <StackPanel Orientation="Horizontal" Margin="10">        
        <TextBlock TextWrapping="Wrap" Width="200" Margin="10">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          Suspendisse vel ante. Donec luctus tortor sit amet est.
          Nullam pulvinar odio et wisi.
          Pellentesque quis magna. Sed pellentesque.
          Nulla euismod.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </TextBlock>
        <StackPanel>
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
        </StackPanel>
      </StackPanel>
    </Border>

    <Rectangle Height="1" Fill="Gray" HorizontalAlignment="Stretch" />
    <!-- The object to contain the reflection.-->
    <Rectangle 
      Height="{Binding Path=ActualHeight, ElementName=ReflectedVisual}" 
      Width="{Binding Path=ActualWidth, ElementName=ReflectedVisual}">
      <Rectangle.Fill>
        <!-- Creates the reflection. -->
        <VisualBrush 
          Opacity="0.75" Stretch="None"
          Visual="{Binding ElementName=ReflectedVisual}">
          <VisualBrush.RelativeTransform>
            <!-- Flip the reflection. -->
            <TransformGroup>
              <ScaleTransform ScaleX="1" ScaleY="-1" />
              <TranslateTransform  Y="1" />
            </TransformGroup>
          </VisualBrush.RelativeTransform>
        </VisualBrush>
      </Rectangle.Fill>
      <Rectangle.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <GradientStop Color="#FF000000" Offset="0.0" />
          <GradientStop Color="#33000000" Offset="0.5" />
          <GradientStop Color="#00000000" Offset="0.75" />
        </LinearGradientBrush>
      </Rectangle.OpacityMask>
      <Rectangle.BitmapEffect>
        <BlurBitmapEffect Radius="1.5" />
      </Rectangle.BitmapEffect>
    </Rectangle>
  </StackPanel>

DrawingBrush绘制:

   <Window.Resources>
       <DrawingBrush x:Key="test">
           <DrawingBrush.Drawing>
               <DrawingGroup>
                   <DrawingGroup.Children>
                       <GeometryDrawing>
                           <!-- 绘制矩形 -->
                           <GeometryDrawing.Geometry>
                               <RectangleGeometry RadiusX="0.2" RadiusY="0.5"
                                                      Rect="0.02,0.02,0.96,0.96" />
                           </GeometryDrawing.Geometry>
                           <!-- 矩形填充色 -->
                           <GeometryDrawing.Brush>
                               <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                   <GradientStop Color="Green" Offset="0" />
                                   <GradientStop Color="Red" Offset="1" />
                               </LinearGradientBrush>
                           </GeometryDrawing.Brush>
                           <!-- 矩形边框 -->
                           <GeometryDrawing.Pen>
                               <Pen Thickness="0.02">
                                   <Pen.Brush>
                                       <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                           <GradientStop Color="AliceBlue" Offset="0" />
                                           <GradientStop Color="Black" Offset="1" />
                                       </LinearGradientBrush>
                                   </Pen.Brush>
                               </Pen>
                           </GeometryDrawing.Pen>
                       </GeometryDrawing>
                   </DrawingGroup.Children>
               </DrawingGroup>
           </DrawingBrush.Drawing>
       </DrawingBrush>
   </Window.Resources>
   <Grid>
       <Button Background="{StaticResource ResourceKey=test}" FontSize="40" Content="Button" Height="113" HorizontalAlignment="Left" Margin="89,80,0,0" Name="button1" VerticalAlignment="Top" Width="292" />
   </Grid>

四、使用 DrawVisual绘制图形

DrawingBrush 使用 Drawing 对象绘制区域。 Drawing 对象描述一些可见内容，例如形状、位图、视频或一行文本。不同类型的 Drawing 描绘的是不同类型的内容。下面列出了不同类型的 Drawing 对象。

GeometryDrawing – 绘制形状。
ImageDrawing – 绘制图像。
GlyphRunDrawing – 绘制文本。
VideoDrawing – 播放音频或视频文件。
DrawingGroup – 绘制其他绘图。使用绘图组可以将其他绘图组合为一个复合绘图。

示例：

代码：

<Button Content="This is a Button" Width="120" Height="40">
  <Button.Background>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing Brush="LightBlue">
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="25,50" />
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="50,50" />
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="75,50" />
            </GeometryGroup>
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="1" Brush="Gray" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Button.Background>
</Button>

参考:https://www.cnblogs.com/lovezhangyu/p/10331012.html