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

最新推荐文章于 2024-09-04 00:06:44 发布

bcbobo21cn

最新推荐文章于 2024-09-04 00:06:44 发布

阅读量2k

点赞数 1

分类专栏： .Net 文章标签： wpf canvas path LineGeometry

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/109608897

版权

.Net 专栏收录该内容

383 篇文章 14 订阅

订阅专栏

1 Canvas和基本形状

<Page
  xmlns="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 路径和几何元素

<Page
  xmlns="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 类:表示线条的几何图形；

<Page
  xmlns="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 路径中画贝塞尔曲线

<Page
  xmlns="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 利用路径中的点绘制形状

<Page
  xmlns="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

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