Как я могу создать тень, как плавающий эффект вокруг компонента canvas в flex?

Question

Я хочу создать тень вокруг компонента canvas в 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

В 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 3

Вы можете использовать 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 4

В зависимости от ваших потребностей вы можете сойти с рук:

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

Есть предостережения .. обрисовано в общих чертах здесь

Answer 5

Вы можете сделать это с помощью degrafa и скиннинга. Их документы ограничены, но вы можете посмотреть одно из обучающих видео о том, как создавать скины. Или посмотрите на их пример кода. Просто назначьте программный скин degrafa на границе вашего холста, и вы можете добавлять всевозможные прикольные градиенты, контуры, фигуры, что угодно.

Answer 6

Если вы хотите определить его вне холста, вы можете сделать это:

<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>