Silverlight圖形:幾何圖形 -電腦資料

電腦資料 時(shí)間:2019-01-01 我要投稿
【m.clearvueentertainment.com - 電腦資料】

什么是 Geometry?

Geometry 對象(如 EllipseGeometry、PathGeometry 和 GeometryGroup)可以用于描繪 二維 (2-D) 形狀的幾何圖形,

Silverlight圖形:幾何圖形

。這些幾何圖形的描繪具有許多用途,例如,定義一個要繪制到 屏幕的形狀或者定義剪輯區(qū)域。Geometry 對象可以很簡單(如矩形和圓),也可以是基于兩 個或更多個 Geometry 對象創(chuàng)建的復(fù)合形狀。使用 PathGeometry 對象可以創(chuàng)建更復(fù)雜的幾 何圖形,這些對象可用于描繪弧線和曲線。

Geometry 與 Shape 的比較

Geometry 和 Shape 類的相似之處在于它們均描繪二維形狀(例如,比較 EllipseGeometry 和 Ellipse),但它們之間也存在一些重要的區(qū)別。例如,Shape 對象是 UIElement 對象,而 Geometry 對象不是。因?yàn)槭?UIElement 對象,所以 Shape 對象可以 進(jìn)行自我呈現(xiàn)并具有 Opacity、OpacityMask 以及 Geometry 對象所沒有的其他圖形屬性。 盡管 Shape 對象比 Geometry 對象更易于使用,但 Geometry 對象更通用。

一個 Shape(Path 類)使用 Geometry 來描繪內(nèi)容。通過使用 Geometry 設(shè)置 Path 的 Data 屬性以及設(shè)置它的 Fill 和 Stroke 屬性,可以呈現(xiàn) Geometry。

采用 Geometry 的常見屬性

下表列出了采用 Geometry 對象的一些屬性。

類型 屬性 Path Data UIElement Clip

簡單的幾何圖形類型

Geometry 對象可以分為三個類別:簡單幾何圖形、路徑幾何圖形以及復(fù)合幾何圖形。

簡單的幾何圖形類包括 LineGeometry、RectangleGeometry 和 EllipseGeometry,用于 創(chuàng)建基本的幾何形狀,如直線、矩形和圓。

LineGeometry 通過指定直線的起點(diǎn)和終點(diǎn)來定義。

RectangleGeometry 通過使用 Rect 結(jié)構(gòu)來定義,該結(jié)構(gòu)指定矩形的相對位置、高度和寬 度。您可以通過設(shè)置 RadiusX 和 RadiusY 屬性來創(chuàng)建圓角矩形。

EllipseGeometry 通過中心點(diǎn)、x 半徑和 y 半徑來定義。

盡管可以通過使用 PathGeometry 或通過將 Geometry 對象組合在一起來創(chuàng)建這些形狀以 及更復(fù)雜的形狀,但是簡單幾何圖形類提供了一種生成這些基本幾何形狀的簡單方式。

下面的示例演示如何創(chuàng)建并呈現(xiàn) LineGeometry。前面已提到,Geometry 對象無法進(jìn)行自 我繪制,因此本示例使用 Path 形狀來呈現(xiàn)直線。因?yàn)橹本沒有面積,設(shè)置 Path 的 Fill 屬性沒有任何效果;因此僅指定 Stroke 和 StrokeThickness 屬性。

XAML


 
  
   
  

 

下圖顯示此示例的輸出。

從 (10,20) 繪制到 (100,130) 的 LineGeometry

下一個示例演示如何創(chuàng)建并呈現(xiàn) EllipseGeometry。該示例將 EllipseGeometry 的 Center 設(shè)置為點(diǎn) (50,50) 并將 x 半徑和 y 半徑均設(shè)置為 50,這將創(chuàng)建一個直徑為 100 的圓。通過為 Path 元素的 Fill 屬性賦值(在本例中為 Gold)來繪制橢圓的內(nèi)部。

XAML


 
  
   
  

 

下圖顯示此示例的輸出。

繪制在 (50,50) 處的 EllipseGeometry

下面的示例演示如何創(chuàng)建并呈現(xiàn) RectangleGeometry。矩形的位置和尺寸由 Rect 結(jié)構(gòu)定 義。位置是 (50,50),高度和寬度均為 25,這將創(chuàng)建一個正方形。

XAML


 
  
   
  

 

下圖顯示此示例的輸出。

繪制在 (50,50) 處的 RectangleGeometry

下面的示例演示如何將 EllipseGeometry 用作圖像的剪輯區(qū)域。用 Width 200 和 Height 150 定義了一個 Image 對象。一個 RadiusX 值為 100、RadiusY 值為 75、Center 值為 100,75 的 EllipseGeometry 設(shè)置為圖像的 Clip 屬性。只有位于橢圓區(qū)域內(nèi)部的圖像 部分才會顯示。

XAML


     Width="200" Height="150">
  
   
  

 

下圖顯示此示例的輸出。

用于剪輯圖像的 EllipseGeometry

路徑幾何圖形

PathGeometry 對象和幾何圖形 mini-language 提供了描繪由弧線、曲線和直線組成的多 個復(fù)雜圖形的方法。

PathGeometry 的核心是 PathFigure 對象的集合;這些對象之所以這樣命名是因?yàn)槊總 圖形都描繪 PathGeometry 中的一個離散形狀。每個 PathFigure 自身又由一個或多個 PathSegment 對象組成,每個這樣的對象均描繪圖形的一條線段。下表列出了各種線段類型 。

線段類型 說明 ArcSegment 在兩個點(diǎn)之間創(chuàng)建一條橢圓弧線。 BezierSegment 在兩個點(diǎn)之間創(chuàng)建一條三次方貝塞爾曲線。 LineSegment 在兩個點(diǎn)之間創(chuàng)建一條直線。 PolyBezierSegment 創(chuàng)建一系列三次方貝塞爾曲線。 PolyLineSegment 創(chuàng)建一系列直線。 PolyQuadraticBezierSegment 創(chuàng)建一系列二次貝塞爾曲線。 QuadraticBezierSegment 創(chuàng)建一條二次貝塞爾曲線。

PathFigure 中的線段將合并為一個幾何形狀,該形狀將每一條線段的終點(diǎn)作為下一條線 段的起點(diǎn)。PathFigure 的 StartPoint 屬性指定繪制第一條線段的起始點(diǎn)。后面的每條線段 都以上一條線段的終點(diǎn)作為起點(diǎn)。例如,通過將 StartPoint 屬性設(shè)置為 (10,50) 并創(chuàng)建 Point 屬性設(shè)置為 (10,150) 的 LineSegment,可定義一條從 (10,50) 到 (10,150) 的豎線 ,

電腦資料

Silverlight圖形:幾何圖形》(http://m.clearvueentertainment.com)。

下面的示例創(chuàng)建一個簡單 PathGeometry(包含具有 LineSegment 的一個 PathFigure) 并使用 Path 元素來顯示它。將 PathFigure 對象的 StartPoint 設(shè)置為 (10,20),并用終 點(diǎn) (100,130) 定義一個 LineSegment。

XAML


 
  
   
    
     
      
       
      

     
    

   

  

 

下圖顯示了此示例創(chuàng)建的 PathGeometry。

包含一個 LineSegment 的 PathGeometry

有必要將此示例與前面的 LineGeometry 示例進(jìn)行比較。PathGeometry 使用的語法比簡 單的 LineGeometry 使用的語法要詳細(xì)得多,在本例中使用 LineGeometry 類可能更有效, 但是使用 PathGeometry 的詳細(xì)語法可以創(chuàng)建極其復(fù)雜的幾何區(qū)域。

通過組合 PathSegment 對象可以創(chuàng)建更復(fù)雜的幾何圖形。

下一個示例使用一個 BezierSegment、一個 LineSegment 以及一個 ArcSegment 來創(chuàng)建 形狀。

該示例首先通過定義四個點(diǎn)來創(chuàng)建一個三次方貝塞爾曲線:起點(diǎn)(是前一條線段的終點(diǎn)) 、終點(diǎn) (Point3) 以及兩個控制點(diǎn)(Point1 和 Point2)。三次方貝塞爾曲線的兩個控制點(diǎn) 的作用像磁鐵一樣,朝著自身的方向吸引本應(yīng)為直線的部分,從而形成一條曲線。第一個控 制點(diǎn) Point1 影響曲線的開始部分;第二個控制點(diǎn) Point2 影響曲線的結(jié)束部分。

然后該示例添加一個 LineSegment,在前面的 BezierSegment 的終點(diǎn)到其 LineSegment 屬性所指定的點(diǎn)之間繪制該線段。

然后該示例添加一個 ArcSegment,該線段從前面的 LineSegment 的終點(diǎn)繪制到它的 Point 屬性所指定的點(diǎn)。該示例還指定弧線的 x 半徑和 y 半徑 (Size)、旋轉(zhuǎn)角度 (RotationAngle)、指示最終弧線的角度應(yīng)為多大的標(biāo)志 (IsLargeArc) 以及指示弧線繪制方 向的值 (SweepDirection)。

XAML


 
  
   
    
     
      
                 Point2="200,200" 
         Point3="300,100"/>
       
                 IsLargeArc="True" SweepDirection="Clockwise" 
         Point="200,100"/>
      

     
    

   

  

 

下圖顯示了此示例創(chuàng)建的形狀。

PathGeometry

通過在一個 PathGeometry 內(nèi)使用多個 PathFigure 對象,可以創(chuàng)建更復(fù)雜的幾何圖形。

下面的示例創(chuàng)建一個具有兩個 PathFigure 對象的 PathGeometry,其中每個對象均包含 多個 PathSegment 對象。使用了前面示例中的 PathFigure 以及具有一個 PolyLineSegment 和一個 QuadraticBezierSegment 的 PathFigure。PolyLineSegment 是用點(diǎn)列表定義的, QuadraticBezierSegment 是用控制點(diǎn)和終點(diǎn)定義的。

XAML


 
  
   
    
     
      
                 Point2="200,200" 
         Point3="300,100"/>
       
                 IsLargeArc="True" SweepDirection="Clockwise" 
         Point="200,100"/>
      

     

     
      
       
       
      

     
    

   

  

 

下圖顯示了此示例創(chuàng)建的形狀。

具有多個圖形的 PathGeometry

路徑標(biāo)記語法

Silverlight Geometry 對象支持使用一系列特殊的移動和繪制命令的 XAML 屬性語法。

復(fù)合幾何圖形

可以使用 GeometryGroup 對象來創(chuàng)建復(fù)合幾何圖形對象。GeometryGroup 創(chuàng)建它所包含 的 Geometry 對象的組合體,但不合并其面積?梢韵 GeometryGroup 中添加任意數(shù)量的 Geometry 對象。下面的示例使用 GeometryGroup 創(chuàng)建復(fù)合 Geometry。

XAML


 
  

   
   
    
    
    
   
  

 

下圖顯示此示例的輸出。

復(fù)合幾何圖形

最新文章