九宫缩放scale9Grid

一、API中关于九宫缩放scale9Grid的介绍

1、当定义flash.display.DisplayObject的scale9Grid:Rectangle属性时，该显示对象被分割到以scale9Grid矩形为基础的具有九个区域的网格中。网格的其它八个区域如下：矩形外的左上角、矩形上方的区域、矩形外的右上角、矩形左侧的区域、矩形右侧的区域、矩形外的左下角、矩形下方的区域、矩形外的右下角，可以认为中心区域（由矩形定义）之外的八个区域类似于在缩放时已应用特殊规则的图片帧。

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

正常缩放中心区域中的内容。

不缩放转角中的内容。

仅水平缩放顶部和底部区域中的内容。仅垂直缩放左侧和右侧区域中的内容。

拉伸所有填充（包括位图、视频和渐变）以适应其形状。

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

设置 scale9Grid 的常见用法是设置用作组件的显示对象，当缩放该组件时，其中的边缘区域保持相同的宽度。

3、API中的例子源码Scale9GridExample.as

import flash.display.Shape;

import flash.display.GradientType;

import flash.display.SpreadMethod;

import flash.display.Sprite;

import flash.display.InterpolationMethod;

import flash.geom.Matrix;

import flash.geom.Rectangle;

import flash.utils.Timer;

import flash.events.TimerEvent;

 

public class Scale9GridExample extends Sprite

{

       private var square:Shape;

       public function Scale9GridExample()

       {

              initSquare();

       }

       private function initSquare():void {

              square = new Shape();

              square.graphics.lineStyle(20, 0xFFCC00);

              var gradientMatrix:Matrix = new Matrix();

              gradientMatrix.createGradientBox(15, 15, Math.PI, 10, 10);

              square.graphics.beginGradientFill(GradientType.RADIAL,

                     [0xffff00, 0x0000ff],

                     [100, 100],

                     [0, 0xFF],

                     gradientMatrix,

                     SpreadMethod.REFLECT,

                     InterpolationMethod.RGB,

                       0.9);

              square.graphics.drawRect(0, 0, 100, 100);

              var grid:Rectangle = new Rectangle(20, 20, 60, 60);

              square.scale9Grid = grid ;

              addChild(square);

              var tim:Timer = new Timer(100);

              tim.start();

              tim.addEventListener(TimerEvent.TIMER, scale);

       }

       private function scale(event:TimerEvent):void {

              var scaleFactor:Number = 1.01;

            square.scaleX *= scaleFactor;

            square.scaleY *= scaleFactor;

            if (square.scaleX > 2.0) {

                       scaleFactor = 0.99;

                  }

            if (square.scaleX < 1.0) {

                       scaleFactor = 1.01;

                  }

       }

}

二、哪些时候会无效

1、只对矢量图起作用，对图片无效。解决办法参考：

http://bbs.blueidea.com/viewthread.php?tid=2915069

2、对Shape对象使用scale9Grid，有效。但是如果用Shape.graphics.beginBitmapFill (new BitmapData());//仅用了一个BitmapData对象填充Shape对象后，无效！

3、对Sprite对象使用scale9Grid：

（1）仅对Sprite对象下的“图形元件”和“直接绘制的形状”有效。

（2）对Sprite对象下的Sprite对象，无效！

（3）对Sprite对象下的“图形元件”，如果该“图形元件”内仅包含另个Sprite对象，依然无效。

4、参考博客：scale9Grid – When it works and when it does not

http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/

三、Flex中使用Embed标签

Embed(source="track.png",scaleGridTop="20",scaleGridLeft="7",scaleGridRight="9",scaleGridBottom="80");

四、创建一个具有九宫格功能的Bitmap

http://flex2.group.iteye.com/group/blog/513064

五、推荐http://bbs.9ria.com/thread-47414-1-1.html（第三个页面打不开，郁闷)