简介
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>
效果: