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


    一、认识RadialGradientBrush(径向渐变)

           1.坐标

                RadialGradientBrush可以用来填充矩形(正方形)和椭圆(正圆),

                填充区域使用比例坐标,

                椭圆的坐标(0,0)和(1,1)构成的矩形内切于椭圆

    2.设置径向渐变颜色GradientStop

    GradientStop 在计算机图形中,渐变停止是指渐变色的终点,用于定义渐变色的起点和终点之间的颜色变化


    基于渐变的特点

         ①区分起点/终点,一组GradientStop按照ofset的值排序,最小的是起点,最大的是终点

          ②GradientStop是成对出现的,渐变只在起点和终点之间

    复制代码
                        
                            "Blue" Offset="0.1"/>
    
                            "Yellow" Offset="0.6" />
    
                            "Blue"  Offset="1"/>
    
                        
    
    复制代码

    上面这种写法是下面的简略,更常用

    复制代码
                        
    // "Blue" Offset="0.1"/>
    "Blue" Offset="0.1"/> "Yellow" Offset="0.6" />
    "Yellow" Offset="0.6" /> "Blue" Offset="1"/>
    "Blue" Offset="1"/>
    复制代码

    填充elipse

     

    ③两个offset值相同的GradientStop,第一个是终点,向内渐变;第二个是令一组渐变的起点,向外渐变

    ④如果想把第一个GradientStop作为终点,因为没有与之对应的起点,所以不能形成渐变;  虽然不能渐变,但是仍然用纯色向内扩散,填满空白

                   把最后一个GradientStop作为起点,因为没有与之对应的终点,所以不能形成渐变;  虽然不能渐变,但是仍然用纯色向外扩散,填满余下所有空白

         即【0,第一个GradientStop】、【最后一个GradientStop,1】是实心的

    ⑤三个offset值相同的GradientStop,第二个会被第三个覆盖掉

    ⑥Offset缺省值是0,

    因为是渐变的特点,所以LinearGradientBrush填充Line,RadialGradientBrush填充Ellipse、Rectangle都是成立的

    复制代码
            "10" Y1="10" X2="280" Y2="10" StrokeThickness="20">
                
                    
                        "Yellow" Offset="0.1"/>
                        "Red" Offset="0.1"/>
                        "Blue" Offset="0.1"/>
    
    
                        "Yellow" Offset="0.6" />
                        "Red"  Offset="0.6"/>
                        "Blue" Offset="0.6" />
    
                        "Yellow"  Offset="0.9"/>
                        "Red"  Offset="0.9"/>
                        "Blue"  Offset="0.9"/>
                    
                
            
    复制代码

     

     两头都是实心的,中间的red被覆盖掉

    复制代码
                "140" Width="140">
                    
                        
                            
    
                                "Yellow" Offset="0.1"/>
                                "Red" Offset="0.1"/>
                                "Blue" Offset="0.1"/>
    
    
                                "Yellow" Offset="0.6" />
                                "Red"  Offset="0.6"/>
                                "Blue" Offset="0.6" />
    
                                "Yellow"  Offset="1"/>
                                "Red"  Offset="1"/>
                                "Blue"  Offset="1"/>
    
    
                            
    
                        
                    
                
    复制代码

     

     

     以上例子用的都是,取默认值,

    相当于

    ⑦在的前提下

        用径向笔刷填充正圆严丝合缝,而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,这个圆的关系可以得出。

    例一:

    复制代码
                "140" Width="140">
                    
                        "0,1.1" RadiusX="0.6" RadiusY="0.6">
                            
                                
    
                                    "Yellow" Offset="0.1"/>
                                    "Red" Offset="0.1"/>
                                    "Blue" Offset="0.1"/>
    
                                    "Yellow" Offset="0.4" />
                                    "Red"  Offset="0.4"/>
                                    "Blue" Offset="0.4" />
    
                                    "Yellow" Offset="0.6" />
                                    "Red"  Offset="0.6"/>
                                    "Blue" Offset="0.6" />
    
                                    "Yellow"  Offset="0.9"/>
                                    "Red"  Offset="0.9"/>
                                    "Yellow"  Offset="1"/>
                                    "Blue"  Offset="1"/>
    
    
                                
    
                            
    
                        
                    
                
    复制代码

     例二

    复制代码
     "140" Width="140">
                    
                        "1.1,0" RadiusX="0.3" RadiusY="0.3" >
                            "Purple" Offset="0.1"/>
    
                            "Yellow" Offset="0.6" />
                            "green" Offset="0.6" />
    
                            "Blue"  Offset="1" />
                            "Black"  Offset="1" />
    
                        
                    
    
    复制代码

     二、RotateTransform变换

     CenterX="0.5" CenterY="0",取值依然选取比例坐标系

    以 CenterX="0.5" CenterY="0"为圆心,将图形顺时针旋转Angle="90"。

    三、《深入浅出WPF》P251用径向画刷填充椭圆

    为了便于观察,颜色选取鲜艳颜色,并在Offset="0.66" 设置两个GradientStop。

    复制代码
     "Blue" Width="140" Height="140" Cursor="Hand" ToolTip="A Ball">
                    
                        "0.2,0.8" RadiusX="0.75" RadiusY="0.75">
                            
                                
                                    "90" CenterX="0.5" CenterY="0.5"/>
    
                                
                            
                            "#FFFFFFFF" Offset="0"/>
                            "#FF444444" Offset="0.66"/>
                            "Red" Offset="0.66"/>
                            "Yellow" Offset="1"/>
                        
                    
     
    复制代码

     

     在这个例子里有意思的是 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大小基本一致。

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

  • 相关阅读:
    MySQL主从复制
    手机号脱敏
    TypeScript学习
    MQTT协议基础学习
    PL/SQL编程-存储过程
    linux安装Gnome
    力扣:106. 从中序与后序遍历序列构造二叉树(Python3)
    【SpringBoot】几种常见的数据脱敏方案
    c++day6
    【学习笔记71】数据代理、回调函数和回调地域
  • 原文地址:https://www.cnblogs.com/yuanyuanhi/p/17700893.html