Flex中给对象加阴影的方法

Flex中给对象加阴影的方法

1、 BorderContainer、Panel等容器自带阴影

BorderContainer或者Panel等容器自带了阴影，这通过dropShadowVisible样式设定，此样式如果设为true，则显示阴影。BorderContainer的dropShadowVisible默认为false，Panel 的默认为true。

Panel的阴影效果如下：

2、 RectangularDropShadow专用来为矩形对象加阴影，如果对象是矩形，使用此类效率高

可以在程序中直接使用RectangularDropShadow为对象加阴影，但仅适用于对象外形是矩形的条件下。示例如下：

<s:Group x="302" y="62" width="217" height="200">

       <s:RectangularDropShadow blurX="20" blurY="20"

            alpha="0.32" distance="11"

            blRadius="5" brRadius="5"

           angle="90" color="#000000" left="0" top="0" right="0"

             bottom="0"/>

</s:Group>

效果如下：

 

3、 SkinnableContainer可以通过皮肤加阴影

可以为SkinnableContainer建一个皮肤类，在类中设置阴影，代码如下：

<s:SkinnableContainer x="575" y="62" width="200" height="200"

                       skinClass="MySkinableContainerWithShadowSkin">

</s:SkinnableContainer>

皮肤中的阴影程序为：

<!-- 通过RectangularDropShadow加阴影 -->

<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"

       blRadius="5" brRadius="5"

       angle="90" color="#000000" left="0" top="0" right="0"

         bottom="0"/>

这样的好处是阴影将不响应该对象的鼠标事件。

4、 如果对象外形不是矩形，就要使用DropShadowFilter滤镜

示例：

首先是滤镜的定义：

<fx:Declarations>

       <!-- 将非可视元素（例如服务、值对象）放在此处 -->

       <fx:Array id="myFilters">

           <s:DropShadowFilter alpha="0.32"

                            distance="11"

                            blurX="20" blurY="20"

                            angle="90" color="#000000"

                            >

           </s:DropShadowFilter>

       </fx:Array>

</fx:Declarations>

<s:Group x="297" y="339">

<!--下面是要显示阴影的组件：à

       <s:Path data="M 195.307 95.719 C 195.307 103.702 206.101 113.422 204.132 120.785 C 202.096 128.404 204.87 141.279 201.011 147.949 C 197.097 154.715 171.372 145.538 165.881 151.029 C 160.39 156.52 158.618 163.32 151.852 167.234 C 145.182 171.093 146.125 197.982 138.507 200.019 C 131.145 201.986 118.555 196.832 110.571 196.832 C 102.588 196.832 88.935 205.962 81.572 203.993 C 73.954 201.957 63.453 192.709 56.783 188.851 C 50.017 184.936 47.379 169.893 41.888 164.401 C 36.397 158.911 56.453 135.965 52.538 129.199 C 48.679 122.529 40.694 122.617 38.658 114.999 C 36.69 107.636 0 103.702 0 95.719 C 0 87.736 10.102 76.695 12.07 69.332 C 14.106 61.714 27.476 56.64 31.334 49.97 C 35.249 43.204 53.419 49.549 58.91 44.058 C 64.401 38.567 53.156 11.925 59.923 8.01 C 66.593 4.151 77.68 3.416 85.298 1.38 C 92.661 -0.588 102.588 0.133 110.571 0.133 C 118.555 0.133 123.642 17.522 131.005 19.489 C 138.624 21.526 143.709 22.891 150.379 26.751 C 157.145 30.665 166.349 28.961 171.839 34.452 C 177.331 39.943 169.701 52.574 173.615 59.34 C 177.475 66.01 187.039 67.06 189.075 74.678 C 191.044 82.041 195.307 87.736 195.307 95.719 Z"

              winding="nonZero" x="0.929" y="0.781"

              filters="{myFilters}" width="175.40123" height="172.30193">

           <s:stroke>

              <s:SolidColorStroke caps="none" color="#5380D0" joints="miter" miterLimit="4" weight="1"/>

           </s:stroke>

           <s:fill>

              <s:SolidColor color="#FFFFFF"/>

           </s:fill>

       </s:Path>

</s:Group>

此代码通过Path定义了一个不规则区域，通过DropShadowFilter滤镜添加了阴影。

效果如下：

 

总结：

总结起来就是两个东西，一个是RectangularDropShadow，一个是DropShadowFilter。RectangularDropShadow为矩形对象添加阴影，DropShadowFilter可以为任意形状对象添加阴影。

BorderContainer和Panel等容器使用的就是RectangularDropShadow。

 

屈剑峰

2011年11月24日