使用scale-9处理植入的图片

使用scale-9处理植入的图片

这是一个很有用的技巧。

Flex支持使用scale-9定义植入的图片。scale-9可以让你定义在一个图片上独立分割9个区域。这九个区域是由穿过图片两条水平线和两条竖线定义的，这样，图片的每条边会被分割成三个区域。如果图片有一些特殊的边，用普通的样式无法呈现，或者图片有圆角，scale-9可以使图片缩放的时候更加清晰。如果处理得好，可以看到图片缩放是甚至不会有明显的模糊感。很多时候我们用来这个方法来制作可以变尺寸的按钮，而这些按钮美工设计得美仑美奂，如果只是用美工的设计原稿图片来做按钮，当尺寸没有变化时效果非常好，但是当按钮的尺寸发生变化时，可能按钮会变得很丑。

下面举例说明：

左边是原图，右边使用九宫法定了一些区域。可以看到每条边都是由三个区域组成的。

当你缩放一个使用了九宫法的植入图片，所有的文字和渐变都会正常的缩放。无论如何，其他类型的对象会根据下面的规则缩放：

l        中间的区域会正常缩放。

l        四个角的区域不会缩放。

l        上面和下面的区域仅仅水平缩放，而左边和右边的区域仅仅垂直缩放。

l        所有填充的对象会充满他们的形状。

要使用九宫法，在Embed parameters中定义这个几个参数：scaleGridTop,scaleGridBottom,scaleGridLeft,scaleGridRight。

可能一个植入的SWF文件已经包含了使用Flash Professional指定的九宫定义，在这种情况下，这个SWF文件会忽略任何指定的九宫参数。

看看例子：

<?xml version="1.0"?>

<!-- embed"Embed9slice.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

    width="1200" height="600">

    <mx:Script>

        <![CDATA[

            [Embed(source="slice_9_grid.gif",

                scaleGridTop="5", scaleGridBottom="25",

                scaleGridLeft="5", scaleGridRight="25")]

            [Bindable]

            public var imgCls:Class;           

        ]]>

    </mx:Script>

   

    <mx:HBox>

        <mx:Image source="{imgCls}"/>

        <mx:Image source="{imgCls}" width="300" height="300"/>

        <mx:Image source="{imgCls}" width="450" height="450"/>

    </mx:HBox>

</mx:Application>

原图是30×30像素的图片，定义了5像素的边。

没有使用九宫的图片缩放

这个参数如何得来的？

scaleGridTop="5", scaleGridBottom="25",                 scaleGridLeft="5", scaleGridRight="25"

scale-9是以图片的上面的边和左面的边为基准分别向下或者向右推移。所以上列的第一条水平线是5，即向下推移5个像素；而第二条水平线是向下推移25个像素。