【萬里征程——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
相關文章
- Android OpenGL ES 開發(二):繪製圖形Android
- 繪製圖形
- matplotlib繪製圖形
- java:繪製圖形Java
- css繪製特殊圖形CSS
- 使用css繪製圖形CSS
- Shader 繪製基礎圖形
- 分段函式圖形繪製函式
- CAD有趣圖形的繪製
- MATLAB圖形繪製練習(一)Matlab
- Excalidraw:繪製圖形的新利器
- CSS3繪製圖形圖案效果CSSS3
- Python例項:僅繪製圖例而不繪製實際的圖形Python
- 使用Matplotlib繪製3D圖形3D
- 利用 Matplotlib 繪製資料圖形(一)
- 利用 Matplotlib 繪製資料圖形(二)
- canvas核心技術-如何繪製圖形Canvas
- CSS繪製各種幾何圖形形狀效果CSS
- 標準圓形餅圖Python繪製方法Python
- Python 用 OpenCV 繪製基本圖形系列(總)PythonOpenCV
- Markdown繪製各種圖形———Mermaid語法AI
- WPF基礎:在Canvas上繪製圖形Canvas
- VC++儲存繪製的圖形-1C++
- canvas 繪製圓形Canvas
- 高階圖形繪製軟體的原理猜想
- 強大的CSS:圖形繪製合集,方便你我!CSS
- Python Matplotlib繪製條形圖的全過程Python
- 如何用SPSS繪製頻率多邊形圖SPSS
- SVG <circle> 繪製圓形SVG
- 音視訊開發指南:圖片的繪製
- js如何讀取excel檔案,繪製echarts圖形。JSExcelEcharts
- 如何使用Python和Plotly繪製3D圖形Python3D
- 百度地圖繪製多邊形區域地圖
- Python呼叫graphviz繪製結構化圖形網路Python
- Python資料分析入門(十七):繪製條形圖Python
- MIT App Inventor安卓圖形化開發入門MITAPP安卓
- App繪製優化APP優化
- 從零開始做一個SLG遊戲(三):用unity繪製圖形遊戲Unity
- 使用joinjs繪製流程圖(五)-流程圖繪製JS流程圖