wpf-繪圖-路徑標記語法PathMarkupSyntax

Ruriko7896發表於2020-11-27

步驟:移動至起點-》繪圖-》閉合圖形

直接對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的兩個屬性設定:
在這裡插入圖片描述
加了之後不能拖動也不能放大縮小了,圖形還是沒有變。

相關文章