WPF canvas、基本图形、path几个示例

1 Canvas和基本形状

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid><Canvas Margin="0,0,0,0" Background="White"><Rectangle Fill="Orange" Stroke="SeaGreen" StrokeThickness="3"Width="250" Height="220" Canvas.Left="150" Canvas.Top="100"/><Ellipse Fill="LimeGreen" Stroke="Green" StrokeThickness="3"Width="250" Height="100"Panel.ZIndex="1" Canvas.Left="55" Canvas.Top="25"/></Canvas></Grid>
</Page>

通过 Canvas 元素，可以根据 x 和 y 绝对坐标定位内容。可以在唯一的位置绘制元素；或者，如果多个元素占用了相同的坐标，则这些元素在标记中的出现顺序可决定它们的绘制顺序。

Canvas.Left，Canvas.Top，定义了形状在Canvas中的位置；Stroke，边框颜色；StrokeThickness，边框像素宽度；

WPF中各种颜色名如下；

2 路径和几何元素

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid><Canvas><Path Stroke="SeaGreen" StrokeThickness="5"><Path.Data><EllipseGeometry Center="100,100" RadiusX="70" RadiusY="30"></EllipseGeometry></Path.Data></Path></Canvas></Grid>
</Page>

可以在路径中使用几何元素，如EllipseGeometry；

3 线条几何图形

LineGeometry 类:表示线条的几何图形；

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid ShowGridLines="True" HorizontalAlignment="Left"><Canvas Height="200" Width="200"><Path Stroke="SeaGreen" StrokeThickness="5"><Path.Data><LineGeometry StartPoint="2,2" EndPoint="50,100"></LineGeometry></Path.Data></Path></Canvas></Grid>
</Page>

4 路径中画贝塞尔曲线

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid>  <Path  Stroke="Green" StrokeThickness="3"><Path.Data><PathGeometry><PathFigure StartPoint="10,10"><BezierSegment Point1="220,40" Point2="300,430" Point3="600,330"  IsSmoothJoin="True"/></PathFigure></PathGeometry></Path.Data></Path></Grid>
</Page>

也可以在路径中画贝塞尔曲线；贝塞尔曲线是由控制点定义的；改变控制点坐标，图形如下；

5 利用路径中的点绘制形状

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid>  <Path Stroke="Red" Fill="DarkGreen" Data="M 100,100 A 50,30 0 0 0 100,200 A 65 50 0 0 1 100,300"></Path></Grid>
</Page>

如下代码；
<Path x:Name="path_data" Stroke="#FFE23838" StrokeThickness="1" Data="M 100,0 A 50,100 0 0 0 100,200"></Path>
含义如下；
M 起始点（100，0） A 尺寸（X50，Y100半径）圆弧旋转角度值（0）优势弧的标记（否，弧角度小于180）正负角度标记（0 逆时针画圆）结束点（100，200）

6 绘制问号和齿轮

问号：
M 0 0 l 0 4.4 l 10.6 0 a 1.9 1.5 0 0 1 1.9 1.5
l 0 4 a 2 2.3 0 0 1 -2 2.3 l -2.7 0
a 4.4 5.5 0 0 0 -4.4 5.5 l 0 7.7 l 4.6 0 l 0 -7.0
a 1.8 1.9 0 0 1 1.8 -1.9 l 2.6 0
a 4.5 4.5 0 0 0 4.5 -4.5 l 0 -6.8
a 5.7 5.3 0 0 0 -5.7 -5.3z
m 3.6 28.1 l4.7 0 l 0 4.7 l -4.7 0z

齿轮：
M 15 7.5 a 7.5 7.5 0 0 0 0 15 a 7.5 7.5 0 0 0 0 -15
M 19 0.6 A 15 15 0 0 0 11.2 0.6 L 12.2 3.9 A 11.5 11.5 0 0 0 7.0 6.8 L 4.5 4.3
A 15 15 0 0 0 0.5 11.4 L 3.8 12.2 A 11.5 11.5 0 0 0 3.9 18 L 0.7 19
A 15 15 0 0 0 4.4 25.5 L 6.9 23 A 11.5 11.5 0 0 0 12 26.1 L 11 29.5
A 15 15 0 0 0 18.8 29.4 L 17.8 26.1 A 11.5 11.5 0 0 0 23 23.2 L25.4 25.7
A 15 15 0 0 0 29.5 18.7L 26.1 17.8 A 11.5 11.5 0 0 0 26 11.9L 29.4 11
A 15 15 0 0 0 25.5 4.5 L 23.2 6.9 A 11.5 11.5 0 0 0 18 3.9 Z

路径的作用不止是绘制形状；可以跟事件结合；我以前做过，在窗体上绘制手的形状，鼠标点在手形范围之内，不触发任何事件，点在手形范围之外，触发窗体事件；