WPF入门(四)->线形区域Path内容填充之渐变色(LinearGradientBrush)

原文:WPF入门(四)->线形区域Path内容填充之渐变色(LinearGradientBrush)

前面我们介绍到，Path对象表示一个用直线或者曲线连接的图形，我们可以使用Path.Data属性来设置该图形的形状，同时我们也可以使用Data.Fill属性来设置该图形中的填充色或背景图片等。

下面我们先来看一段代码

<Window x:Class="WPF.SimpleGraph.PathFill.Window1"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="Window1" Height="300" Width="300">    <Canvas>        <Path Stroke="DarkGray" StrokeThickness="2">            <Path.Data>                <PathGeometry>                    <PathFigure StartPoint="40,40" IsClosed="True">                        <LineSegment Point="40,130"></LineSegment>                        <ArcSegment Point="60,150" Size="20,20" ></ArcSegment>                        <LineSegment Point="200,150"></LineSegment>                        <ArcSegment Point="220,130" Size="20,20"></ArcSegment>                        <LineSegment Point="220,40"></LineSegment>                        <ArcSegment Point="200,20" Size="20,20"></ArcSegment>                        <LineSegment Point="60,20"></LineSegment>                        <ArcSegment Point="40,40" Size="20,20"></ArcSegment>                    </PathFigure>                </PathGeometry>            </Path.Data>            <Path.Fill>                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">                    <GradientStop Color="White" Offset="0.25"></GradientStop>                    <GradientStop Color="LightBlue" Offset="0.5"></GradientStop>                    <GradientStop Color="Blue" Offset="0.75"></GradientStop>                    <GradientStop Color="DarkBlue" Offset="1"></GradientStop>                </LinearGradientBrush>            </Path.Fill>        </Path>    </Canvas></Window>

它的执行结果是：

下面我们来分析一下该图形的产生原理

首先，我们通过Path.Data来绘制了一个弧形角的矩形

然后，使用Path.Fill来向该矩形中填充渐变色。

 LinearGradientBrush类：使用线性渐变绘制区域。

我们可以使用LinearGradientBrush类来绘制一个颜色渐变的区域，它有一个StartPoint属性表示线性渐变的二维起始坐标，而EndPoint指渐变的终止坐标。默认的线性渐变是沿对角方向进行的。

如图所示，它描绘了以对角线方向描绘渐变线

渐变值的取值范围是0-1，它用小数来表示从起点到终点的比率

比如说，我们想要以水平中轴来做渐变线(如下图)

我们可以将调整StartPoint和EndPoint

<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">

我们可以使用GradientStop来描述渐变的颜色和位置。

 GradientStop类：描述渐变中过渡点的位置和颜色。

GradientStop的Color属性表示渐变的颜色，Offset表示渐变从上一个位置开始，到Offset位置结束的渐变

例如下面的代码

<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">    <GradientStop Color="Yellow" Offset="0.5"></GradientStop>    <GradientStop Color="LightBlue" Offset="0.7"></GradientStop></LinearGradientBrush>

它表示从0-0.5这个段区域的颜色是Yellow

0.5-0.7这段区域表示从Yellow到LightBlue的渐变

0.7-1这段区域的颜色是LightBlue