WPF基本图形

 

一、WPF的基本图形

一>形状绘图

1. Line：直线段，可以设置笔触（Stroke）。直线是最简单的图形。使用X1、Y1两个属性设置起点坐标，X2、Y2两个属性设置终点坐标。控制起点/终点坐标可以实现平行、交错等效果。Stroke（笔触）属性的数据类型是Brush（画刷）。

看下面一个例子：

        <!--StrokeThickness：图形轮廓的粗细度；StrokeDashArray：形状轮廓的虚线间隙的样式；StrokeStartLineCap/StrokeEndLineCap：直线始端/末端的图形样式，属性值有Flat、Round、Square、Triangle-->

        <Line X1="10" Y1="20" X2="280" Y2="20" Stroke="Pink" StrokeThickness="10"/>

        <Line X1="10" Y1="50" X2="280" Y2="50" Stroke="Black" StrokeDashArray="3" StrokeThickness="1"/>

        <Line X1="10" Y1="80" X2="280" Y2="80" Stroke="Pink" StrokeEndLineCap="Flat" StrokeThickness="10"/>

        <Line X1="10" Y1="110" X2="280" Y2="110" Stroke="Pink" StrokeEndLineCap="Round" StrokeThickness="10"/>

        <Line X1="10" Y1="140" X2="280" Y2="140" Stroke="Pink" StrokeEndLineCap="Square" StrokeThickness="10"/>

        <Line X1="10" Y1="170" X2="280" Y2="170" Stroke="Pink" StrokeEndLineCap="Triangle" StrokeThickness="10"/>

效果如下：

1. Rectangle：矩形，由笔触（Stroke）和填充（Fill）构成。

看下面一个例子：

<Rectangle Width="100" Height="100" Fill="Pink" Stroke="Red" StrokeThickness="2"/>

效果如下：

看下面一个例子，将矩形绘制成圆角的矩形

<Rectangle Width="100" Height="100" Fill="Pink" Stroke="Red" StrokeThickness="2" RadiusX="30"  RadiusY="20"/>

效果如下：

1. Ellipse椭圆，由笔触（Stroke）和填充（Fill）构成。Width和Height相等的椭圆便是正圆。

看下面一个例子：

<Ellipse Width="120" Height="80" Fill="Pink" Stroke="Red" StrokeThickness="2" />

效果如下：

1. Polygon多边形，

看下面一个例子：

<Polygon Points="100,150 400,150 140,320 250,50 360,320" StrokeThickness="2" Stroke="Pink"/>

效果图如下：

1. Polyline多线型，由多条首尾相接的直线组成。

看下面一个例子：

<Polyline Points="50,200 100,80 200,80 150,120" StrokeThickness="2" Stroke="Pink"/>

效果图如下：

1. Path路径，可以将直线、弧形、曲线等基本元素结合起来，形成更复杂的图形，Path最重要的属性：Data

看下面一个例子：

<!-- M：移动到起始点 C：三次方贝塞尔曲线-->

<Path Stroke="Red" StrokeThickness="2" Data="M 240,240 C 160,80 320,80 240,240"/>

效果图如下：

二>几何绘图

       图形绘图与几何绘图的区别：

• 图形对象可以独立存在，可以独立绘制出具体需要的图形，
• 几何图形对象没有具体的形体，他需要依赖于某一对象元素而存在，不能直接呈现在画板上

几何绘图包含5种对象：

1. LineGeometry：直线几何图形
2. RectangleGeometry：矩形几何图形
3. EllipseGeometry：椭圆几何图形
4. PathGeometry：路径几何图形
5. GeometryGroup：由多个基本几何图形组合在一起，形成的几何图形组

看下面一个例子：

<Grid Height="469" VerticalAlignment="Bottom">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="239*"/>

            <ColumnDefinition Width="253*"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="100*"/>

            <RowDefinition Height="100*"/>

            <RowDefinition Height="100*"/>

            <RowDefinition Height="169*"/>

        </Grid.RowDefinitions>

        <!--直线-->

        <Path Stroke="Blue" StrokeThickness="2" Grid.Column="0" Grid.Row="0">

            <Path.Data>

                <LineGeometry StartPoint="20,40" EndPoint="200,60"/>

            </Path.Data>

        </Path>

        <!--矩形路径-->

        <Path Stroke="Pink" StrokeThickness="2" Grid.Column="1" Grid.Row="0">

            <Path.Data>

              <!--Rect="40,20,60,60" 40,20为坐标起点，第三位数为宽度，第四位数为长度-->

                <RectangleGeometry Rect="40,20,60,60" RadiusX="10" RadiusY="10"/>

            </Path.Data>

        </Path>

        <!--椭圆路径-->

        <Path Stroke="Yellow" Fill="Orange" Grid.Column="0" Grid.Row="1">

            <Path.Data>

                <EllipseGeometry Center="100,50" RadiusX="60" RadiusY="40"></EllipseGeometry>

            </Path.Data>

        </Path>

                   <!—几何图形组-->

                   <Path Fill="Pink" Stroke="Red" StrokeThickness="2">

            <Path.Data>

                <GeometryGroup FillRule="EvenOdd">

                    <EllipseGeometry Center="80,80" RadiusX="30" RadiusY="60"/>

                    <LineGeometry StartPoint="20,40" EndPoint="200,60"/>

                    <RectangleGeometry Rect="20,20,60,60" RadiusX="10" RadiusY="10"/>

                </GeometryGroup>

            </Path.Data>

        </Path>

</Grid>

效果图如下：