调整包含路径的组大小时出现问题

Question

我一直在尝试为通用应用程序构建一个非常简单的页脚，当用户将鼠标悬停在其上并适应应用程序的宽度时，该页脚会“增长”。这个简单的代码片段似乎可以解决问题：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
             currentState="normal">

    <fx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                private const _lipWidth:Number = 8.64;

            ]]>
        </fx:Script>

        <s:states>
            <s:State name="other"/>
            <s:State name="normal"/>
        </s:states>

    <s:Group width="100%" bottom="0" rollOut="currentState = 'normal'" rollOver="currentState = 'other'"> 
        <s:Path id="LargeRibbon" x="0" bottom="0" width="100%" includeIn="other"
                data="M {width - _lipWidth} 0 L {_lipWidth} 0 C 3.951 0 0.149 3.721 0 8.363 L 0 40 L {width} 40 L {width} 8.489 C {width - 0.08} 3.787 {width - 3.92} 0 {width - _lipWidth} 0 Z">
            <s:fill>
                <s:SolidColor color="blue"/>
            </s:fill>
        </s:Path>

        <s:Path  id="SmallRibbon" width="100%" x="0" y="0" includeIn="normal"
                 data="M {width - _lipWidth} 0 L 8.629 0 C 3.951 0 0.149 3.72 0 {_lipWidth} L 0 20 L {width} 20 L {width} 8.489 C {width - 0.08} 3.787 {width - 3.92} 0 {width - _lipWidth} 0 Z">
            <s:fill>
                <s:SolidColor color="gray"/>
            </s:fill>
        </s:Path>
    </s:Group>
</s:Application>

但是，如果我尝试向 LargeRibbon 路径添加阴影，

<s:filters>
    <s:DropShadowFilter alpha="0.15" angle="-90" blurX="2" blurY="2" distance="1" quality="2"/>
</s:filters>

事情就会停止工作 - 更具体地说，如果您启动应用程序，将鼠标悬停在页脚上，放大应用程序，然后再次将鼠标悬停在页脚上LargeRibbon 似乎无法正确调整大小。我很想知道为什么会这样，更一般地说，我会喜欢您能提供的关于这个组/路径组合是否有意义的任何建议。

谢谢

Answer 1

这段代码工作正常：

<fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            private const _lipWidth:Number = 8.64;

        ]]>
    </fx:Script>

    <s:states>
        <s:State name="other"/>
        <s:State name="normal"/>
    </s:states>

<s:Group width="100%" bottom="0" rollOut="currentState = 'normal'" rollOver="currentState = 'other'"> 
    <s:filters.other>
        <s:DropShadowFilter alpha="0.15" angle="-90" blurX="2" blurY="2" distance="1" quality="2" />
    </s:filters.other>
    <s:Path id="LargeRibbon" x="0" bottom="0" width="100%" includeIn="other"
            data="M {width - _lipWidth} 0 L {_lipWidth} 0 C 3.951 0 0.149 3.721 0 8.363 L 0 40 L {width} 40 L {width} 8.489 C {width - 0.08} 3.787 {width - 3.92} 0 {width - _lipWidth} 0 Z">
        <s:fill>
            <s:SolidColor color="blue"/>
        </s:fill>
    </s:Path>

    <s:Path  id="SmallRibbon" width="100%" x="0" y="0" includeIn="normal"
             data="M {width - _lipWidth} 0 L 8.629 0 C 3.951 0 0.149 3.72 0 {_lipWidth} L 0 20 L {width} 20 L {width} 8.489 C {width - 0.08} 3.787 {width - 3.92} 0 {width - _lipWidth} 0 Z">
        <s:fill>
            <s:SolidColor color="gray"/>
        </s:fill>
    </s:Path>
</s:Group>

为什么它不能直接将过滤器放置在LargeRibbon中，我建议这是某种位图缓存问题。