WPF系列八：图形控件Path

news2025/1/13 23:26:43

简介

Path控件支持一种称为路径迷你语言（Path Mini-Language）的紧凑字符串格式，用于描述复杂的几何图形。这种语言通过一系列命令字母和坐标来定义路径上的点和线段，最终绘制出想要的图形。

绘制任意形状：可以用来绘制直线、曲线、多边形、椭圆、矩形等基本图形，也可以组合这些基本图形创建复杂形状。
应用样式和效果：支持填充颜色、轮廓线（笔触）、渐变、图像刷子以及各种视觉效果。
动画化图形：可以对图形的位置、大小、旋转角度等属性进行动画处理。
作为剪辑区域：可以将 Path 用作其他 UI 元素的剪辑路径，以控制其可见区域。

属性

Data：定义要绘制的几何对象或路径指令。这是 Path 的核心属性，决定了它的外形。
Fill：指定用于填充 Path 内部的画刷（Brush），比如纯色、渐变或图像。
Stroke：设置 Path 边缘的颜色或画刷。
StrokeThickness：设定 Path 边缘的宽度。
Stretch：控制如何拉伸 Path 内的内容以适应其尺寸。可用值有 None, Fill, Uniform, 和 UniformToFill。
RenderTransform：允许你对 Path 应用变换，如旋转、缩放和平移等。

命令

M/m - Move To：将当前位置移动到新的位置而不绘制任何东西。大写 M 表示绝对坐标，小写 m 表示相对坐标。
L/l - Line To：从当前位置画一条直线到指定的新位置。同样地，大写 L 是绝对坐标，小写 l 是相对坐标。
H/h - Horizontal Line To：画一条水平线到指定的 X 坐标位置。大写 H 使用绝对坐标，小写 h 使用相对坐标。
V/v - Vertical Line To：画一条垂直线到指定的 Y 坐标位置。大写 V 使用绝对坐标，小写 v 使用相对坐标。
C/c - Curve To：三次贝塞尔曲线。需要三个点：两个控制点和一个结束点。大写 C 使用绝对坐标，小写 c 使用相对坐标。
S/s - Smooth Curve To：平滑三次贝塞尔曲线。仅需指定结束点，第一个控制点自动计算为上一个 C 或 S 的反射点。大写 S 使用绝对坐标，小写 s 使用相对坐标。
Q/q - Quadratic Bezier Curve To：二次贝塞尔曲线。需要一个控制点和一个结束点。大写 Q 使用绝对坐标，小写 q 使用相对坐标。
T/t - Smooth Quadratic Bezier Curve To：平滑二次贝塞尔曲线。仅需指定结束点，控制点根据前一个 Q 或 T 自动计算。大写 T 使用绝对坐标，小写 t 使用相对坐标。
A/a - Elliptical Arc To：椭圆弧。需要多个参数来定义弧的形状、旋转角度、是否大弧或小弧、扫掠方向以及终点。大写 A 使用绝对坐标，小写 a 使用相对坐标。
Z/z - Close Path：关闭路径，即画一条直线回到路径的起始点。

示例

绘制一段椭圆弧，它位于中心为 (100,100) 的点，并且以半径 50x50 绘制，直到到达 (500,100)，最后用 Z 指令闭合路径。

代码：

<Window x:Class="WPFDemo.Line.Views.PathWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="PathWindow" Height="450" Width="800">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <!-- 创建一个半圆图形-->
        <Path Data="M 100,100 A 50,50 0 0,1 500,100 Z" Stroke="Black" StrokeThickness="2" Fill="LightBlue"/>
    </Grid>
</Window>

效果：

绘制一个三角形，起点在 (10,100)，然后依次连接到 (100,100) 和 (100,50)，最后用 Z 指令闭合路径。

代码：

<Window x:Class="WPFDemo.Line.Views.PathWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="PathWindow1" Height="450" Width="800">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <!--创建一个三角形-->
        <Path Stroke="Red" StrokeThickness="2" Fill="Yellow" Data="M 100,100 L 400,100 L 400,400 Z" />
    </Grid>
</Window>

效果：

绘制一个三次贝塞尔曲线，从 (10,100) 开始，通过控制点 (50,200) 和 (150,10)，到达终点 (200,100)，，最后用 Z 指令闭合路径。

代码：

<Window x:Class="WPFDemo.Line.Views.PathWindow2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="PathWindow2" Height="450" Width="800">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <!--创建一个三次贝塞尔曲线-->
        <Path Stroke="Black"  StrokeThickness="2" Fill="Red" Data="M 10,100 C 50,200 150,10 200,100 Z"/>
    </Grid>
</Window>

效果：