[原]Wpf应用Path路径绘制圆弧

Posted 2020-11-04 lonelyxmas

原文:[原]Wpf应用Path路径绘制圆弧

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) 

绘制指令格式语法:

(1) 直线:Line(L)
格式：L 结束点坐标 或: l 结束点坐标。
比如：L 100,100 或 l 100 100。坐标值可以使用x,y（中间用英文逗号隔开）或x y（中间用半角空格隔开）的形式。

(2) 水平直线  Horizontal line(H)：绘制从当前点到指定x坐标的直线。
格式：H x值 或 h x值(x为System.Double类型的值)
比如：H 100或h 100，也可以是：H 100.00或h 100.00等形式。

(3) 垂直直线 Vertical line(V)：绘制从当前点到指定y坐标的直线。
格式：V y值 或 v y值(y为System.Double类型的值)
比如：V 100或y 100，也可以是：V 100.00或v 100.00等形式。

(4) 三次方程式贝塞尔曲线 Cubic Bezier curve(C)：通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线。
格式：C 第一控制点 第二控制点 结束点 或 c 第一控制点 第二控制点 结束点
比如：C 100,200 200,400 300,200 或 c 100,200 200,400 300,200
其中，点(100,200)为第一控制点，点(200,400)为第二控制点，点(300,200)为结束点。

(5) 二次方程式贝塞尔曲线 Quadratic Bezier curve(Q)：通过指定的一个控制点来绘制由当前点到指定结束点间的二次方程贝塞尔曲线。
格式：Q 控制点 结束点 或 q 控制点 结束点
比如：q 100,200 300,200。其中，点(100,200)为控制点，点(300,200)为结束点。

(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)：通过一个指定点来“平滑地”控制当前点到指定点的贝塞尔曲线。
格式：S 控制点 结束点 或 s 控制点 结束点
比如：S 100,200 200,300

(7) 平滑二次方程式贝塞尔曲线 smooth quadratic Bezier curve(T)：与平滑三次方程贝塞尔曲线类似。
格式：T 控制点 结束点 或 t 控制点 结束点
比如：T 100,200 200,300

(8) 椭圆圆弧: elliptical Arc(A) : 在当前点与指定结束点间绘制圆弧。
A 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点
或：
a 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点
尺寸(Size): System.Windows.Size类型，指定椭圆圆弧X,Y方向上的半径值。
旋转角度（rotationAngle）：System.Double类型。
圆弧旋转角度值（rotationAngle）：椭圆弧的旋转角度值。 
优势弧的标记（isLargeArcFlag）：是否为优势弧，如果弧的角度大于等于180度，则设为1，否则为0。 
正负角度标记（sweepDirectionFlag）：当正角方向绘制时设为1，否则为0。 
结束点（endPoint）：System.Windows.Point类型。

3. 关闭指令(close Command):用以将图形的首、尾点用直线连接，以形成一个封闭的区域。
用Z或z表示。

 

 1    <Canvas Margin="123,0,10,22">
 2             <Path  Stroke="#FFE23838" StrokeThickness="5" Width="500" Height="800" StrokeDashArray="2 1" StrokeDashCap="Round">
 3                 <Path.Data>
 4                     <GeometryGroup>
 5                         <PathGeometry Figures="M 100,10 A 100,100 0 0 0 200,10" />
 6                         <PathGeometry Figures="M 100,50 A 100,100 0 1 0 200,50" />
 7                         <PathGeometry Figures="M 100,450 A 100,100 0 1 1 200,450" />
 8                         <PathGeometry Figures="M 100,500 A 100,50 45 1 0 300,500" />
 9                     </GeometryGroup>
10                 </Path.Data>
11             </Path>
12         </Canvas>

效果图  

 

PS:

<PathGeometry Figures="M 100,500 A 100,50 45 1 0 300,500" /> 
红色部分角度设置一直不好用，不知道为什么？

 

详细语法说明：WPF中图形表示语法详解（Path之Data属性语法）