WPF UI交互专题 平面图形 Path Drawing 绘图 渐变 Brush 矩阵 Transform 变形 阴影效果 模糊效果 自定义灰度去色效果 系列二

https://blog.youkuaiyun.com/cao919/article/details/140055816

1、Path微语言绘图
2、多色Path组合
3、DrawingContext绘图
4、纯色与线性渐变画刷
5、径向渐变与图像画刷

6、ImageBrush图像定位
7、DrawingBrush图形画刷
8、VisualBrush与CacheBrush
9、对象基本变形处理Transform
10、矩阵变形与综合应用

11、对象阴影效果
12、对象模糊效果
13、自定义灰度去色效果

Path对象

，Data属性
M（Move移动到XY）
L（Line终点XY）并不是必须，可以省略
H（水平移动X）、V（垂直移动Y）
C（三次贝塞尔曲线）、Q（二次贝塞尔曲线）、S（平滑三次贝塞尔曲线）、T（平滑二次贝塞尔曲线），
A（Arc：尺寸HV、旋转角度、大弧、扫掠方向、坐标XY）
大小写：大写标记绝对坐标、小写标记相对坐标（相对前一个坐标变化值）
z  图形封闭
 

DrawingContext绘图

OnRender
方法：DrawLine、DrawRectangle、DrawRoundedRectangle、DrawEllipse、DrawImage、DrawVideo、DrawGeometry

 
继承 canvas 也可以
public class TestControl : Grid
 {

//注意 Pen   Brushes 对象 
     protected override void OnRender(DrawingContext dc)
     {
         Pen pen = new Pen(Brushes.Green, 1);
         dc.DrawRectangle(Brushes.Orange, pen, new Rect(0, 0, 100, 50));

         FormattedText formattedText = new FormattedText(
             "Hello",
             new System.Globalization.CultureInfo("zh-CN"),
             FlowDirection.LeftToRight,
             new Typeface("Microsoft YaHei"),
             22,
             Brushes.White);

         // 图像切割
         //dc.DrawImage()

         RectangleGeometry rg = new RectangleGeometry(new Rect(5, 5, 90, 40));
         dc.DrawGeometry(Brushes.Orange, pen, rg);
         dc.DrawText(formattedText, new Point(10, 10));
         base.OnRender(dc);
     }
 }

Brush对象画刷属性

对象渲染
SolidColorBrush
LinearGradientBrush：线性渐变
RadialGradientBrush：径向渐变
ImageBrush

DrawingBrush
Visual Brush

BitmapCacheBrush

 <!--SolidColorBrush 颜色填充-->
 <!--<Border Width="200" Height="80" BorderThickness="3">
     <Border.Background>
         <SolidColorBrush Color="Green"/>
     </Border.Background>
     <Border.BorderBrush>
         <SolidColorBrush Color="Orange"/>
     </Border.BorderBrush>
 </Border>-->

 <!--<Border Width="200" Height="80" BorderThickness="5">
     <Border.Background>
         <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
             <GradientStop Color="Red" Offset="0"/>
             <GradientStop Color="Orange" Offset="0.5"/>
             <GradientStop Color="Green" Offset="1"/>
         </LinearGradientBrush>
     </Border.Background>
     <Border.BorderBrush>
         <LinearGradientBrush StartPoint="1,1" EndPoint="1,0">
             <GradientStop Color="Red" Offset="0"/>
             <GradientStop Color="Orange" Offset="0.5"/>
             <GradientStop Color="Green" Offset="1"/>
         </LinearGradientBrush>
     </Border.BorderBrush>
 </Border>-->

 <!--<Border Width="200" Height="80">
     <Border.Background>
         <RadialGradientBrush Center="0.5 0.5"  GradientOrigin="0.5 0.5"
                              RadiusX="0.2" RadiusY="1">
             <GradientStop Color="Red" Offset="0"/>
             <GradientStop Color="Orange" Offset="0.5"/>
             <GradientStop Color="Green" Offset="1"/>
         </RadialGradientBrush>
     </Border.Background>
 </Border>-->

 <Border Width="200" Height="80" CornerRadius="10" BorderBrush="Red" BorderThickness="2"
         ClipToBounds="True">
     <!--<Border.Background>
         <ImageBrush ImageSource="test.png" Stretch="Fill"/>
     </Border.Background>-->
     <Image Source="test.png"/>
 </Border>

 <!--<TextBlock Text="Hello Brush" FontSize="50" FontWeight="Bold"
            VerticalAlignment="Center" HorizontalAlignment="Center">
     <TextBlock.Foreground>
         <ImageBrush ImageSource="test.png" Stretch="Fill"/>
     </TextBlock.Foreground>
 </TextBlock>-->

对象画刷属性

对象渲染
SolidColorBrush
LinearGradientBrush：线性渐变
RadialGradientBrush：径向渐变
ImageBrush

DrawingBrush
Visual Brush

BitmapCacheBrush

 <Border Width="50" Height="50" VerticalAlignment="Top">
     <Border.Background>
         <!--Viweport:X  Y  W  H   默认表示比例:调整图像的大小位置-->
         <!--Viewbox:X  Y  W  H   默认表示比例：调整Border的视口相对图像大小和位置-->
         <ImageBrush ImageSource="slices.png" Viewport="0,0,0.5,0.5" TileMode="Tile"/>
         <!--<ImageBrush ImageSource="slices.png" Viewbox="0,0,1185,770" ViewboxUnits="Absolute"/>-->
     </Border.Background>
 </Border>

 <Border Width="100" Height="50">
     <Border.Background>
         <DrawingBrush Viewport="0,0,5,5" ViewportUnits="Absolute" TileMode="Tile">
             <DrawingBrush.Drawing>
                 <GeometryDrawing Brush="Orange">
                     <GeometryDrawing.Pen>
                         <Pen Brush="Red" Thickness="1"/>
                     </GeometryDrawing.Pen>
                     <GeometryDrawing.Geometry>
                         <GeometryGroup>
                             <LineGeometry StartPoint="0 5" EndPoint="8 0"/>
                             <LineGeometry StartPoint="8 0" EndPoint="16 5"/>
                             <LineGeometry StartPoint="16 5" EndPoint="8 10"/>
                             <LineGeometry StartPoint="8 10" EndPoint="0 5"/>
                         </GeometryGroup>
                     </GeometryDrawing.Geometry>
                 </GeometryDrawing>
             </DrawingBrush.Drawing>
         </DrawingBrush>
     </Border.Background>
 </Border>

 <Border Width="100" Height="50">
     <Border.Background>
         <VisualBrush Viewport="0,0,8 5" ViewportUnits="Absolute" TileMode="Tile">
             <VisualBrush.Visual>
                 <!--<Path Data="M0 5 8 0 16 5 8 10z" Stroke="Green" StrokeThickness="1"/>-->
                 <Path Data="M18 60,0 30,18 0 50,0 69,30 50,60M69,30 100,30" Stroke="#FF6E00" StrokeThickness="1"/>
             </VisualBrush.Visual>
         </VisualBrush>
     </Border.Background>
 </Border>
 <TextBox Text="Hello" Width="100" Name="tb" Opacity="1">
 </TextBox>
 <Border Height="30" Width="100" RenderTransformOrigin="0.5,0.5">
     <Border.Background>
         <VisualBrush Visual="{Binding ElementName=tb}"/>
     </Border.Background>
     <Border.RenderTransform>
         <TransformGroup>
             <RotateTransform Angle="180"/>
         </TransformGroup>
     </Border.RenderTransform>
 </Border>

 <Border Height="30" Width="100">
    
     <Border.Background>
         <BitmapCacheBrush Target="{Binding ElementName=tb}" >
             <BitmapCacheBrush.BitmapCache>
                 <BitmapCache RenderAtScale="10"/>
             </BitmapCacheBrush.BitmapCache>
         </BitmapCacheBrush>
     </Border.Background>
 </Border>

变形Transform
TranslateTransform
RotateTransform
ScaleTransform
SkewTransform
MatrixTransform
TransformGroup/执行顺序

<Border Width="100" Height="30" Background="Orange"/>
<Border RenderTransformOrigin="0.5 0.5" Width="100" Height="30">
    <Border.Background>
        <ImageBrush ImageSource="test.png"/>
    </Border.Background>
    <Border.LayoutTransform>
        <!--斜切变形  水平方向的变化   垂直方向的变化-->
        <!--<SkewTransform AngleX="20" AngleY="10"/>-->
        <!--位移变形  水平移动   垂直移动-->
        <!--<TranslateTransform X="10" Y="10"/>-->
        <!--缩放变形   缩放的是坐标系   比例值   控制的是平面坐标系-->
        <!--<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>-->
        <!--旋转变形-->
        <!--<RotateTransform Angle="45" CenterX="50" CenterY="15"/>-->
        <!--<RotateTransform Angle="45"/>-->

        <!--要求顺序-->
        <TransformGroup>
            <ScaleTransform ScaleY="0.5"/>
            <RotateTransform Angle="45"/>
        </TransformGroup>
    </Border.LayoutTransform>

    <TextBlock Text="缩放变形"/>
</Border>
<Border Width="100" Height="30" Background="Orange"/>
<Border Width="100" Height="30" Background="Green" Panel.ZIndex="1"
        RenderTransformOrigin="0.5,0.5">
    <Border.RenderTransform>
        <RotateTransform Angle="45"/>
    </Border.RenderTransform>
</Border>

<Path Data="M457.085 459.284c1.929-1.916 19.923-21.075 26.705-27.66 14.06-13.655 27.832-24.354 43.571-32.82 19.096-10.27 36.569-30.294 46.56-52.11 4.225-9.226 6.559-17.722 6.855-23.683-15.19-10.698-38.455-18.393-61.105-19.65-25.435-1.413-45.52 5.208-56.305 18.15-13.068 15.682-20.816 45.463-20.13 78.19 0.525 25.07 6.072 47.618 13.277 60.148 0.188-0.184 0.378-0.372 0.572-0.565z m-17.67-157.732c38.406-46.087 125.21-32.103 165.034 0 22.53 18.162-7.576 95.266-62.32 124.71-54.743 29.444-73.753 91.316-102.714 62.355-33.394-33.394-39.538-139.62 0-187.065z m125.3 155.533c1.917 1.929 21.076 19.923 27.662 26.705 13.654 14.06 24.353 27.832 32.819 43.571 10.27 19.096 30.294 36.569 52.11 46.56 9.226 4.225 17.722 6.559 23.683 6.855 10.698-15.19 18.393-38.455 19.65-61.105 1.413-25.435-5.208-45.52-18.15-56.305-15.682-13.068-45.463-20.816-78.19-20.13-25.07 0.525-47.618 6.072-60.148 13.277 0.184 0.188 0.372 0.378 0.565 0.572z m157.733-17.67c46.087 38.406 32.103 125.21 0 165.034-18.162 22.53-95.266-7.576-124.71-62.32-29.444-54.743-91.316-73.753-62.355-102.714 33.394-33.394 139.62-39.538 187.065 0z m-155.533 125.3c-1.929 1.917-19.923 21.076-26.705 27.662-14.06 13.654-27.832 24.353-43.571 32.819-19.096 10.27-36.569 30.294-46.56 52.11-4.225 9.226-6.559 17.722-6.855 23.683 15.19 10.698 38.455 18.393 61.105 19.65 25.435 1.413 45.52-5.208 56.305-18.15 13.068-15.682 20.816-45.463 20.13-78.19-0.525-25.07-6.072-47.618-13.277-60.148-0.188 0.184-0.378 0.372-0.572 0.565z m17.67 157.733c-38.406 46.087-125.21 32.103-165.034 0-22.53-18.162 7.576-95.266 62.32-124.71 54.743-29.444 73.753-91.316 102.714-62.355 33.394 33.394 39.538 139.62 0 187.065z m-125.3-155.533c-1.917-1.929-21.076-19.923-27.662-26.705-13.654-14.06-24.353-27.832-32.819-43.571-10.27-19.096-30.294-36.569-52.11-46.56-9.226-4.225-17.722-6.559-23.683-6.855-10.698 15.19-18.393 38.455-19.65 61.105-1.413 25.435 5.208 45.52 18.15 56.305 15.682 13.068 45.463 20.816 78.19 20.13 25.07-0.525 47.618-6.072 60.148-13.277a142.54 142.54 0 0 0-0.565-0.572z m-157.733 17.67c-46.087-38.406-32.103-125.21 0-165.034 18.162-22.53 95.266 7.576 124.71 62.32 29.444 54.743 91.316 73.753 62.355 102.714-33.394 33.394-139.62 39.538-187.065 0z"
      Fill="Orange" StrokeThickness="2" Width="100" Height="100" Stretch="Fill"
      RenderTransformOrigin="0.5 0.5">
    <Path.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="180"/>
            <ScaleTransform ScaleY="0.2"/>
        </TransformGroup>
    </Path.RenderTransform>
</Path>

<Border Width="100" Height="30" Background="Orange">
    <Border.RenderTransform>
        <!--包含所有变形-->
        <!--缩放X   斜切Y    斜切X     缩放Y    位移X   位移Y-->
        <MatrixTransform Matrix="1.1,0,0.7,1,10,10"/>
    </Border.RenderTransform>
</Border>

Effect 效果 阴影 模糊 灰度去色

11、对象阴影效果
12、对象模糊效果
13、自定义灰度去色效果

DropshadowEffect：Direction 阴影显示方向：逆时针角度值、Color颜色、ShadowDepth阴影深度、BlurRadius模糊程度、 Opacity阴影透明度
BlurEffect
自定义去色效果：GrayscaleEffect
 

OpacityMask

<Grid.Effect>
    <local:GrayscaleEffect DesaturationFactor="0"/>
</Grid.Effect>
<StackPanel>
    <!--阴影-->
    <Border Width="100" Height="50" Background="#32FFA500" Name="bor">
        <Border.Effect>
            <!--Direction 阴影显示方向：逆时针角度值-->
            <DropShadowEffect Color="Red" ShadowDepth="10" Direction="-45" BlurRadius="15" Opacity="0.5"/>
        </Border.Effect>
    </Border>
    <TextBlock Text="Hello">
        <TextBlock.Effect>
            <DropShadowEffect Color="Gray" ShadowDepth="0" Direction="-45" BlurRadius="3" />
        </TextBlock.Effect>
    </TextBlock>

    <Border Width="100" Height="30" BorderBrush="Green" BorderThickness="1" CornerRadius="10">
        <Border.Clip>
            <RectangleGeometry Rect="0 0 100 30" RadiusX="10" RadiusY="10"/>
        </Border.Clip>
        <Border.Effect>
            <DropShadowEffect Color="Red" ShadowDepth="0" Direction="-45" BlurRadius="5" Opacity="1"/>
        </Border.Effect>
        <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>

    <Border Background="Green" Width="100" Height="50">
        <Border.Effect>
            <BlurEffect Radius="10"/>
        </Border.Effect>
        <TextBlock Text="Hello"/>
    </Border>

    <TextBox Width="100" Height="20" Text="Hello" Name="tb"/>
    <Border Width="100" Height="30" RenderTransformOrigin="0.5,0.5">
        <Border.RenderTransform>
            <ScaleTransform ScaleY="-1"/>
        </Border.RenderTransform>
        <Border.Background>
            <VisualBrush Visual="{Binding ElementName=tb}"/>
        </Border.Background>
        <Border.OpacityMask>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="Red" Offset="1"/>
                <GradientStop Color="Transparent" Offset="0.2"/>
            </LinearGradientBrush>
        </Border.OpacityMask>
        <Border.Effect>
            <BlurEffect Radius="1"/>
        </Border.Effect>
    </Border>

    <Path Data="M0 0 10 0" Stroke="Red" StrokeThickness="2" Name="path"/>
</StackPanel>

<!--<MediaElement Source="Technology_02.mov" Name="me"/>
<Border Width="200" Height="300" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="150,50" BorderThickness="0" BorderBrush="#000">
    <Border.Background>
        <VisualBrush Visual="{Binding ElementName=me}" ViewboxUnits="Absolute" Stretch="Uniform">
            <VisualBrush.Viewbox>
                <Rect X="150" Y="50" Width="200" Height="300"/>
            </VisualBrush.Viewbox>
        </VisualBrush>
    </Border.Background>
    <Border.Effect>
        <BlurEffect Radius="15" RenderingBias="Performance"/>
    </Border.Effect>
</Border>-->

WPF UI交互专题 界面结构化处理 查看分析工具Snoopy 逻辑树与视觉树 平面图像 平面图形 几何图形 弧线 01-优快云博客