WPF 之繪畫（十一）

Dwaynerbing發表於2021-02-24

一、WPF 繪畫

WPF 可以繪製線段（Line）、矩形（Rectange）、橢圓（Ellipse）、路徑（Path）。具體使用如下所示：

 <!--（1）線段：Line-->
        <Line X1="0" X2="380" Y1="0" Y2="0"  Stroke="Tomato" StrokeThickness="10"></Line>
        <Line X1="0" X2="380" Y1="10" Y2="10" Stroke="Teal" StrokeThickness="10" StrokeDashArray="1"></Line>
        <Line X1="20" X2="340" Y1="20" Y2="20" Stroke="Sienna"  StrokeThickness="10" StrokeStartLineCap="Triangle" StrokeEndLineCap="Round"></Line>
        <Line X1="20" X2="340" Y1="30" Y2="30" StrokeThickness="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Turquoise" Offset="0.9"></GradientStop>
                    <GradientStop Color="Violet" Offset="0.1"></GradientStop>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <!--（2）矩形：Rectangle-->
        <Rectangle Margin="10" Width="340" Height="50" Fill="SlateBlue"></Rectangle>
        <!--（3）橢圓：Ellipse-->
        <Ellipse Margin="10" Width="50" Height="50" Fill="SandyBrown"></Ellipse>
        <!--（4）路徑：Path-->
        <Path Stroke="SkyBlue" StrokeThickness="10">
            <Path.Data>
                <LineGeometry StartPoint="10,0" EndPoint="340,100" ></LineGeometry>
            </Path.Data>
        </Path>

其中，路徑（Path）是最強大的工作，它可以組合線段、矩形、橢圓、貝塞爾曲線等，形成複雜的圖形，同時可以使用 Path 裁剪不規則的控制元件。

自定義 Path 如下：

     <!--自定義Path-->
        <Path Stroke="Wheat" Fill="Violet" StrokeThickness="10">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure>
                            <LineSegment Point="50,100"></LineSegment>
                            <LineSegment Point="100,10"></LineSegment>
                            <LineSegment Point="150,100"></LineSegment>
                            <LineSegment Point="200,0"></LineSegment>
                            <LineSegment Point="0,0"></LineSegment>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>

為了方便編寫，簡寫的自定義 Path 和簡寫規則如下：

        <!--簡寫Path-->
        <Path Stroke="Coral" StrokeThickness="10" Data="M 0,0 L 380,0"></Path>
        <Path Margin="10" Stroke="Coral" StrokeThickness="20" Data="M0,10 L200,10 M100,10 L100,200"></Path>
        <Path Stroke="Teal" Data="M0,0 C30,0 70,100 100,100 S170,0 200,0"></Path>

製作不規則窗體和控制元件時，可以可以把製作好的特殊 Path 的 Data 賦值給控制元件的 Clip 屬性即可，具體如下：

 <Path x:Name="PathClip" Data="M0,0 C30,0 70,100 100,100 S270,0 300,0"></Path>
 <Button Height="40" Margin="10" Content="Clip" Click="ButtonBase_OnClick"></Button>

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            this.Clip = this.PathClip.Data;
        }

如果是窗體，需新增設定 AllowsTransparency="True" 和 WindowStyle="None"，即使得窗體允許被裁剪。

二、圖形的效果與濾鏡

WPF 中可以 BitmapEffect 和 Effect 進行模糊設定、投影設定等各種特效。其中，BitmapEffect 的效果渲染主要是依靠 PC 的 CPU 進行的，Effect 是依靠 GPU 進行的。

       <Button Margin="20" Height="50" Content="BitmapEffect">
            <Button.BitmapEffect>
                <DropShadowBitmapEffect Direction="270" Opacity="0.55" ShadowDepth="20"></DropShadowBitmapEffect>
            </Button.BitmapEffect>
        </Button>
        <Button Margin="20" Height="50" Content="BitmapEffect">
            <Button.Effect>
                <DropShadowEffect Direction="270" Opacity="0.55" ShadowDepth="20"></DropShadowEffect>
            </Button.Effect>
        </Button>

三、圖形的變形

控制變形的屬性有兩個：

RenderTransform （呈現變形），定義在 UIElement 中。

LayoutTransform（佈局變形），定義在 FramneworkElement 中。

呈現變形和佈局變形的主要區別在於，佈局變形會影響窗體的佈局、導致窗體佈局的重新計算，所以較為要消耗計算機效能，而呈現佈局只是展示元素出現在哪裡，不涉及窗體重新佈局。

        <Button Margin="20" Height="50" Content="RenderTransform">
            <Button.RenderTransform>
                <RotateTransform Angle="45" CenterX="50" CenterY="100"></RotateTransform>
            </Button.RenderTransform>
        </Button>
        <TextBox Margin="20" Height="50" Text="LayoutTransform" VerticalContentAlignment="Center">
            <TextBox.LayoutTransform>
                <RotateTransform Angle="-90" CenterX="0" CenterY="0"></RotateTransform>
            </TextBox.LayoutTransform>
        </TextBox>

相關文章