【萬里征程——Windows App開發】繪製圖形
Rectangle
我們開篇先介紹一個之前用過,也是比較簡單的Rectangle。簡單的矩形就只用定義長和寬了,但如果要有圓角的話呢,用RadiusX和RadiusY就好啦。那麼RadiusX和RadiusY到底是什麼呢?看看下圖就知道啦。
<Rectangle Fill="Yellow" Width="300" Height="200" Stroke="Blue"
StrokeThickness="10" RadiusX="80" RadiusY="40"/>
和Rectangle類似,Border也可以建立矩形,而且後者還可以有自物件以及會自動調整大小,前者只能有固定的大小哦。
Ellipse
看到這個名字大家應該都知道是什麼意思吧,如果要定義成圓的話讓Height和Width屬性相等即可。
那童鞋們都知道ProgressRing是由6個Ellipse組成的嗎,RadioButton也是由2個同心的Ellipse組成的哦。
<Ellipse Fill="Blue" Height="200" Width="350"/>
Polygon
Polygon則顯得比較自由,只需要定義出各個頂點,它就會將這些點連線起來。那麼我們可能會有疑問,需不需要確定圖形的起始點和終點呢?答案是不用的,因為Polygon會自動將終點和起始點連線起來(它會假設圖形是閉合的)。
<Polygon Fill="Green" Points="0,0,100,0,100,100,0,100 "/>
如果要在後臺C#檔案中來寫的話呢,原本的Point則由PointCollection來定義所有點後新增到一起。
可能還有童鞋會有疑問,如果要起始點和終點不連線起來,那該怎麼辦呢?
這個時候Polyline就閃亮登場啦。
雖說是閃亮登場,可我怎麼覺得線條是斜著的呢。
Line Stroke="Red" StrokeThickness="10" X1="100" Y1="0" Y2="400" X2="400"/>
既然不是封閉的,那加上Fill屬性會怎樣呢?
Line
Line的使用也比較簡單,但有一點要注意,必須設定好Stroke和StrokeThickness的屬性值,否則Line就不會顯示出來。原因很簡單,因為它是直線。
<Line Stroke="Red" StrokeThickness="10" X1="100" Y1="0" Y2="400" X2="400"/>
Path
最後上臺的自然是最厲害的啦,先上圖。
<Path Stroke="Gold" StrokeThickness="7"
Data="M 0,0 C 100,200 50,200 40,150 H 200 V 100 "/>
前兩個屬性用過多次了,Data卻還挺複雜的。這裡有3個命令,M、C、H和V。如果按英文來記可能會容易些吧,分別是:Move、Control、Horizontal和Vertical。
那麼,重頭戲來了,先看圖^_^
接著上程式碼。
<Path Stroke="Black" StrokeThickness="1" Fill="red">
<Path.Data>
<GeometryGroup>
<RectangleGeometry Rect="5,5 180,10" />
<RectangleGeometry Rect="5,5 95,180" />
<RectangleGeometry Rect="90,175 95,180"/>
<RectangleGeometry Rect="5,345 180,10" />
<EllipseGeometry
Center="95, 180" RadiusX="20"
RadiusY="30"/>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsClosed="true" StartPoint="50,50">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment Point1="100,180"
Point2="125,100" Point3="150,50"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure IsClosed="true" StartPoint="40,310">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment Point1="90,180"
Point2="115,250" Point3="140,310"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
這張圖花了我好久時間呢,希望大家也都會畫,雖然作用不大,不過花著玩玩也不錯。
我在圖上大概加了一些標註啦,另外RectangleGeometry的Rect屬性有2個值,後者是相對於前者增加的長度哦。
最難的部分是BezierSegment,也就是貝賽斯曲線,其中StartPoint和Point3分別為起點和終點,而Point1和Point2不是路徑喲,只是給曲線的一個參考偏移方向。具體大家可以上維基百科看看。
那麼這一篇就此結束啦,大家有興趣的話就動手試試咯。我們下一篇再見,感謝你們的支援。
感謝訪問,希望對您有所幫助。 歡迎關注或收藏、評論或點贊。
為使本文得到斧正和提問,轉載請註明出處:
http://blog.csdn.net/nomasp
相關文章
- 【萬里征程——Windows App開發】動畫1WindowsAPP動畫
- 【萬里征程——Windows App開發】開發準備WindowsAPP
- 【萬里征程——Windows App開發】應用欄WindowsAPP
- 【萬里征程——Windows App開發】使用Toast通知WindowsAPPAST
- 【萬里征程——Windows App開發】畫筆和影象WindowsAPP
- 【萬里征程——Windows App開發】補充:JSONWindowsAPPJSON
- 【萬里征程——Windows App開發】動態磁貼WindowsAPP
- 【萬里征程——Windows App開發】使用華麗麗的字型WindowsAPP
- 【萬里征程——Windows App開發】如何使用貼上板WindowsAPP
- 【萬里征程——Windows App開發】DatePicker&TimepickerWindowsAPP
- 【萬里征程——Windows App開發】ListView&GridView之分組WindowsAPPView
- 【萬里征程——Windows App開發】SemanticZoom檢視切換WindowsAPPOOM
- 【萬里征程——Windows App開發】控制元件大集合1WindowsAPP控制元件
- 【萬里征程——Windows App開發】控制元件大集合2WindowsAPP控制元件
- 【萬里征程——Windows App開發】在應用中整合搜尋WindowsAPP
- 【萬里征程——Windows App開發】DatePickerFlyout、TimePickerFlyout的使用WindowsAPP
- 【萬里征程——Windows App開發】頁面佈局和基本導航WindowsAPP
- 【萬里征程——Windows App開發】編輯文字及鍵盤輸入WindowsAPP
- 【萬里征程——Windows App開發】ListView&GridView之新增資料WindowsAPPView
- 【萬里征程——Windows App開發】應用設定和應用幫助WindowsAPP
- 【萬里征程——Windows App開發】用浮出控制元件做預覽效果WindowsAPP控制元件
- 【萬里征程——Windows App開發】檔案&資料——檔案選取器WindowsAPP
- 【萬里征程——Windows App開發】檔案&資料——寫入與讀取WindowsAPP
- 【萬里征程——Windows App開發】設定共享(共享源和共享目標)WindowsAPP
- 【萬里征程——Windows App開發】檔案&資料——獲取檔案屬性WindowsAPP
- 【萬里征程——Windows App開發】如何儲存、讀取、刪除應用資料WindowsAPP
- Android OpenGL ES 開發(二):繪製圖形Android
- 【萬里征程——Windows App開發】檔案&資料——讀取檔案/資料夾名WindowsAPP
- java:繪製圖形Java
- 【萬里征程——Windows App開發】資料繫結——簡單示例、更改通知、資料轉換WindowsAPP
- 【萬里征程——Windows App開發】如何在多個頁面間讀取/儲存檔案【草稿】WindowsAPP
- 開始使用SmartDraw繪製開發中的各種圖形
- 使用css繪製圖形CSS
- css繪製特殊圖形CSS
- 使用CreateJS繪製圖形JS
- Shader 繪製基礎圖形
- CSS3繪製圖形圖案效果CSSS3
- canvas核心技術-如何繪製圖形Canvas