P251——用RadialGradientBrush填充椭圆,并进行RotateTransform变换

一、认识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大小基本一致。

这是球体的光影效果逼真的原因