Flash里的9切片缩放,以及图片缩放类

CSS里有滑动门技术,使标签宽度自适应。

Flash里也有9切片缩放的选项,让圆角矩形在缩放时不会变形。普通的没有应用9切片的元件在进行了拉伸后会变形,见下图:

Flash里的9切片

通过设置9切片缩放,可以解决这个问题,在库里面,右击元件,选择属性,勾选启用9切片缩放比例辅助线(只有影片剪辑才可以应用9切片属性):

双击库面板里的元件打开编辑,在舞台上可以看到出现了9切片的辅助线,鼠标拖动辅助线调整好位置:

再看看舞台上原来那个进行拉伸的元件,现在不管如何拉伸变形,圆角都能保持原样不变形:

AS3里的9切片

同样,在AS3中通过设置scale9Grid也可以应用9切片缩放

scale9Grid 属性

scale9Grid:Rectangle [读写]

语言版本:ActionScript 3.0

运行时版本:AIR 1.0 Flash Player 9

当前有效的缩放网格。如果设置为 null,则在应用任何缩放转换时,将正常缩放整个显示对象。

当定义 scale9Grid 属性时,该显示对象被分割到以 scale9Grid 矩形为基础的具有九个区域的网格中,该矩形定义网格的中心区域。网格的其它八个区域如下:

  • 矩形外的左上角
  • 矩形上方的区域
  • 矩形外的右上角
  • 矩形左侧的区域
  • 矩形右侧的区域
  • 矩形外的左下角
  • 矩形下方的区域
  • 矩形外的右下角

可以认为中心区域(由矩形定义)之外的八个区域类似于在缩放时已应用特殊规则的图片帧。

在设置 scale9Grid 属性并缩放显示对象后,会正常缩放所有文本和渐变;但是,对于对象的其它类型,将应用以下规则:

  • 正常缩放中心区域中的内容。
  • 不缩放转角中的内容。
  • 仅水平缩放顶部和底部区域中的内容。仅垂直缩放左侧和右侧区域中的内容。
  • 拉伸所有填充(包括位图、视频和渐变)以适应其形状。

如果旋转显示对象,则所有后续缩放都是正常的(并会忽略 scale9Grid 属性)。

Flash演示如下:

源代码:

package {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;

    public class Slice9Example extends Sprite
    {
        private var rect:Shape = new Shape();
        public function Slice9Example()
        {
            draw();
            rect.x = 0;
            rect.y = 0;
            addChild(rect);
            stage.addEventListener(MouseEvent.MOUSE_MOVE,onReSize);
        }

        private function onReSize(e:MouseEvent):void
        {
            rect.width = e.stageX;
            rect.height = e.stageY;
        }

        private function draw():void
        {
            var grid:Rectangle = new Rectangle(20,20,40,40);

            with(rect.graphics)
            {
                beginFill(0x990065,1);
                drawRoundRect(0,0,80,80,10);
                endFill();
            }
            rect.scale9Grid = grid;
        }
}

除了应用于圆角外,还可以举一反三地应用于其它不规则形状的情况。

图片缩放类

9切片只能应用于Flash里的元素,搞不定导入的PNG,JPG图片的,但有强人写好了类,针对图片的9切片缩放,通过转换图片为bitmap,然后进行处理;效果:

原博客地址:http://www.bytearray.org/?p=118

发表评论

Your email is never shared. Required fields are marked *

*
*