actionscript-3 - 如何创建具有透明边框和圆角的 Flex 图像？

Question

我在 Flex 项目中有一张照片：

<s:Image source="@Embed('images/photo.png')" />

---

但现在我想知道是否可以在 Flex (4 / 4.5 / 4.6) 中（在 MXML 和/或ActionScript 3中）将此图像制作为下图：

这可能吗？

Answer 1

这是Flash 中的羽化蒙版教程，您应该可以将其移植到 Flex。

Answer 2

是的，这是可能的，首先你需要使用 AI 或 PS 为圆角和内阴影创建一个遮罩层

1. 在 Photoshop 或 AI 中创建蒙版。如果您使用的是 PS，它必须是矢量蒙版。
2. 将其导入 Flash 催化剂。如果您使用的是 PS，则必须在导入对话框中选择“形状图层 > 保持可编辑”。
3. 在图层面板中，您将看到一个组，其中包含您的蒙版内容。该组内的任何内容都将被屏蔽。
4. 在蒙版组内添加一张图片，并在 Flash 催化剂的代码视图中复制蒙版代码。(FC)

现在为 spark 图像创建一个皮肤类，并在 imageDisplay (BitmapImage) 上方添加遮罩代码。

MaskedImageSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5">

    <s:states>
        <s:State name="uninitialized" />
        <s:State name="loading"/>
        <s:State name="ready" />
        <s:State name="invalid" />
        <s:State name="disabled" />
    </s:states>

    <fx:Script fb:purpose="styling">
        <![CDATA[         
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor")))
                {
                    background.visible = false;
                    background.includeInLayout = false;
                }
                else
                {
                    background.visible = true;
                    background.includeInLayout = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>        
    </fx:Script>

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Image")]
        ]]>
    </fx:Metadata>

    <!--- Defines the appearance of the image background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <!-- @private -->
            <s:SolidColor id="bgFill"/>
        </s:fill>
    </s:Rect>

    <s:Group x="0" y="0">
        <s:filters>
            <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="45" distance="10" />
            <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="90" distance="10"/>
            <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="-45" distance="10" />
            <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="-90" distance="10"/>
        </s:filters>
        <s:mask>
            <s:Group x="0" y="0" width="280" height="180" >
                <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10">
                    <s:fill>
                        <s:SolidColor color="#FFFFFF"/>
                    </s:fill>
                </s:Rect>
            </s:Group>

        </s:mask>

        <!--- Primary image display skin part. -->
        <s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0"/>

    </s:Group>




    <!--- Progress indicator skin part. -->
    <s:Range id="progressIndicator" skinClass="spark.skins.spark.ImageLoadingSkin" verticalCenter="0" horizontalCenter="0" includeIn="loading" layoutDirection="ltr" />

    <!--- Icon that appears in place of the image when an invalid image is loaded. -->
    <s:BitmapImage id="brokenImageIcon" includeIn="invalid" source="@Embed(source='Assets.swf',symbol='__brokenImage')" verticalCenter="0" horizontalCenter="0"/>

</s:Skin>

将此皮肤类应用于火花图像

<s:Image source="@Embed('assets/maskImg.png')" skinClass="MaskedImageSkin" width="200" height="200"/>

上面的代码只是一个遮罩图像的例子，使用圆角矩形创建自己的遮罩。这将解决您的问题。

快乐剥皮...