如何在Flex中的畫布組件周圍創建浮動效果的投影？

Question

我想在flex中圍繞畫布組件創建一個陰影。從技術上講，它不會是一個影子，因爲我希望它能夠環繞組件，使組件具有浮動外觀。我可能能夠做到這一點，但任何人都可以放棄已經完成的一兩行？

在此先感謝。

Answer 1

我其實解決它通過這樣做：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
     width="780" height="100%" borderStyle="solid" borderColor="gray" 
      creationComplete="init();" backgroundColor="white"> 

    <mx:Script> 
     <![CDATA[ 
      import mx.styles.StyleManager; 


      private function init():void { 
       var glow:GlowFilter = new GlowFilter(); 
       glow.color = StyleManager.getColorName("gray"); 
       glow.alpha = 0.8; 
       glow.blurX = 4; 
       glow.blurY = 4; 
       glow.strength = 6; 
       glow.quality = BitmapFilterQuality.HIGH; 

       this.filters = [glow]; 
      } 
     ]]> 
    </mx:Script> 



</mx:Canvas> 

Answer 2

您可以使用DropShadowFilter但它看起來是或多或少同樣的事情：

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="780" height="100%" borderStyle="solid" borderColor="gray" 
    creationComplete="init();" backgroundColor="white" dropShadowEnabled="true"> 
    <mx:filters> 
     <mx:DropShadowFilter 
      quality="1" 
      color="gray" 
      alpha="0.8" 
      distance="0" 
      blurX="4" 
      blurY="4" 
      strength="6" 
     /> 
    </mx:filters> 
</mx:Canvas> 

Answer 3

如果要定義它的外畫布，你可以這樣做：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
     width="780" height="100%"> 

    <mx:Canvas filters="[dropShadow]" width="200" height="200" backgroundColor="white"/> 
    <mx:DropShadowFilter id="dropShadow" distance="0"/> 

</mx:Application> 

Answer 4

你也許可以用degrafa和剝皮。他們的文檔是有限的，但您可以觀看如何創建皮膚的教程視頻之一。或者看看他們的示例代碼。只需將一個降級程序化皮膚分配到畫布邊框，然後添加各種時髦漸變，路徑，形狀等等。

Answer 5

在flex 4中，我使用了以下內容。我只是想發佈這個，因爲filters屬性應該如下圖所示。 （是的，我知道我使用的是MX對象的火花過濾器）

<fx:Declarations> 
    <s:GlowFilter 
     id="glowBlack" 
     alpha=".6" 
     color="0x000000" 
     inner="false" 
     blurX="10" 
     blurY="10" 
     quality = "2" 

     /> 

   <mx:Image id="rssIcon" 
       height="70" 
       filters="{[glowBlack]}" 
       source="assets/rss/icon_rss.png" 
       styleName="rssIconStyle" 
       width="70" 
       scaleContent="true" 
       click="openRssSite(event)" 
       "/> 

Answer 6

根據您的需求，你也許能矇混過關：

<mx:Canvas ... dropShadowEnabled="true" shadowDirection="right"> 

有警告..概述here