WPF中形状Shape、Path、Geometry

1、shape介绍

　　1.1、形状Shape包括Ellipse、Line、Path、Polygon、Polyline、Rectangle

　　1.2、Shape对象派生于UIElement

　　1.3、Shape对象共享属性

　　　　*Stroke——绘制形状的轮廓方式(如边框颜色)

　　　　*StrokeThickness——轮廓的粗细

　　　　*Fill——绘制形状内部方式

　　1.4、Canvas面板是用于创建复杂绘图特别理想的选择，支持对其子对象的绝对定位

<Window x:Class="ShapeDemo.MainWindow"
        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:ShapeDemo"
        mc:Ignorable="d"
        Title="ShapeDemo" Height="310" Width="310">
    <Grid>
        <Canvas Height="300" Width="300">
            <Line X1="10" Y1="10" X2="50" Y2="50" Stroke="Blue" StrokeThickness="4"/>
            <Line X1="10" Y1="10" X2="50" Y2="50" StrokeThickness="4" Canvas.Left="100">
                <Line.Stroke>
                    <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="Red" Offset="0"/>
                            <GradientStop Color="Blue" Offset="0.25"/>
                        </RadialGradientBrush.GradientStops>
                    </RadialGradientBrush>
                </Line.Stroke>
            </Line>
            <Line X1="10" Y1="60" X2="150" Y2="60" Stroke="Black" StrokeThickness="4"/>
        </Canvas>
    </Grid>
</Window>

　　效果如下：

2.Path和Geometry

2.1、Path（路径）： 它是一个UI 元素（控件）。
　　它的作用是“显示”。它负责处理填充颜色（Fill）、边框颜色（Stroke）、边框粗细（StrokeThickness）等视觉属性。
2.2、Geometry（几何）： 它是数据（数学描述）。
　　它的作用是“定义形状”。它只负责计算坐标、线条走向、曲线弧度，它自己不会显示在屏幕上（没有颜色，不参与布局）。

可以把Geometry看成是剧本，Path看成是演员，Geometry对象赋值给Path.Data后，Path就把剧本画出来(表演出来)

如绘制二次方贝塞尔曲线:

        <Path Stroke="#2456ED" StrokeThickness="4">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure StartPoint="10,100">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <QuadraticBezierSegment Point1="200,200" Point2="300,100"/>
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>