WPF画刷
从图中可以看出,wpf有5种画刷和1种自定义画刷,都是继承自基类Brush,
SolidColorBrush单色实心画刷
WPF中实心画刷是最简单的一个,嗯其实也就是填充色的意思
<Grid>
<Rectangle Width="100" Height="100" Margin="165,100,28.6,70.4" >
<Rectangle.Fill>
<SolidColorBrush Color="Red" />
</Rectangle.Fill>
</Rectangle>
<Button Name="button" Width="100" Height="100" Margin="30,100,163.6,70.4" Background="BurlyWood">
我是填充色
</Button>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="190,141,0,0" TextWrapping="Wrap" Text="我是画刷" VerticalAlignment="Top"/>
</Grid>
其实这里的Background=Red使用的就是SolidColorBrush,xaml进行解析时,发现Background是Brush类型,嗯可以使用C#代码来看
public 画刷_SolidColorBrush单色实心画刷()
{
InitializeComponent();
button.Background = new SolidColorBrush(Colors.Red);
}
从这里可以看出实心填充画刷其实和填充色没什么不同
GradientBrush(梯度画刷)
如果使用过ps或者freehand,就肯定知道在填充色方面有一个叫做“渐变色”的概念,我们使用的最多的渐变色要么是“线性”的,
要么是“圆形”的,刚好这里对应wpf中的“LinearGradientBrush”和“RadialGradientBrush”
LinearGradientBrush 线性梯度画刷
也就是线性渐变色,线性梯度画刷需要“StartPoint”和“EndPoint”两个点来确定梯度渐变画刷是沿着那里渐变的, “StartPoint”和“EndPoint”两个点的坐标是0~1,也就是说坐标直线在1的比例里面
代码如下
<Rectangle Width="295" Height="270">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Yellow" Offset="0"/>
<GradientStop Color="Red" Offset="0.25"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
如图“StartPoint”(0,0)和“EndPoint”(0,1)两点确定了线性梯度画刷是沿着这条线进行渐变的,所以从图片可以看出,渐变色垂直于这条直线 Offset定义了渐变色在这条直线上相对位置开始渐变
如上图,当我把StartPoint和EndPoin与渐变色比例的值改变时,渐变色依旧垂直于这条线
这里为什么是从直线起始地方就开始渐变呢?其实并不是,直线在这里长度并没有1应该再向上衍伸一些
从那里开始计算Offset的相对值位置才是正确的
RadialGradientBrush 径向梯度画刷
径向梯度画刷需要设定”GradientOrigin”开始渐变色圆心坐标 ”Center”渐变圆心坐标和”RadiusX”X轴相对半径 和”RadiusY”Y轴相对半径的值
就可以画一个径向梯度画刷并且
GradientOrigin, Center,Center与RadiusY的初始默认值都为(0.5,0.5) 这很重要,也就是说径向梯度画刷可以不设置这四个值就能使用如下图中那样并不设置径向梯度画刷的四个值,依旧画出了径向渐变,这是因为他们都具有初始默认值
代码部分
<Canvas>
<Canvas.Background>
<RadialGradientBrush>
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#112345" Offset="0.5"/>
<GradientStop Color="Azure" Offset="1"/>
</RadialGradientBrush>
</Canvas.Background>
</Canvas>
其中GradientOrigin 与Center搭配使用,GradientOrigin指定初始圆心Center指定结束圆心他们所练成的线上的值就是径向梯度画刷Offset值所对应的圆心所在如图
<Canvas>
<Canvas.Background>
<RadialGradientBrush
GradientOrigin="0.5,0.5" Center="0,0.5"
RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#112345" Offset="0.5"/>
<GradientStop Color="Azure" Offset="1"/>
</RadialGradientBrush>
</Canvas.Background>
</Canvas>
可以看出径向梯度画刷offset值与GradientOrigin
Center所形成的直线一一对应
当offset值为0时,径向梯度画刷的圆心相对坐标在c与Center所连成的线上的最右端(0.5,0.5)
当Offset值为0.5时,径向梯度画刷(深蓝色的圆)的圆心相对坐标在GradientOrigin与Center所连成的线上的一半也就是(0.25,0.5)
当Offset的值为1时,径向梯度画刷(最外圈淡蓝色的圆)的圆心的相对坐标在GradientOrigin与Center所连成的线上的最左端,(0,1)[这时候设置offset相对应的颜色值为整个画布的背景]
所以可以总结出(当圆心Y轴相对坐标不变)径向梯度画刷Offset的值和圆心的相对坐标成反比且
满足函数f(x)=0.5x+0.5(0<=x<=1) [ GradientOrigin值使用默认值时]
当Center值Y轴坐标发生改变时
代码如下
<Canvas>
<Canvas.Background>
<RadialGradientBrush
GradientOrigin="0.5,0.5" Center="0,0"
RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#112345" Offset="0.5"/>
<GradientStop Color="Azure" Offset="1"/>
</RadialGradientBrush>
</Canvas.Background>
</Canvas>
可以看出圆心依旧在GradientOrigin与Center所连成的线上(限于篇幅无法截大图)
这里不推导,但依旧能粗略的看出不管圆心相对坐标的X值还是Y值
都满足函数f(x)=0.5x+0.5(0<=x<=1) [ GradientOrigin值使用默认值时]
当GradientOrigin的值也改变呢如下图,随机赋给GradientOrigin一个值
代码如下
<Canvas>
<Canvas.Background>
<RadialGradientBrush
GradientOrigin="0.3,0.2" Center="0,0"
RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#112345" Offset="0.5"/>
<GradientStop Color="Azure" Offset="1"/>
</RadialGradientBrush>
</Canvas.Background>
</Canvas>
可以粗略的看出圆心相对坐标的X值或Y值已经不能适用于上面推导出的函数f(x)=0.5x+0.5(0<=x<=1)了
所以可以得出当GradientOrigin值使用默认值且0<=Offset<=1时圆心的相对坐标满足函数f(x)=0.5x+0.5(0<=x<=1
后面的有些复杂(GradientOrigin的X值和Y值改变和Center的X值Y值同时改变,包括径向梯度渐变为什么会有角度出现下次写)
图片画刷
ImageBrush图片背景
<Rectangle Width="500" Height="500">
<Rectangle.Fill>
<ImageBrush Opacity="0.9" ImageSource="Image\至臻薇恩.JPG" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
嗯,就简单给给容器添加图片背景
ImageBrush 文字图片画刷
代码如下``
<TextBlock FontSize="150" FontStyle="Oblique" FontWeight="DemiBold">
Hello
<TextBlock.Foreground>
<ImageBrush ImageSource="Image\至臻薇恩.JPG"/>
</TextBlock.Foreground>
</TextBlock>
可以给文字添加图片背景,想不出还有什么其他用处…
ImageBrush 图片画刷 裁切
代码如下
<Image Opacity="0.5" Source="Image\至臻薇恩.JPG" Width="500" Height="500">
<Image.Clip>
<RectangleGeometry Rect="50,50 222222222222222222222,50"/>
</Image.Clip>
</Image>
需要注意的是Rect值
图像裁切50,50定义的是起始值的相对坐x=50,y=50
后面的500000000,50定义的是终点值x=500000000,y=50的对角线所形成的矩形裁切
超出容器部分将被忽略
下面赠送一个径向梯度画刷画的彩虹
代码如下
<Canvas ClipToBounds="True">
<Ellipse Height="350" Width="700"
Canvas.Left="50" Canvas.Top="25">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="Red" Offset="0.967"/>
<GradientStop Color="#FFFF8900" Offset="0.904"/>
<GradientStop Color="#FFF4FF00" Offset="0.811"/>
<GradientStop Color="#FF62F121" Offset="0.731"/>
<GradientStop Color="#FF21F1D7" Offset="0.654"/>
<GradientStop Color="#FF2176F1" Offset="0.58"/>
<GradientStop Color="#FFA28FFF" Offset="0.516"/>
<GradientStop Color="White" Offset="0.426"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Rectangle Fill="White" Height="200" Width="795"
Canvas.Top="185" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="0.565"/>
<RotateTransform/>
<TranslateTransform Y="-3.376"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>