如何在flex中的canvas组件周围创建浮动效果等投影？

I want create a drop shadow around the canvas component in flex. Technically speaking it will not be a shadow, as I want it to wrap around the component giving the component a floating look. I may be able to do it with glow, but can anyone drop an line or two who has already done it?

我想在flex中的canvas组件周围创建一个阴影。从技术上讲,它不会是一个阴影,因为我希望它包裹组件,使组件具有浮动外观。我也许可以用发光来做,但任何人都可以放弃一两行已经完成它的人吗?

Thanks in advance.

提前致谢。

6 个解决方案

#1

I actually solved it by doing this:

我实际上解决了这个问题:

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

#2

You can use DropShadowFilter but it looks to be more or less the same thing:

您可以使用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>

#3

In flex 4 I'm using the following. I just wanted to post this because filters property should look like below in the image. (yes I know I'm using a spark filter on an mx object)

在flex 4我使用以下内容。我只是想发布这个,因为过滤器属性应该如下图所示。 (是的,我知道我在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)"
              "/>

#4

If you want to define it outside of the canvas, you can do this:

如果要在画布外定义它,可以执行以下操作:

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

#5

You might be able to do it with degrafa and skinning. Their docs are limited but you can watch one of the tutorial videos for how to create skins. Or look at their sample code. Just assign a degrafa programmatic skin to the border of your canvas and you can add all sorts of funky gradients, paths, shapes, whatever.

您可以使用degrafa和skinning来完成它。他们的文档有限,但您可以观看其中一个教程视频,了解如何创建皮肤。或者看看他们的示例代码。只需将一个degrafa编程皮肤分配到画布的边框,就可以添加各种时髦的渐变,路径,形状等等。

#6

Depending on your needs you might be able to get away with:

根据您的需要,您可以逃脱:

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

There are caveats .. outlined here

有警告..这里概述

#1