526互联

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

发布时间 2023-09-14 20:28:38作者: ET少女-远远

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

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