1 Canvas和基本形狀

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid><Canvas Margin="0,0,0,0" Background="White"><Rectangle Fill="Orange" Stroke="SeaGreen" StrokeThickness="3"Width="250" Height="220" Canvas.Left="150" Canvas.Top="100"/><Ellipse Fill="LimeGreen" Stroke="Green" StrokeThickness="3"Width="250" Height="100"Panel.ZIndex="1" Canvas.Left="55" Canvas.Top="25"/></Canvas></Grid> </Page>

?通過 Canvas 元素，可以根據 x 和 y 絕對坐標定位內容。可以在唯一的位置繪制元素；或者，如果多個元素占用了相同的坐標，則這些元素在標記中的出現順序可決定它們的繪制順序。

Canvas.Left，Canvas.Top，定義了形狀在Canvas中的位置；Stroke，邊框顏色；StrokeThickness，邊框像素寬度；

WPF中各種顏色名如下；

2 路徑和幾何元素?

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid><Canvas><Path Stroke="SeaGreen" StrokeThickness="5"><Path.Data><EllipseGeometry Center="100,100" RadiusX="70" RadiusY="30"></EllipseGeometry></Path.Data></Path></Canvas></Grid> </Page>

?可以在路徑中使用幾何元素，如EllipseGeometry；

3 線條幾何圖形

LineGeometry 類:表示線條的幾何圖形；

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid ShowGridLines="True" HorizontalAlignment="Left"><Canvas Height="200" Width="200"><Path Stroke="SeaGreen" StrokeThickness="5"><Path.Data><LineGeometry StartPoint="2,2" EndPoint="50,100"></LineGeometry></Path.Data></Path></Canvas></Grid> </Page>

4 路徑中畫貝塞爾曲線?

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid> <Path Stroke="Green" StrokeThickness="3"><Path.Data><PathGeometry><PathFigure StartPoint="10,10"><BezierSegment Point1="220,40" Point2="300,430" Point3="600,330" IsSmoothJoin="True"/></PathFigure></PathGeometry></Path.Data></Path></Grid> </Page>

?也可以在路徑中畫貝塞爾曲線；貝塞爾曲線是由控制點定義的；改變控制點坐標，圖形如下；

5 利用路徑中的點繪制形狀?

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid> <Path Stroke="Red" Fill="DarkGreen" Data="M 100,100 A 50,30 0 0 0 100,200 A 65 50 0 0 1 100,300"></Path></Grid> </Page>

?如下代碼；
<Path x:Name="path_data" Stroke="#FFE23838" StrokeThickness="1" Data="M 100,0 A 50,100 0 0 0 100,200"></Path>
含義如下；
? ? M 起始點 （100，0） ?A 尺寸（X50，Y100半徑） ?圓弧旋轉角度值（0） 優勢弧的標記（否，弧角度小于180） ?正負角度標記（0 逆時針畫圓） ? 結束點（100，200）

6 繪制問號和齒輪?

問號：
M 0 0 l 0 4.4 l 10.6 0 a 1.9 1.5 0 0 1 1.9 1.5
l 0 4 a 2 2.3 0 0 1 -2 2.3 l -2.7 0?
a 4.4 5.5 0 0 0 -4.4 5.5 l 0 7.7 l 4.6 0 l 0 -7.0
a 1.8 1.9 0 0 1 1.8 -1.9 l 2.6 0
a 4.5 4.5 0 0 0 4.5 -4.5 l 0 -6.8
a 5.7 5.3 0 0 0 -5.7 -5.3z
m 3.6 28.1 l4.7 0 l 0 4.7 l -4.7 0z

齒輪：
M 15 7.5 a 7.5 7.5 0 0 0 0 15 a 7.5 7.5 0 0 0 0 -15
M 19 0.6 A 15 15 0 0 0 11.2 0.6 L 12.2 3.9 A 11.5 11.5 0 0 0 7.0 6.8 L 4.5 4.3
A 15 15 0 0 0 0.5 11.4 L 3.8 12.2 A 11.5 11.5 0 0 0 3.9 18 L 0.7 19
A 15 15 0 0 0 4.4 25.5 L 6.9 23 A 11.5 11.5 0 0 0 12 26.1 L 11 29.5
A 15 15 0 0 0 18.8 29.4 L 17.8 26.1 A 11.5 11.5 0 0 0 23 23.2 L25.4 25.7
A 15 15 0 0 0 29.5 18.7L 26.1 17.8 A 11.5 11.5 0 0 0 26 11.9L 29.4 11
A 15 15 0 0 0 25.5 4.5 L 23.2 6.9 A 11.5 11.5 0 0 0 18 3.9 Z

?

路徑的作用不止是繪制形狀；可以跟事件結合；我以前做過，在窗體上繪制手的形狀，鼠標點在手形范圍之內，不觸發任何事件，點在手形范圍之外，觸發窗體事件；

總結

以上是生活随笔為你收集整理的WPF canvas、基本图形、path几个示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。