wpf-繪圖-路徑標記語法PathMarkupSyntax
步驟:移動至起點-》繪圖-》閉合圖形
直接對Path的Data屬性賦值即可。這個語法不區分大小寫。使用兩個double數值表示一個點,即(x, y),用逗號/空格分隔都可以。建議逗號。
常用路徑標記語法
M
移動到起始點,語法:M 起始點
M 10,10
L
繪製直線,語法:L 終點
L 150,30
H
繪製水平線,語法:H 終點橫座標(因為水平嘛,縱座標確定了)
H 180
V
繪製垂線,語法:V 終點縱座標
V 180
A
繪製圓弧,語法:A 母橢圓尺寸 旋轉角度 是否大弧 順/逆時針 終點 (這裡解釋了為啥座標用逗號)
A 180,180 45 1 1 150,150
C
三次方貝塞爾曲線,語法:C 控制點1 控制點2 終點
S
平滑三次貝塞爾曲線,語法S 控制點2 終點
此時會把前一條貝塞爾曲線的第二控制點以起點為對稱中心的對稱點作為第一控制點。如果前面的線段不是貝塞爾曲線,則用起點作為第一控制點。 (我的測試結果好像不一樣,之後用到再探索吧)
<!--Path Stroke="Black" Fill="Bisque" Data="M 0,0 C 30,0 70,100 100,100 S 170,0 200,0"/-->
<Path Stroke="Black" Fill="Bisque" Data="M 0,0 C 30,0 70,100 100,100 C 130,100 170,0 200,0"/>
這兩句效果一樣。
Q
二次方貝塞爾曲線,語法:Q 控制點1 終點
T
平滑二次貝塞爾曲線,語法:T 終點
<!--Path Stroke="Black" Fill="Bisque" Data="M 0,200 Q 100,0 200,200 T 400,200"/-->
<Path Stroke="Black" Fill="Bisque" Data="M 0,200 Q 100,0 200,200 Q 300,400 400,200"/>
這倆也是一樣的。
Z
閉合圖形
M 0,0 L 40,80 Z
使用Path裁剪介面元素
< Window>的WindowStyle=“None” AllowsTransparency=“True”
< Path Visibility=“Hidden” x:Name=“clipPath” Data=“Blend畫的軌跡”/>(加Hidden是因為需要的是資料且當前不需要展示)
< Button Click=“button_Click”/>
那邊函式裡寫的是this.Clip = this.clipPath.Data
複雜路徑用Blend拖動繪製的,不是人工繪製。
<UserControl x:Class="pxy.PathMarkupTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:pxy"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="500" Background="Aqua">
<Grid>
<Path Visibility="Hidden" x:Name="clipPath" Data="M35,0.5 C54.053825,0.49999958 69.5,14.379172 69.5,31.500001 69.5,32.035026 69.484917,32.566886 69.455109,33.095256 L69.37487,34.043357 71.055008,33.35458 C80.566261,29.584673 91.023338,27.499998 102,27.499996 115.03478,27.5 127.33688,30.439716 138.1925,35.650257 L138.86374,35.982139 138.67812,34.669571 C138.56034,33.627441 138.5,32.570053 138.5,31.500001 138.5,14.379172 153.94618,0.49999958 173,0.5 192.05383,0.49999958 207.5,14.379172 207.5,31.500001 207.5,48.620826 192.05383,62.5 173,62.5 171.80914,62.5 170.63237,62.445785 169.47258,62.33995 L169.29121,62.31924 169.99052,63.369041 C177.29414,74.633216 181.5,87.85633 181.5,102 181.5,143.14522 145.90664,176.5 102,176.5 58.093361,176.5 22.5,143.14522 22.5,102 22.5,87.85633 26.705856,74.633216 34.009483,63.369041 L34.594513,62.490787 33.224632,62.459663 C14.995872,61.629386 0.5,48.0858 0.5,31.500001 0.5,14.379172 15.946175,0.49999958 35,0.5 z" Fill="Bisque" HorizontalAlignment="Left" Height="177" Margin="168,189,0,0" RenderTransformOrigin="0.711586538461538,0.0580169469320568" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="208"/>
<Button Content="click" Width="100" Height="100" Margin="38,305,362,95" Background="Chartreuse" Click="Button_Click"/>
</Grid>
</UserControl>
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Clip = this.clipPath.Data;
}
不加window的兩個屬性設定:
加了之後不能拖動也不能放大縮小了,圖形還是沒有變。
相關文章
- [譯] 繪製路徑:Android 中向量圖渲染Android
- Markdown繪製各種圖形———Mermaid語法AI
- canvas學習筆記-繪製矩形及路徑(一)Canvas筆記
- 好程式設計師web分享圖片標籤、絕對路徑和相對路徑程式設計師Web
- Path路徑的寫法
- 路徑正常的寫法
- 【MFC】BROWSEINFO設定路徑,支援記憶上次路徑
- markdown 標題語法
- ggplot 中繪圖設定 軸標籤和標題與繪圖區域的間距繪圖
- R語言中繪圖設定不輸出繪圖內容R語言繪圖
- 使用ECharts繪製網址徑向樹狀圖Echarts
- prometheus指標終端繪圖工具Prometheus指標繪圖
- chrome上傳圖片 路徑為c:/fakepath的解決辦法Chrome
- 圖論—尤拉回路/路徑圖論
- 【Go語言繪圖】圖片新增文字(二)Go繪圖
- 【Go語言繪圖】圖片新增文字(一)Go繪圖
- 【Go語言繪圖】圖片的旋轉Go繪圖
- 《一堂課掌握 AI 自學路徑圖》分享筆記AI筆記
- R語言中繪圖不輸出x軸或者y軸的刻度標籤R語言繪圖
- canvas 奇巧淫技(二)繪製箭頭路徑效果Canvas
- dijkstra演算法筆記(C語言實現,顯示路徑)演算法筆記C語言
- winddows路徑過長無法讀寫
- Altium Designer繪製電路原理圖——PCB圖
- gcc g++ 新增標頭檔案路徑和庫檔案路徑的方法GC
- Python基礎語法筆記——帶思維導圖Python筆記
- 8.13 標頭檔案剖析:標頭檔案路徑(下)
- getBase64();得到圖片路徑
- 《一堂課掌握AI自學路徑圖LIVE》之小記AI
- 標準圓形餅圖Python繪製方法Python
- Matlab三維空間座標圖繪製Matlab
- html中想把圖片絕對路徑 改成相對路徑怎麼操作?HTML
- JavaScript 語法筆記JavaScript筆記
- Markdown語法筆記筆記
- 繪製電路圖、PCB圖可用軟體整理
- Qt 記住上次開啟路徑QT
- 尤拉路徑學習筆記筆記
- 《一堂課掌握 AI 自學路徑圖》之我的筆記AI筆記
- laravel上傳圖片路徑問題Laravel