2011年4月26日 星期二

BitmapData Draw API 運用 : 將圖片切片

Draw API 圖片切片基本原理
public function draw(source:IbtimapDrawable,x:Number , y:Number , widht:Number , height:Number):Bitmap
{
 var rectangle:Rectangle = new Rectangle(0,0,widht+0.5,height+0.5);
 var bd:BitmapData = new BitmapData(widht+1,height+1);
 var matrix:Matrix = new Matrix(1, 0, 0, 1, -x, -y);
 bd.draw(sourceImage,matrix,null,null,_rectangle);
 return new BitmapData(bd);
}
 
原理解說:
這是Draw API
public function draw(source:IBitmapDrawable, matrix:Matrix = null, colorTransform:flash.geom:ColorTransform = null, blendMode:String = null, clipRect:Rectangle = null, smoothing:Boolean = false):void
 
主要是使用ClipRect與matrix搭配來做到切片效果
  • ClipRect是取一個固定點的可視窗口(將會由Rectangle來定義),在這窗口外的範圍圖片將不可見,所以我們draw的範圍也就是在這窗口中。
  • 而藉由Matrix的垂直與水平位移來讓圖片各部份移到窗口。
  • new Rectangle(0,0,widht+1,height+1); 與 new BitmapData(widht+1,height+1);會將長官都加1是因為有些狀況下,因為來源圖片想切的長寬無法整除,會造成無法貼齊圖片的現象,所以簡單的方式是以加1象素來解決。

控制使用實體的數量(一)

假設我需要拼圖切片,而拼圖最大數量為9*9,那麼可能數值有2*2~9*9的實體,但是使用者可能沒有選擇到9*9最大數量來玩拼圖,那麼既然他沒用那麼大就不該產生那麼多,所以如下
可以產出正確的實體數量,數量最大值由輸入參數column來控制,程式如下:

//這裡邏輯可以限定產生最大的實體為(9x9)
private var _storge:Vector.<Object>;
private function creatdInstance(column:int):void
{
 var startCount:int = _storge.length;
 var endCount:int = column*column;
 for( startCount ; startCount < endCount ; startCount++)
 {
  _storge[startCount] = createImageDrawProxy(startCount);
 }
}
private function selected(column:int):void
{
 creatdInstance(column);
}
 
//如此當selected被呼叫如下
  1. selected(4);
  2. selected(2);
  3. selected(6);
如此會先產生16個object,但第二次呼叫selected(2)時,因為不能滿足條件所以不會執行,但若是selected(6)在執行,會再從第17個開時產生至36個為止。

另外還有一種控管實體數量的方式叫做Pool,在Flex List組件中的ItemRenderer中即有使用到此觀念,其次在遊戲中畫面中產生的swf數量以及像是google地圖切片顯示也都會使用到Pool方式。