[Windows 8 App]圖形-----【Geometry】

2013-11-20

1018
0
Windows 8 控制項
2013-12-03

使用Geometry能產生二為形狀的幾何圖形

Geometry分兩類：簡單的幾何圖形和複合幾何圖形

簡單的幾何圖形：【LineGeometry】、【RectangleGeometry】、【EllipseGeometry】，這些可以用來建立基本的幾何圖形，直線、矩形、圓形

複合幾何圖形：【GeometryGroup】可以將所擁有的幾何圖形組合起來

<一>簡單的幾何圖形：LineGeometry

LineGeometry是指定起點和終點來建立直線。

我們就用範例來簡單的看一下LineGeometry

新增一個空白專案，取名為【LineGeometry】，開啟【MainPage.xaml】

程式碼如下：

<Page
    x:Class="LineGeometry.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LineGeometry"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Path Stroke="Red" StrokeThickness="10">
            <Path.Data>
                <LineGeometry StartPoint="600,100" EndPoint="500,500" />
            </Path.Data>
        </Path>
    </Grid>
</Page>

Stroke表示線條顯示的顏色

StrokeThickness表示線條的粗細

執行後出現的畫面：紅色直線

<二>簡單的幾何圖形：RectangleGeometry

RectangleGeometry是由Rect屬性來定義，Rect屬性有四個參數來定義位置、高度、寬度，前面二個參數是起點座標位置，後面二點是高度與寬度

新增一個空白專案，取名為【RectangleGeometry】，開啟【MainPage.xaml】來實作在Grid元素中

我們就來做一個範例給大家看看，程式碼如下：

<Page
    x:Class="RectangleGeometry.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RectangleGeometry"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Path Fill="Yellow" Stroke="Red" StrokeThickness="5">
            <Path.Data>
                <RectangleGeometry Rect="400,400,200,200" />
            </Path.Data>
        </Path>
    </Grid>
</Page>

<Path Fill="Yellow" Stroke="Red" StrokeThickness="5">這行呢，Fill是表示要填滿此RectangleGeometry的顏色，Stroke和StrokeThickness與上面介紹的LineGeometry一樣

執行後出現的畫面：紅色外框，黃色填滿

<三>簡單的幾何圖形：EllipseGeometry

EllipseGeometry是用來繪製橢圓形的，Center屬性是表示圓心的座標，RadiusX和RadiusY是表示X軸和Y軸的半徑長度

我們來用實作一個橢圓形的範例，新增一個空白專案，取名為【EllipseGeometry】，開啟【MainPage.xaml】

程式碼如下：

<Page
    x:Class="EllipseGeometry.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:EllipseGeometry"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Path Fill="Yellow" Stroke="Green" StrokeThickness="20">
            <Path.Data>
                <EllipseGeometry Center="680,380" RadiusX="300" RadiusY="300" />
            </Path.Data>
        </Path>
    </Grid>
</Page>

執行後出現的畫面：綠色外框，黃色填滿

<四>複合幾何圖形：GeometryGroup

GeometryGroup是將Geometry的子類別的組合體，我們做個範例來展示如何將Geometry組合起來

新增一個空白專案，取名為【EllipseGeometry】，開啟【MainPage.xaml】

程式碼如下：

<Page
    x:Class="GeometryGroup.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GeometryGroup"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Path Fill="Yellow" Stroke="Green" StrokeThickness="7">
            <Path.Data>
                <GeometryGroup FillRule="EvenOdd">
                    <EllipseGeometry Center="500,300" RadiusX="200" RadiusY="200" />
                    <EllipseGeometry Center="600,300" RadiusX="200" RadiusY="200" />
                    <EllipseGeometry Center="550,300" RadiusX="100" RadiusY="100" />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Grid>
</Page>

當幾何圖形交錯再一起時，可以使用<GeometryGroup FillRule="EvenOdd">

FillRule有二種值，EvenOdd和Nonzero，EvenOdd表示偶數交錯的部分，不會填滿，相反的，基數的部分，會填滿

Nonzero表示在任何情況下都會填滿

繪製復合的圖形部分，由上面介紹的LineGeometry、RectangleGeometry、EllipseGeometry做結合，發揮自己的創意繪製出不一樣的圖形

下面這是我繪製的圖形

設計畫面:繪製出三的圓，交錯再一起所產生的畫面

回首頁