在Flex中实现可以拖动的毛玻璃效果

这是一个使用Flex实现的可拖动的毛玻璃效果(效果在文章后面)，具体我就不说了，直接帖代码。

<?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(); } }

PS:CSDN要上传一个Flash不容易啊，对于Flex/Silverlight开发者来说很不方便。只能用第三方站点才能放Flash/Silverlight

<!-- [if !IE]>--> <!-- <![endif]-->

<!-- [if !IE]>--> <!-- <![endif]-->

Flash内容

<!-- [if !IE]>--> <!-- <![endif]-->