WPF 之绘画（十一）

一、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>