• 绘图


    再复杂的图形都是各种简单图形的组合,尤其是通过路径Path强大的功能,可组成相当复杂的图形;

    一般都是在Blend里完成再拷贝到vs里

    Line:直线段

    Rectangle:矩形

    Ellipse:椭圆

    Polygon:多边形,由多段直线段围成的闭全区域

    Polyline:折线(不闭合),由多条首尾相接的直线段组成

    Path:路径(闭合区域),最强大的一个,可由若干直线,圆弧,贝赛尔曲线组成

    常见属性:

    Stroke 边线  Fill填充

    Fill属性是Brush(刷),

       常有:SolidColorBrush实心画刷

    LinearGradientBrush线性向渐变画刷

    RadialGradientBrush 径向渐变画刷

    ImageBrush 使用图片作为填充

    DrawingBrush使用矢量图和位图填充内容

    VisualBrush 形象填充,如拖动控件时的框框

    控件的变形是与UI元素分离的,方便附加

    RenderTransform是呈现变形:只是展现时才变形,真实不会影响到布局,常用到动画

    LayoutTransform是布局变形:用于静态的变形,耗性能

      <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="234,107,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">

                <Button.RenderTransform>

                    <TransformGroup>

                        <ScaleTransform/>

                        <SkewTransform/>

                        <RotateTransform Angle="39.506"/>

                        <TranslateTransform/>

                    </TransformGroup>

                </Button.RenderTransform>

            </Button>

    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="234,107,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">

                <Button.LayoutTransform>

                    <TransformGroup>

                        <ScaleTransform/>

                        <SkewTransform/>

                        <RotateTransform Angle="39.506"/>

                        <TranslateTransform/>

                    </TransformGroup>

                </Button.LayoutTransform>

            </Button>

      

    这一篇我们聊聊wpf中的画刷,在wpf中如果想玩各种花哨,那么如何使用画刷则是我们的基本功,首先看一下类图

    从图中可以看出,wpf有5种画刷和1种自定义画刷,都是继承自基类Brush,我们看看基类中有哪些好玩的东西。

    这里有3个比较感兴趣的属性,分别属于”透明度“和”图像转换“,好,下面我们一一解说。

    一:SolidColorBrush(实心画刷)

        实心画刷是我们用的最多的,也是最简单的一个,其实也就是填充色的意思,一个很简单的例子:

    其实这里的Background=Red使用的就是SolidColorBrush,xaml进行解析时,发现Background是Brush类型,刚才我也说了

    Brush具有图形转换的能力,最后xaml就会通过Transform把”Red"字符串解析成SolidColorBrush,更直观一点的话,我们可以

    用C#代码来描述。

    复制代码
    1     public partial class MainWindow : Window
    2     {
    3         public MainWindow()
    4         {
    5             InitializeComponent();
    6 
    7             button1.Background = new SolidColorBrush(Colors.Red);
    8         }
    9     }
    复制代码

    二:GradientBrush(梯度画刷)

    如果我们使用过ps或者freehand,我们肯定知道在填充色方面有一个叫做“渐变色”的概念,我们使用的最多的渐变色要么是“线性”的,

    要么是“圆形”的,刚好这里对应wpf中的“LinearGradientBrush”和“RadialGradientBrush”。

    1: LinearGradientBrush(线性梯度画刷)

         线性画刷也是比较简单的,一般情况下我们只要设定一个“StartPoint”和“EndPoint”即可。

    复制代码
     1 <Window x:Class="WpfApplication2.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         Title="MainWindow" Height="350" Width="525">
     5     <Canvas>
     6         <Rectangle Canvas.Left="51" Canvas.Top="187" Height="101" Name="rectangle2" Stroke="Black" Width="325">
     7             <Rectangle.Fill>
     8                 <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
     9                     <GradientStop Color="Yellow" Offset="0.5"/>
    10                     <GradientStop Color="Green" Offset="1"/>
    11                 </LinearGradientBrush>
    12             </Rectangle.Fill>
    13         </Rectangle>
    14     </Canvas>
    15 </Window>
    复制代码

    这里要注意的就是,我设定的坐标是(0,0),(0,1),我们知道两点一条直线,这条直线与X轴平行,我们可以看到颜色的分布是垂直于Y轴的,

    如果说我们把坐标改为(0,0)(1,1),那么颜色分割线还是与(0,0),(1,1)这条斜线垂直吗?最后发现,严格垂直。

    2:RadialgradientBrush(圆形梯度画刷)

        在ps中我们玩”圆形渐变“的时候,只需要设定圆心坐标和X坐标和Y坐标的值就可以画一个圆形渐变,在wpf中同样需要这三个元素,

    分别对应设Center,RadiusX,RadiusY,当然在wpf中还存在一个“梯度原点“:GradientOrigin。

    复制代码
     1 <Window x:Class="WpfApplication3.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         Title="MainWindow" Height="350" Width="525">
     5     <Grid>
     6         <Rectangle Height="200" HorizontalAlignment="Left" Margin="128,45,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="200">
     7             <Rectangle.Fill>
     8                 <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
     9                     <RadialGradientBrush.GradientStops>
    10                         <GradientStop Color="Yellow" Offset="0"/>
    11                         <GradientStop Color="Red" Offset="0.25"/>
    12                         <GradientStop Color="Blue" Offset="0.75"/>
    13                         <GradientStop Color="LimeGreen" Offset="1"/>
    14                     </RadialGradientBrush.GradientStops>
    15                 </RadialGradientBrush>
    16             </Rectangle.Fill>
    17         </Rectangle>
    18     </Grid>
    19 </Window>
    复制代码

    三:ImageBrush(图像画刷)

          这种画刷也是很有意思的,有时我们在炫时需要用图片做装饰,那么此时ImageBrush就可以祝你一臂之力。

    复制代码
     1 <Window x:Class="WpfApplication7.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         xmlns:my="clr-namespace:WpfApplication7"
     5         Title="MainWindow" Height="350" Width="525">
     6     <Grid>
     7         <Grid.Background>
     8             <ImageBrush x:Name="landBrush" ImageSource="C:UsersAdministratorDesktopweibo64512.gif"/>
     9         </Grid.Background>
    10     </Grid>
    11 </Window>
    复制代码

    四:VisualBrush(控件画刷)

         这种画刷是作用在控件级别上的,也就是说任何控件都可以作为画刷,很神奇的说。

    复制代码
     1 <Window x:Class="WpfApplication1.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         Title="MainWindow" Height="350" Width="525">
     5     <Window.Resources>
     6         <VisualBrush x:Key="test" TileMode="Tile" Opacity="0.8">
     7             <VisualBrush.Visual>
     8                 <StackPanel>
     9                     <TextBlock Foreground="Gold">
    10                         唧唧复唧唧
    11                     </TextBlock>
    12                     <TextBlock Foreground="LightBlue">
    13                        木兰开飞机
    14                     </TextBlock>
    15                     <TextBlock Foreground="LightGray">
    16                        开的什么机
    17                     </TextBlock>
    18                     <TextBlock Foreground="Pink">
    19                        波音747
    20                     </TextBlock>
    21                 </StackPanel>
    22             </VisualBrush.Visual>
    23         </VisualBrush>
    24     </Window.Resources>
    25     <Grid>
    26         <Button Content="我是超大按钮" Height="213" HorizontalAlignment="Left" Margin="32,34,0,0" Name="button1" 
    27                 VerticalAlignment="Top" Width="414" Background="{StaticResource ResourceKey=test}"/>
    28     </Grid>
    29 </Window>
    复制代码

    五:DrawingBrush(自定义画刷)

         最灵活,最复杂的也就是这种自定义画刷,毕竟wpf不能给我们满足所有的要求,就必须留一道口子给我们程序员自定义实现。

    复制代码
     1 <Window x:Class="WpfApplication4.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         Title="MainWindow" Height="350" Width="525">
     5     <Window.Resources>
     6         <DrawingBrush x:Key="test">
     7             <DrawingBrush.Drawing>
     8                 <DrawingGroup>
     9                     <DrawingGroup.Children>
    10                         <GeometryDrawing>
    11                             <!-- 绘制矩形 -->
    12                             <GeometryDrawing.Geometry>
    13                                 <RectangleGeometry RadiusX="0.2" RadiusY="0.5"
    14                                                        Rect="0.02,0.02,0.96,0.96" />
    15                             </GeometryDrawing.Geometry>
    16                             <!-- 矩形填充色 -->
    17                             <GeometryDrawing.Brush>
    18                                 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    19                                     <GradientStop Color="Green" Offset="0" />
    20                                     <GradientStop Color="Red" Offset="1" />
    21                                 </LinearGradientBrush>
    22                             </GeometryDrawing.Brush>
    23                             <!-- 矩形边框 -->
    24                             <GeometryDrawing.Pen>
    25                                 <Pen Thickness="0.02">
    26                                     <Pen.Brush>
    27                                         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    28                                             <GradientStop Color="AliceBlue" Offset="0" />
    29                                             <GradientStop Color="Black" Offset="1" />
    30                                         </LinearGradientBrush>
    31                                     </Pen.Brush>
    32                                 </Pen>
    33                             </GeometryDrawing.Pen>
    34                         </GeometryDrawing>
    35                     </DrawingGroup.Children>
    36                 </DrawingGroup>
    37             </DrawingBrush.Drawing>
    38         </DrawingBrush>
    39     </Window.Resources>
    40     <Grid>
    41         <Button Background="{StaticResource ResourceKey=test}" FontSize="40" Content="Button" Height="113" HorizontalAlignment="Left" Margin="89,80,0,0" Name="button1" VerticalAlignment="Top" Width="292" />
    42     </Grid>
    43 </Window>
    复制代码

  • 相关阅读:
    ASP.NET Core项目解读之常用概念方法
    ASP.NET Core项目解读之appsettings.json
    ASP.NET Core项目解读之wwwroot
    ASP.NET Core项目解读之launchSettings.json
    理解.NET5
    搜索引擎学习(四)中文分词器
    搜索引擎学习(五)Lucene操作索引
    搜索引擎学习(三)Lucene查询索引
    搜索引擎学习(二)Lucene创建索引
    搜索引擎学习(一)初识Lucene
  • 原文地址:https://www.cnblogs.com/evemen/p/6239353.html
Copyright © 2020-2023  润新知