Silverlight中的Path

標籤：des   style   blog   http   color   使用   

原文:Silverlight中的Path

在Silverlight中Path可能由直線、曲線、或者其他簡單的繪圖物件組成。這篇文章旨在介紹如何使用XAML和C#來建立Path.

廢話先行

Path可能由直線、曲線、簡單繪圖物件（包括矩形、橢圓、和文本）組成。Path作為一個獨立的繪圖物件來工作，所以對Path進行的操作，會影響到組成它的所有部分。例如，假設一個Path由一個直線、矩形和橢圓組成，我們通過紅色畫筆來建立Path，那麼組成Path的部分（直線、矩形和橢圓）都將會使用紅色畫筆。

一個Path對象代表一個Path形狀並繪製出該Path.Path可以是封閉式和開放式兩種。封閉式Path有相同的起點和終點，開放式Path則會有不同的起點和終點。

如下代碼:

 <Path Stroke="Black" StrokeThickness="4"  Data="M 80,200 A 100,50 45 1 0 100,50" />

Stroke屬性設定Path線的顏色、StrokeThickness為線的寬度。Data屬性可以定義一個圖形、或者利用GeometryGroup來定義多個對象。

上述代碼輸出如下：

Path 基礎文法

 <Path Stroke="Black" StrokeThickness="4"  Data="M 80,200 A 100,50 45 1 0 100,50" />

這裡對Data做一下簡單的解釋，Silverlight提供了一種稱之為“迷你語言”的屬性句法，來描述如何畫出軌跡形狀，包括M（移動命令，起始點）、L（直線，結束點）、H（水平線）、V（垂直線）、C（三次貝茲路徑）、Q（兩次貝茲路徑）、A（橢圓弧曲線）、Z（結束命令）,具體大家可以參考MSDN。

一、在Path中使用Silverlight中的圖形

LineGeometry代表一個Line圖形，它定義的StartPoint和EndPoint屬性，分別代表Line的起點和終點。下面代碼建立一個LineGeometry

 <LineGeometry StartPoint="20,200" EndPoint="300,200" />

RectangleGeometry代表一個矩形圖形。屬性Rect中分別定義開始的點，和矩形的寬度和高度。下面代碼建立一個RectangleGeometry

 <RectangleGeometry Rect="80,167 150 30"/>

EllipseGeometry 代表一個橢圓圖形。屬性Center定義了橢圓的中心點，RadiusX和RadiusY分別定義了橢圓的寬和高。

 <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

GeometryGroup通過把上述標籤組合起來，來建立一個複雜幾何圖形。下面代碼就是通過GeometryGroup把上面三個標籤組合起來，並放到Path.Data中。

        <Path Stroke="Black" StrokeThickness="3" Fill="Blue" >

            <Path.Data>

                <GeometryGroup >

                    <LineGeometry StartPoint="20,200" EndPoint="300,200" />

                    <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

                    <RectangleGeometry Rect="80,167 150 30"/>

                </GeometryGroup>

            </Path.Data>

        </Path>

輸出如下：

GeometryGroup 的FillRule屬性指定了在GeometryGroup中交叉部分的狀態。有兩種狀態值，EvenOdd和ZonZero。預設為EvenOdd,交叉部分不填充，如果設定成NonZero則交叉部分填充(為FillRule設定成NonZero的狀態)。

二、動態建立Path

下面代碼為在cs代碼中動態建立Path的代碼，很簡單不解釋。

        public void CreateAPath()

        {

            // Create a blue and a black Brush

            SolidColorBrush blueBrush = new SolidColorBrush();

            blueBrush.Color = Colors.Blue;

            SolidColorBrush blackBrush = new SolidColorBrush();

            blackBrush.Color = Colors.Black;

            // Create a Path with black brush and blue fill

            Path bluePath = new Path();

            bluePath.Stroke = blackBrush;

            bluePath.StrokeThickness = 3;

            bluePath.Fill = blueBrush;

            // Create a line geometry

            LineGeometry blackLineGeometry = new LineGeometry();

            blackLineGeometry.StartPoint = new Point(20, 200);

            blackLineGeometry.EndPoint = new Point(300, 200);

            // Create an ellipse geometry 

            EllipseGeometry blackEllipseGeometry = new EllipseGeometry();

            blackEllipseGeometry.Center = new Point(80, 150);

            blackEllipseGeometry.RadiusX = 50;

            blackEllipseGeometry.RadiusY = 50;

            // Create a rectangle geometry 

            RectangleGeometry blackRectGeometry = new RectangleGeometry();

            Rect rct = new Rect();

            rct.X = 80;

            rct.Y = 167;

            rct.Width = 150;

            rct.Height = 30;

            blackRectGeometry.Rect = rct;

            // Add all the geometries to a GeometryGroup.

            GeometryGroup blueGeometryGroup = new GeometryGroup();

            blueGeometryGroup.Children.Add(blackLineGeometry);

            blueGeometryGroup.Children.Add(blackEllipseGeometry);

            blueGeometryGroup.Children.Add(blackRectGeometry);

            // Set Path.Data

            bluePath.Data = blueGeometryGroup;

            LayoutRoot.Children.Add(bluePath);

        }

如果Path只有一個圖形則不需要用GeometryGroup。直接設定Path的Data就行，Like thisO(∩_∩)O~:

        <Path Stroke="Black" StrokeThickness="3" Fill="Blue" >

            <Path.Data>

                <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

            </Path.Data>

        </Path>

三、格式化Path

可以使用Path的Fill屬性來填充Path，Fill屬性值可以為任意的畫刷(solid brush, linear gradient brush, radial gradient brush, image brush)，例如：

        <Path Stroke="Black" StrokeThickness="3"  >

            <Path.Data>

                <GeometryGroup >

                    <LineGeometry StartPoint="20,200" EndPoint="300,200" />

                    <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

                    <RectangleGeometry Rect="80,167 150 30"/>

                </GeometryGroup>

            </Path.Data>

            <Path.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

                    <GradientStop Color="Blue" Offset="0.25" />

                    <GradientStop Color="Orange" Offset="0.50" />

                    <GradientStop Color="Green" Offset="0.65" />

                    <GradientStop Color="Red" Offset="0.80" />

                </LinearGradientBrush>

            </Path.Fill>

        </Path>

輸出如形：

四、使用圖形畫刷來填充Path的背景

直接看範例：

            <Path.Fill >

                <ImageBrush ImageSource="dock.jpg" />

            </Path.Fill >

五、半透明的 Path

Opacity屬性和其它的一樣，範圍0-1,1為不透明，0為全部透明。

        <Path Stroke="Black" StrokeThickness="3"  Opacity="0.5" >

            <Path.Data>

                <GeometryGroup >

                    <LineGeometry StartPoint="20,200" EndPoint="300,200" />

                    <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

                    <RectangleGeometry Rect="80,167 150 30"/>

                </GeometryGroup>

            </Path.Data>

            <Path.Fill >

                <ImageBrush ImageSource="dock.jpg" />

            </Path.Fill >

        </Path>

效果如下：

總結：

在這篇文章中，我討論了如何在design_time使用XAML和在run_time通過C#來建立Path。我們也知道了如何通過通過Fill屬性來格式化Path。最後我們知道了如何給Path設定背景顏色和透明度。