一、认识RadialGradientBrush(径向渐变)
1.坐标
RadialGradientBrush可以用来填充矩形(正方形)和椭圆(正圆),
填充区域使用比例坐标,
椭圆的坐标(0,0)和(1,1)构成的矩形内切于椭圆
2.设置径向渐变颜色GradientStop
<GradientStop Color="" Offset="" />
GradientStop 在计算机图形中,渐变停止是指渐变色的终点,用于定义渐变色的起点和终点之间的颜色变化
基于渐变的特点
①区分起点/终点,一组GradientStop按照ofset的值排序,最小的是起点,最大的是终点
②GradientStop是成对出现的,渐变只在起点和终点之间
<RadialGradientBrush >
<GradientStop Color="Blue" Offset="0.1"/>
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Blue" Offset="1"/>
</RadialGradientBrus
上面这种写法是下面的简略,更常用
<RadialGradientBrush >
//
<GradientStop Color="Blue" Offset="0.1"/>
<GradientStop Color="Blue" Offset="0.1"/>
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Blue" Offset="1"/>
<GradientStop Color="Blue" Offset="1"/>
</RadialGradientBrush>
填充elipse
③两个offset值相同的GradientStop,第一个是终点,向内渐变;第二个是令一组渐变的起点,向外渐变
④如果想把第一个GradientStop作为终点,因为没有与之对应的起点,所以不能形成渐变; 虽然不能渐变,但是仍然用纯色向内扩散,填满空白
把最后一个GradientStop作为起点,因为没有与之对应的终点,所以不能形成渐变; 虽然不能渐变,但是仍然用纯色向外扩散,填满余下所有空白
即【0,第一个GradientStop】、【最后一个GradientStop,1】是实心的
⑤三个offset值相同的GradientStop,第二个会被第三个覆盖掉
⑥Offset缺省值是0,
因为是渐变的特点,所以LinearGradientBrush填充Line,RadialGradientBrush填充Ellipse、Rectangle都是成立的
<Line X1="10" Y1="10" X2="280" Y2="10" StrokeThickness="20">
<Line.Stroke>
<LinearGradientBrush>
<GradientStop Color="Yellow" Offset="0.1"/>
<GradientStop Color="Red" Offset="0.1"/>
<GradientStop Color="Blue" Offset="0.1"/>
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Red" Offset="0.6"/>
<GradientStop Color="Blue" Offset="0.6" />
<GradientStop Color="Yellow" Offset="0.9"/>
<GradientStop Color="Red" Offset="0.9"/>
<GradientStop Color="Blue" Offset="0.9"/>
</LinearGradientBrush>
</Line.Stroke>
</Line>
两头都是实心的,中间的red被覆盖掉
<Rectangle Height="140" Width="140">
<Rectangle.Fill>
<RadialGradientBrush >
<GradientStopCollection>
<GradientStop Color="Yellow" Offset="0.1"/>
<GradientStop Color="Red" Offset="0.1"/>
<GradientStop Color="Blue" Offset="0.1"/>
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Red" Offset="0.6"/>
<GradientStop Color="Blue" Offset="0.6" />
<GradientStop Color="Yellow" Offset="1"/>
<GradientStop Color="Red" Offset="1"/>
<GradientStop Color="Blue" Offset="1"/>
</GradientStopCollection>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
以上例子用的都是<RadialGradientBrush >,取默认值,
相当于<RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
⑦在<RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">的前提下
用径向笔刷填充正圆严丝合缝,而offset=1填充正方形会有相切后的4个角,用最后一个GradientStop包圆了,填充了余下所有空间
(对矩形,椭圆圆形都适用,只是特别点出这个例子)
2.渐变圆位置和大小
渐变从开始点GradientOrigin以环形(椭圆) 的方式向外辐射,RadiusX,RadiusY是渐变椭圆的r1.r2GradientOrigin的值含义,在比例坐标下,渐变椭圆的圆心。
Radiusx、Radiusy的值的含义,填充矩形时,以矩形边长(xy) 一半为标准,也就是x2y/2为标准1,渐变园的1.2; 填充圆的时候,以半径为标准1,渐变圆的
3.GradientOrigin和RadiusX,RadiusY
RadiusX="m",以(矩形/圆的)比例坐标的长为1个标准length,
RadiusY="n",以(矩形/圆的)比例坐标的宽为1个标准length,
①以(0.5,0.5)为圆心,RadiusX="m"为椭圆X轴半径,RadiusY="n"为椭圆Y轴半径画椭圆E,
②在穿过GradientOrigin这一点并垂直于椭圆所在平面的直线上选一个点S(除GradientOrigin外)
③以这个椭圆为底,点S为顶点,会形成一个斜椭圆锥
④RadialGradientBrush就是该斜椭圆锥在平面上的投影,(S点的位置只会影响体积,不会影响其在平面上的投影,所以不用纠结S点的位置)
⑤再结合GradientStop,Offset="h"的值就是以斜椭圆椎的高为标准"1",以顶点为线段开端0,按比例h截断斜椭圆椎,这个新的椭圆锥的地面也在平面上形成投影。
⑥另外不管GradientOrigin,RadiusX,RadiusY的值怎么变,Offset=1时,以(0.5,0.5)为圆心都不变。
以上都是改变GradientOrigin,(RadiusX=RadiusY),观察对投影的影响得出的
⑥可以通过设置 GradientOrigin,Offset=1,RadiusX,RadiusY,取0.4,0.5,0.6,再分别改变GradientOrigin的值,
点击设计页面点击矩形,xaml会显示中心点,观察中心点和GradientOrigin,Offset=1,这个圆的关系可以得出。
例一:
<Rectangle Height="140" Width="140">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0,1.1" RadiusX="0.6" RadiusY="0.6">
<RadialGradientBrush.GradientStops>
<GradientStopCollection >
<GradientStop Color="Yellow" Offset="0.1"/>
<GradientStop Color="Red" Offset="0.1"/>
<GradientStop Color="Blue" Offset="0.1"/>
<GradientStop Color="Yellow" Offset="0.4" />
<GradientStop Color="Red" Offset="0.4"/>
<GradientStop Color="Blue" Offset="0.4" />
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="Red" Offset="0.6"/>
<GradientStop Color="Blue" Offset="0.6" />
<GradientStop Color="Yellow" Offset="0.9"/>
<GradientStop Color="Red" Offset="0.9"/>
<GradientStop Color="Yellow" Offset="1"/>
<GradientStop Color="Blue" Offset="1"/>
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
例二
<Ellipse Height="140" Width="140">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="1.1,0" RadiusX="0.3" RadiusY="0.3" >
<GradientStop Color="Purple" Offset="0.1"/>
<GradientStop Color="Yellow" Offset="0.6" />
<GradientStop Color="green" Offset="0.6" />
<GradientStop Color="Blue" Offset="1" />
<GradientStop Color="Black" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
二、RotateTransform变换
CenterX="0.5" CenterY="0",取值依然选取比例坐标系
以 CenterX="0.5" CenterY="0"为圆心,将图形顺时针旋转Angle="90"。
三、《深入浅出WPF》P251用径向画刷填充椭圆
为了便于观察,颜色选取鲜艳颜色,并在Offset="0.66" 设置两个GradientStop。
<Ellipse Stroke="Blue" Width="140" Height="140" Cursor="Hand" ToolTip="A Ball">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75" RadiusY="0.75">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<RotateTransform Angle="90" CenterX="0.5" CenterY="0.5"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FF444444" Offset="0.66"/>
<GradientStop Color="Red" Offset="0.66"/>
<GradientStop Color="Yellow" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
在这个例子里有意思的是 RadiusX="0.75" RadiusY="0.75"和Offset="0.66" 这两个值
圆的外切矩形的外接圆的半径是圆直径的√2/2,约等于0.7
而0.75×0.66=0.495≈0.5,也就是说Offset="0.66"时,截取的斜圆锥底面在平面上的投影与要填充的elipse大小基本一致。
这是球体的光影效果逼真的原因