Flex 的 scale-9 图片处理

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


如下图：



在mxml中的代码如下：

   

<mx:Script>

      <![CDATA[

            [Embed(source="slice_9_grid.gif", 

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

                scaleGridLeft="7", scaleGridRight="60")]

            [Bindable]

            public var imgCls:Class;            

        ]]>
   </mx:Script>

   

这样引用图片就不会因为程序的放大和缩小而使图片伸缩。图片只会伸缩图片上标记为“伸缩部分”的地方。

评论

1 楼 doyowei 2008-03-06