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的兩個屬性設定:
加了之後不能拖動也不能放大縮小了,圖形還是沒有變。
相關文章
- HTML標記語法之圖片Img元素HTML
- 鐵路圖(語法圖)
- [譯] 繪製路徑:Android 中向量圖渲染Android
- HTML標記語法總結HTML
- canvas學習筆記-繪製矩形及路徑(一)Canvas筆記
- HTML標記語法之列表元素HTML
- HTML標記語法之表格元素HTML
- Markdown繪製各種圖形———Mermaid語法AI
- R語言繪圖R語言繪圖
- 好程式設計師web分享圖片標籤、絕對路徑和相對路徑程式設計師Web
- Xcode外掛路徑、快取路徑、圖片壓縮工具路徑、程式碼片段路徑、symbolicatecrash路徑XCode快取Symbol
- tag標籤路徑優化優化
- R語言中繪圖設定不輸出繪圖內容R語言繪圖
- prometheus指標終端繪圖工具Prometheus指標繪圖
- markdown 標題語法
- 【MFC】BROWSEINFO設定路徑,支援記憶上次路徑
- ggplot 中繪圖設定 軸標籤和標題與繪圖區域的間距繪圖
- HTML5 Canvas使用路徑——繪製圓形HTMLCanvas
- 《一堂課掌握 AI 自學路徑圖》分享筆記AI筆記
- 【Go語言繪圖】圖片新增文字(二)Go繪圖
- 【Go語言繪圖】圖片的旋轉Go繪圖
- 【Go語言繪圖】圖片新增文字(一)Go繪圖
- chrome上傳圖片 路徑為c:/fakepath的解決辦法Chrome
- “無法找到網路路徑”無法實現資源共享
- 圖論—尤拉回路/路徑圖論
- R語言中繪圖不輸出x軸或者y軸的刻度標籤R語言繪圖
- canvas 奇巧淫技(二)繪製箭頭路徑效果Canvas
- svg實現路徑自己動態繪製的功能SVG
- ArcGIS API for Silverlight 繪製降雨路徑動畫API動畫
- 《一堂課掌握AI自學路徑圖LIVE》之小記AI
- 韓語學習筆記(1)音標與輸入法筆記
- xpath路徑表示式筆記筆記
- 尤拉路徑學習筆記筆記
- gcc g++ 新增標頭檔案路徑和庫檔案路徑的方法GC
- 8.13 標頭檔案剖析:標頭檔案路徑(下)
- 用核心-路徑法設計頁面
- winddows路徑過長無法讀寫
- wiki標記語言