绘图: Shape, Path

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Shape - 图形

Path - 路径

示例
1、演示“Shape”相关知识点
Drawing/Shape.xaml

<Page

    x:Class="Windows10.Drawing.Shape"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Drawing"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="10 0 10 10">

            <!--

                Windows.UI.Xaml.Shapes.Shape - 图形

            -->

            <!--

                Line - 画直线

            -->

            <!--

                X1, Y1 - 直线起点坐标

                X2, Y2 - 直线终点坐标

            -->

            <Line X1="0" Y1="0" X2="300" Y2="100" Stroke="Blue" StrokeThickness="3" />

            <!--

                Rectangle - 画矩形

            -->

            <!--

                Width - 矩形宽

                Height - 矩形高

            -->

            <Rectangle Width="200" Height="50" Fill="Red" Stroke="Yellow" StrokeThickness="3" />

            <!--

                Polyline - 画折线（即多条连接起来的直线）

            -->

            <!--

                Points - 折线的每个点的坐标

            -->

            <Polyline Points="10,100 50,10 100,100" Stroke="Green" StrokeThickness="3" />

            <!--

                Polygon - 画多边形

            -->

            <!--

                Points - 多边形的每个点的坐标

            -->

            <Polygon Points="50,50 100,50 300,100 200,100 100,200" Fill="Yellow" Stroke="Red" StrokeThickness="6" />

            <!--

                Ellipse - 画椭圆

            -->

            <!--

                Width - 椭圆宽

                Height - 椭圆高

            -->

            <Ellipse Width="100" Height="50" Fill="Orange" Stroke="Red" StrokeThickness="6" />

            <!--

                矩形或椭圆在不设置宽和高时，可以指定其 Stretch 用以指定其相对于其容器的拉伸方式

                Stretch - 拉伸方式（Windows.UI.Xaml.Media.Stretch 枚举）

                    Fill - 充满容器，不保留长宽比

                    None - 不做任何处理，如果图片比容器大，则多出的部分被剪裁

                    Uniform - 等比缩放到容器（默认值）

                    UniformToFill - 充满容器，且保留长宽比，多出的部分被剪裁

            -->

            <Grid Width="200" Height="100" HorizontalAlignment="Left" Background="Black">

                <Ellipse Fill="Orange" Stroke="Red" StrokeThickness="6" Stretch="UniformToFill" />

            </Grid>

        </StackPanel>

    </Grid>

</Page>

2、演示“Path”相关知识点
Drawing/Path.xaml

<Page

    x:Class="Windows10.Drawing.Path"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Drawing"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="10 0 10 10" HorizontalAlignment="Left">

            <!--

                Windows.UI.Xaml.Shapes.Path - 路径，以下演示如何通过 Path 绘制图形

                    Data - 要绘制的 Windows.UI.Xaml.Media.Geometry 数据（Geometry 有很多派生类，后面会一一介绍，其实都不太常用，最常用的就是直接画路径，见最后面）

            -->

            <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5">

                <Path.Data>

                    <!--

                        EllipseGeometry - 椭圆

                            Center - 原点坐标

                            RadiusX - X轴半径

                            RadiusY - Y轴半径

                    -->

                    <EllipseGeometry Center="50,25" RadiusX="50" RadiusY="25" />

                </Path.Data>

            </Path>

            <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5">

                <Path.Data>

                    <!--

                        RectangleGeometry - 矩形

                            Rect - 左上角点的坐标，矩形宽，矩形高

                    -->

                    <RectangleGeometry Rect="100,0,100,50" />

                </Path.Data>

            </Path>

            <Path Stroke="Blue" StrokeThickness="6" Margin="5">

                <Path.Data>

                    <!--

                        LineGeometry - 线

                            StartPoint - 起点坐标

                            EndPoint - 终点坐标

                    -->

                    <LineGeometry StartPoint="200,0" EndPoint="300,50" />

                </Path.Data>

            </Path>

            <Path Stroke="Blue" StrokeThickness="6" Margin="5">

                <Path.Data>

                    <!--

                        PathGeometry - 路径，一个可能由弧、曲线、椭圆、直线、矩形组成的复杂图形

                    -->

                    <PathGeometry>

                        <PathGeometry.Figures>

                            <!--

                                StartPoint - 起点坐标

                            -->

                            <PathFigure StartPoint="300,0">

                                <PathFigure.Segments>

                                    <!--

                                        Path 的 Segment 集合

                                    -->

                                    <PathSegmentCollection>

                                        <!--

                                            LineSegment - 单一线段

                                            PolyLineSegment - 线段集合

                                            ArcSegment - 弧（椭圆的一部分）

                                            BezierSegment - 两点之间的一条三次贝塞尔曲线

                                            QuadraticBezierSegment - 两点之间的一条二次贝塞尔曲线

                                            PolyBezierSegment - 一条或多条三次贝塞尔曲线

                                            PolyQuadraticBezierSegment - 一条或多条二次贝塞尔曲线

                                        -->

                                        <!--

                                            Size - 弧的 X 轴和 Y 轴半径

                                            Point - 该 Segment 的终点坐标，即下一个 Segment 的起点坐标

                                        -->

                                        <ArcSegment Size="100,25" Point="400,50" />

                                        <!--

                                            Point - 该 Segment 的终点坐标，即下一个 Segment 的起点坐标

                                        -->

                                        <LineSegment Point="500,100" />

                                    </PathSegmentCollection>

                                </PathFigure.Segments>

                            </PathFigure>

                        </PathGeometry.Figures>

                    </PathGeometry>

                </Path.Data>

            </Path>

            <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5">

                <Path.Data>

                    <!--

                        本例演示 GeometryGroup 的 EvenOdd 填充规则

                        GeometryGroup - 由一个或多个 Geometry 组成

                            FillRule - 填充规则（System.Windows.Media.FillRule 枚举）

                                EvenOdd - 确定一个点是否位于填充区域内的规则，具体方法是从该点沿任意方向画一条无限长的射线，然后计算该射线在给定形状中因交叉而形成的路径段数。如果该数为奇数，则点在内部；如果为偶数，则点在外部。

                                Nonzero - 确定一个点是否位于填充区域内的规则，具体方法是从该点沿任意方向画一条无限长的射线，然后检查形状段与该射线的交点。从零开始计数，每当线段从左向右穿过该射线时加 1，而每当路径段从右向左穿过该射线时减 1。计算交点的数目后，如果结果为零，则说明该点位于路径外部。否则，它位于路径内部。

                    -->

                    <GeometryGroup FillRule="EvenOdd">

                        <LineGeometry StartPoint="200,0" EndPoint="300,100" />

                        <EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" />

                        <RectangleGeometry Rect="200, 0, 100, 100" />

                    </GeometryGroup>

                </Path.Data>

            </Path>

            <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5">

                <Path.Data>

                    <!--

                        本例演示 GeometryGroup 的 Nonzero 填充规则

                        GeometryGroup - 由一个或多个 Geometry 组成

                            FillRule - 填充规则（System.Windows.Media.FillRule 枚举）

                                EvenOdd - 确定一个点是否位于填充区域内的规则，具体方法是从该点沿任意方向画一条无限长的射线，然后计算该射线在给定形状中因交叉而形成的路径段数。如果该数为奇数，则点在内部；如果为偶数，则点在外部。

                                Nonzero - 确定一个点是否位于填充区域内的规则，具体方法是从该点沿任意方向画一条无限长的射线，然后检查形状段与该射线的交点。从零开始计数，每当线段从左向右穿过该射线时加 1，而每当路径段从右向左穿过该射线时减 1。计算交点的数目后，如果结果为零，则说明该点位于路径外部。否则，它位于路径内部。

                    -->

                    <GeometryGroup FillRule="Nonzero">

                        <LineGeometry StartPoint="200,0" EndPoint="300,100" />

                        <EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" />

                        <RectangleGeometry Rect="200, 0, 100, 100" />

                    </GeometryGroup>

                </Path.Data>

            </Path>

            <!--

                演示 Path 最常用的用法，即直接画

                1、直接指定 Geometry 数据

                2、一般都是要借助工具，最流行的是“Metro Studio”，其 4.0 以上的版本可以在设计完后显示对应的 Geometry 代码

            -->

            <Path Fill="Black" Stroke="White" StrokeThickness="6" Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" Margin="5" /> 

        </StackPanel>

    </Grid>

</Page>