資源描述:
《as3位圖任意形變一步一步來3》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、AS3位圖任意形變一步一步來(3)——切割位圖PostedonNovember18,2008byFdream對不起,讓大家久等了,繼續(xù)寫blog。今天我們繼續(xù)研究位圖的任意形變,今天的主要目的就是從外部加載一張圖片,然后分割成兩個三角形。當(dāng)然了,分割成兩個三角形是遠(yuǎn)遠(yuǎn)不夠的,這一點(diǎn),我們在后面會講到。從外部加載一張圖片很簡單,使用Loader類就可以輕松完成了。不過要注意的是這里是Loader類,在包flash.display下,而不是flash.net下的URLLoader類。這個類使用很簡單,如下(為了簡單,這就不寫那些條條框框了,直接寫在時間軸上了,所有的代碼都在第一幀):1.//
2、這個是我們要load的圖片?2.varurl:String='green.jpg';?3.?4.//這個是用來保存位圖數(shù)據(jù)的?5.varbmd:BitmapData=null;?6.?7.//load方法?8.functionLoad():void{?9.??varreq:URLRequest=newURLRequest(url);?10.??varloader:Loader=newLoader();?11.??//添加事件偵聽?12.??ConfigureListeners(loader.contentLoaderInfo);?13.??try{?14.????//加載圖片?15.??
3、??loader.load(req);?16.????//如果你要在舞臺上顯示出來?17.????//可以添加下面的代碼?18.????//this.addChild(loader);?19.??}catch(err:Error){?20.??}?21.}?22.?23.functionConfigureListeners(dispatcher:IEventDispatcher):void{?24.??dispatcher.addEventListener(Event.COMPLETE,CompleteHandler);?25.}?26.?1.//事件控制函數(shù)?2.functionCom
4、pleteHandler(evt:Event):void{?3.??varld:Loader=Loader(evt.target.loader);?4.??varinfo:LoaderInfo=LoaderInfo(ld.contentLoaderInfo);?5.??//保存位圖數(shù)據(jù)?6.??bmd=newBitmapData(info.width,info.height);?7.??bmd.draw(info.content);?8.}要分割成三角行,我們實(shí)現(xiàn)的方式是,先繪制一個三角形,然后用位圖來填充,繪制和填充也很簡單:1.//bw是我們最后繪制的三角形的寬?2.//bh是我們最
5、后繪制的三角形的高?3.//我這里的圖片寬高比是4:3,為了簡單,就這樣直接指定了?4.varbw:Number=280,bh:Number=210;?5.?6.//給出三個點(diǎn),繪制三角形?7.//并使用位圖數(shù)據(jù)填充?8.functiondrawTriagle(pa:Object,pb:Object,pc:Object):Shape{?9.??varr=newShape();?10.??//為了清晰可見,你可以給三角形畫一個邊框?11.??//加上下面一行代碼即可?12.??//r.graphics.lineStyle(0,0xccff00);?13.??varm:Matrix=newM
6、atrix();?14.??//由于圖片比繪制的三角形的寬高要大?15.??//需要對其進(jìn)行縮放處理?16.??varsx=bw/bm.width;?17.??varsy=sx;?18.??m.scale(sx,sy);?19.??//使用位圖填充三角形?20.??r.graphics.beginBitmapFill(bm.bitmapData,m,false,true);?21.??r.graphics.moveTo(pa.x,pa.y);?22.??r.graphics.lineTo(pb.x,pb.y);?23.??r.graphics.lineTo(pc.x,pc.y);?24.
7、??r.graphics.lineTo(pa.x,pa.y);?25.??r.graphics.endFill();?26.??//返回當(dāng)前繪制的三角形?27.??returnr;?28.}還差一步,就是要把這兩步連接起來,我們再來寫一個非常簡單的split方法,當(dāng)位圖加載完成后,調(diào)用split方法。通過split方法,繪制兩個三角形:1.vartriangle_a:DisplayObject=null;?1.vartriangle