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

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

使用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表示線條的粗細

 

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

18

 

 

<二>簡單的幾何圖形: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一樣

 

執行後出現的畫面:紅色外框,黃色填滿

19

 

<三>簡單的幾何圖形: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>
 

執行後出現的畫面:綠色外框,黃色填滿

20

 

 

<四>複合幾何圖形: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做結合,發揮自己的創意繪製出不一樣的圖形

下面這是我繪製的圖形

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

21