[转]Flex 实现可以拖动的毛玻璃效果

[url]http://www.jb51.net/article/20942.htm[/url]

代码如下:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" clipContent="true" verticalScrollPolicy="off" horizontalScrollPolicy="off" 
width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" backgroundColor="#FFFFFF" 
creationComplete="onCreationComplete(event)" mouseUp="onMouseUp(event)" mouseMove="onMouseMove(event)"> 
<mx:Script source="FrostedGlass.as"/> 
<mx:Container id="ctlContainer" x="0" y="0" width="100%" height="100%" 
clipContent="true" horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
<mx:Image horizontalAlign="center" id="ctlImage" x="0" y="0" width="1024" height="768" maintainAspectRatio="true" 
source="@Embed(source='images/bg.jpg')" 
/> 
</mx:Container> 
<mx:Box borderStyle="solid" borderThickness="1" 
borderColor="#000000" render="onBoxRender(event)" 
x="200" y="200" height="200" width="400" id="ctlBox" 
filters="{[new DropShadowFilter(5, 45, 0x000000,0.5)]}" 
mouseDown="onMouseDown(event)" /> 
</mx:Application> 

此场景对应的类为：
复制代码 代码如下:

// ActionScript file

import flash.display.BitmapData; 
import flash.events.Event; 
import flash.events.MouseEvent; 
import flash.filters.BlurFilter; 
import flash.geom.Matrix; 
import flash.geom.Point; 
import flash.geom.Rectangle; 
private var m_mouseDown : Boolean = false; 
private var m_offsetPt : Point; 
private function onCreationComplete(evt:Event) : void 
{ 
onBoxRender(null); 
} 
private function onBoxRender(evt:Event) : void 
{ 
if( ctlContainer.width > 0 && ctlContainer.height > 0 ) 
{ 
var bmpData : BitmapData = new BitmapData( ctlContainer.width, ctlContainer.height, false); 
var matrix : Matrix = new Matrix(); 

// 对矩阵进行平移变换 
matrix.translate( -1 * ctlBox.x, -1 * ctlBox.y); 

// 将背景填充到移动元件上来 
bmpData.draw( ctlContainer 
, matrix 
, null 
, null 
, new Rectangle( 0, 0, ctlBox.width + 4, ctlBox.height + 4) // 裁剪区域 
); 
bmpData.applyFilter( bmpData 
, new Rectangle( 0, 0, bmpData.width, bmpData.height) 
, new Point( 0, 0) 
, new BlurFilter( 5, 5, 5) // BlurFilter的参数越大计算量越大 移动的时候越卡 
); 
ctlBox.graphics.beginBitmapFill(bmpData, null, false, false); 
ctlBox.graphics.drawRect( 0, 0, ctlBox.width, ctlBox.height); 
ctlBox.graphics.endFill(); 
} 
} 
private function onMouseDown(evt:MouseEvent) : void 
{ 
m_mouseDown = true; 
m_offsetPt = new Point( ctlBox.mouseX, ctlBox.mouseY); 
} 
private function onMouseUp(evt:MouseEvent) : void 
{ 
m_mouseDown = false; 
evt.updateAfterEvent(); 
} 
private function onMouseMove(evt:MouseEvent) : void 
{ 
if( m_mouseDown ) 
{ 
ctlBox.x = evt.stageX - m_offsetPt.x; 
ctlBox.y = evt.stageY - m_offsetPt.y; 
evt.updateAfterEvent(); 
} 
} 
// ActionScript file 
import flash.display.BitmapData; 
import flash.events.Event; 
import flash.events.MouseEvent; 
import flash.filters.BlurFilter; 
import flash.geom.Matrix; 
import flash.geom.Point; 
import flash.geom.Rectangle; 
private var m_mouseDown : Boolean = false; 
private var m_offsetPt : Point; 
private function onCreationComplete(evt:Event) : void 
{ 
onBoxRender(null); 
} 
private function onBoxRender(evt:Event) : void 
{ 
if( ctlContainer.width > 0 && ctlContainer.height > 0 ) 
{ 
var bmpData : BitmapData = new BitmapData( ctlContainer.width, ctlContainer.height, false); 
var matrix : Matrix = new Matrix(); 

// 对矩阵进行平移变换 
matrix.translate( -1 * ctlBox.x, -1 * ctlBox.y); 

// 将背景填充到移动元件上来 
bmpData.draw( ctlContainer 
, matrix 
, null 
, null 
, new Rectangle( 0, 0, ctlBox.width + 4, ctlBox.height + 4) // 裁剪区域 
); 
bmpData.applyFilter( bmpData 
, new Rectangle( 0, 0, bmpData.width, bmpData.height) 
, new Point( 0, 0) 
, new BlurFilter( 5, 5, 5) // BlurFilter的参数越大计算量越大 移动的时候越卡 
); 
ctlBox.graphics.beginBitmapFill(bmpData, null, false, false); 
ctlBox.graphics.drawRect( 0, 0, ctlBox.width, ctlBox.height); 
ctlBox.graphics.endFill(); 
} 
} 
private function onMouseDown(evt:MouseEvent) : void 
{ 
m_mouseDown = true; 
m_offsetPt = new Point( ctlBox.mouseX, ctlBox.mouseY); 
} 
private function onMouseUp(evt:MouseEvent) : void 
{ 
m_mouseDown = false; 
evt.updateAfterEvent(); 
} 
private function onMouseMove(evt:MouseEvent) : void 
{ 
if( m_mouseDown ) 
{ 
ctlBox.x = evt.stageX - m_offsetPt.x; 
ctlBox.y = evt.stageY - m_offsetPt.y; 
evt.updateAfterEvent(); 
} 
}