欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WPF图形之纯色画刷和渐变画刷的使用

程序员文章站 2022-06-07 10:49:37
...

背景介绍
  在WPF中,画刷的使用无处不在,可以说画刷是整个WPF体系里不可或缺的一部分,在画刷中,从渲染效果的特征来看,可以分为纯色画刷、线性渐变画刷、径向渐变画刷。每一种画刷都有其适用的场景,下面将介绍几种画刷在一般场景中的使用。

纯色画刷
  纯色画刷,即SolidColorBrush。在颜色的渲染过程中,当指定的区域的颜色是固定的,没有其它杂色,这时就需要用到纯色画刷。纯色画刷在XAML中和代码中绘制如下:

在XAML中使用SolidColorBrush
1、系统预定义颜色使用
  通过给控件里Brush类定义的属性指定值(如:给Background指定AliceBlue),就可以实现颜色纯色画刷的效果。具体的系统预定义颜色值,可以在Brushes和Colors类里进行查看。

<Button Background="AliceBlue">A Button</Button>

<Button>B Button
    <Button.Background>
        <SolidColorBrush Color="AliceBlue" />
    </Button.Background>
</Button>

2、自定义颜色的使用
  WPF中,通过透明度、红色、绿色、蓝色从32位调色板中选择一种颜色,从32位调色板中选择颜色的格式为"#aarrggbb",其中aa表示指定颜色的透明度用两位十六进制数表示,rr表示红色分量、gg表示绿色分量、bb标识蓝色分量,四个分量中,aa分量不是必须的,不指定的情况下系统默认该分量为FF。

<Button Background="#FFFF0000">A Button</Button>

<Button>B Button
    <Button.Background>
        <SolidColorBrush Color="#FFFF0000" />
    </Button.Background>
</Button>

在代码中使用SolidColorBrush
1、系统预定义颜色使用

Button btn1 = new Button();
btn1.Content = "A Button";
btn1.Background = Brushes.AliceBlue;

Button btn2 = new Button();
btn2.Content = "B Button";
var scb = new SolidColorBrush();
scb.Color = Colors.AliceBlue;
btn2.Background = scb;

2、自定义颜色的使用
  在WPF的后台代码中,从32位调色板选择颜色,比较常用的方式是通过Color.FromArgb或Color.FromRgb进行指定,方法中参数a、r、g、b的值范围为0到255,如下示例代码指定按钮为红色:

Button btn = new Button();
btn.Content = "A Button";
var scb = new SolidColorBrush();
scb.Color = Color.FromArgb(255, 255, 0, 0);
btn.Background = scb;

线性渐变画刷
  线性渐变画刷也即LinearGradientBrush,通过起始位置(StartPoint)以及结束位置(EndPoint)指定渐变轴,由GradientStop指定颜色以及在渐变轴上的位置,从而实现沿着渐变轴方向颜色的线性变化效果。
下面示例显示了三种颜色创建的线性渐变代码
XAML:

<Rectangle Height="200">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
            <GradientStop Color="Red" Offset="0.0"/>
            <GradientStop Color="Blue" Offset="0.5"/>
            <GradientStop Color="Green" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

C#:

Rectangle rectangle = new Rectangle();
rectangle.Height = 200;
LinearGradientBrush linearBrush = new LinearGradientBrush();
linearBrush.StartPoint = new Point(0.5, 0);
linearBrush.EndPoint = new Point(0.5, 1);
linearBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.0));
linearBrush.GradientStops.Add(new GradientStop(Colors.Blue, 0.5));
linearBrush.GradientStops.Add(new GradientStop(Colors.Green, 1.0));
rectangle.Fill = linearBrush;

  从以上示例代码可以看到LinearGradientBrush的StartPoint和EndPoint属性需要赋值Point类对象,对于Point的x、y坐标,应填0.0到1.0之间的Double值,x、y为0,对应的位置为待渲染颜色区域的左上角,x、y为1,对应的位置为待渲染颜色区域的右下角,通过StartPoint和EndPoint,可以确定渐变轴在待渲染区域的渐变方向。  对于GradientStop,其属性值Color指定32位调色板中任意颜色,其属性Offset指定其沿渐变轴方向从StartPoint到EndPoint的偏移比例,值范围为0.0到1.0的Double类型值,越接近0.0,意味着GradientStop指定的颜色越靠近StartPoint,越接近1.0,则意味着指定的颜色越靠近EndPoint。

径向渐变
  与LinearGradientBrush一样,RadialGradientBrush颜色渐变渲染本质也是沿着渐变轴进行渐变的渲染,与LinearGradientBrush不同地方在于,RadialGradientBrush的渐变轴不是一条,而是无数条,其渐变轴沿着原点向外发散。
如下示例代码显示了三种颜色径向渐变的效果
XAML:

<Rectangle Height="200" Width="200">
    <Rectangle.Fill>
        <RadialGradientBrush Center="0.5, 0.5" GradientOrigin="0.75, 0.25"
                                RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="Red" Offset="0.0"/>
            <GradientStop Color="Blue" Offset="0.5"/>
            <GradientStop Color="Green" Offset="1.0"/>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

C#:

Rectangle rectangle = new Rectangle();
rectangle.Height = 200;
rectangle.Width = 200;
RadialGradientBrush radialBrush = new RadialGradientBrush();
radialBrush.Center = new Point(0.5, 0.5);
radialBrush.RadiusX = 0.5;
radialBrush.RadiusY = 0.5;
radialBrush.GradientOrigin = new Point(0.75, 0.25);
radialBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.0));
radialBrush.GradientStops.Add(new GradientStop(Colors.Blue, 0.5));
radialBrush.GradientStops.Add(new GradientStop(Colors.Green, 1.0));
rectangle.Fill = radialBrush;

  在使用径向渐变画刷的过程中,其Center属性指定颜色渲染的中心点,RadiusX和RadiusY指定相对于中心点沿x轴和y轴的半径,以确定渲染圆的范围。GradientOrigin确定渐变轴的起始位置,也即是确定上文提到的原点。这几个属性的值比较常用的都是设置在0.0到1.0范围之间。

  以上就是WPF中颜色画刷的使用,每种画刷有自己的适用范围,某个待渲染区域是单一颜色,我们就选择SolidColorBrush。某个待渲染区域是沿着一个方向颜色渐变的,就选择LinearGradientBrush。对某个区域是沿着某个点发散渐变渲染的,例如使控件具有三维外观,那这种时候加入RadialGradientBrush元素将会达到不一样的效果。

相关标签: WPF学习 wpf