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

曾经终败给现在 2022-12-20 05:45 147阅读 0赞

### 1 Canvas和基本形状 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70][]

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

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

WPF中各种颜色名如下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1][]

### 2 路径和几何元素  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 2][]

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

### 3 线条几何图形 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 3][]

### 4 路径中画贝塞尔曲线  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 5][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 6][]

如下代码；  
<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 绘制问号和齿轮  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 8][]

问号：  
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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70]: /images/20221120/f48a9a2162ce43b1928b92a758135a39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1]: /images/20221120/75635ae631f045299aebbda040412d18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201110222908997.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020111022291812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201110222926455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020111022294565.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201110222953748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201110223002244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201110223010624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24=,size_16,color_FFFFFF,t_70