Flex实现组件自定义倒影效果之一：继承于UIComponent

ReflectionManager 类
package myComponents
{

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Shape;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.BitmapFilter;
import flash.filters.BlurFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import mx.events.MoveEvent;
import mx.events.ResizeEvent;
import mx.states.RemoveChild;
import mx.controls.Alert;
import mx.rpc.Fault;
public class ReflectionManager extends UIComponent {

private static const _rPoint:Point = new Point(0, 0);

private static const _rMatrix:Matrix = new Matrix();

private var _bitmap:Bitmap = new Bitmap(new BitmapData(1, 1, true, 0));

private var _targetBMData:BitmapData;

private var _alphaGrBMData:BitmapData;

private var _combinedBMData:BitmapData;

private var _alphaGradient:Matrix = new Matrix();

private var _blur:Number = 0;

private var _blurFilter:BitmapFilter;

private var _fadeFrom:Number = 0.3;

private var _fadeTo:Number = 0;

private var _matrix:Matrix;

private var _point:Point;

private var _rectangle:Rectangle;

private var _shape:Shape;

private var _target:UIComponent;

// this offset is needed because of the drop shadow

//private var _yshadowOffset:Number = -14;

private var _yshadowOffset:Number = 2;

public function ReflectionManager():void {

this.addChild(this._bitmap);

this.invalidateDisplayList();

}

public function get fadeFrom():Number {

return this._fadeFrom;

}

public function set fadeFrom(value:Number):void {

this._fadeFrom = value;

this.invalidateDisplayList();

}

public function get fadeTo():Number {

return this._fadeFrom;

}

public function set fadeTo(value:Number):void {

this._fadeTo = value;

this.invalidateDisplayList();

}

public function get blur():Number {

return this._blur;

}

public function set blur(value:Number):void {

this._blur = value;

this.invalidateDisplayList();

}

public function set target(value:UIComponent):void {

if (this._target != null) {

this._target.removeEventListener(FlexEvent.UPDATE_COMPLETE, targetUpdateHandler,

true);

this._target.removeEventListener(Event.REMOVED_FROM_STAGE, targetRemovedHandler);

this._target.removeEventListener(MoveEvent.MOVE,targetMoveHandler);

this._target.removeEventListener(ResizeEvent.RESIZE, targetResizeHandler);

this.clearBMData();

}

this._target = value;

if (this._target) {

this._target.addEventListener(FlexEvent.UPDATE_COMPLETE, targetUpdateHandler,

true);

this._target.addEventListener(Event.REMOVED_FROM_STAGE, targetRemovedHandler);

this._target.addEventListener(MoveEvent.MOVE,targetMoveHandler);

this._target.addEventListener(ResizeEvent.RESIZE, targetResizeHandler);

this.invalidateDisplayList();

}

}

public function targetUpdateHandler(event:*=null):void {

this.invalidateDisplayList();

}

private function targetMoveHandler(event:MoveEvent):void {

this._bitmap.x = this._target.x;

this._bitmap.y = this._target.y + this._target.height + _yshadowOffset;

}

private function targetResizeHandler(event:ResizeEvent):void {

this.clearBMData();

this.width = _target.width;

this.height = (_target.height / 100) * 50; //this.parentDocument.distance.value;

this.invalidateDisplayList();

}

private function targetRemovedHandler(event:Event):void {

this.parent.removeChild(this);

}

override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {

if (_target != null) {

this.drawReflection(_target);

this._bitmap.bitmapData.dispose();

this._bitmap.bitmapData = this._combinedBMData;

// do it here

this._bitmap.x = _target.x;

this._bitmap.y = _target.y + _target.height + _yshadowOffset;

} 

     else {

this.clearBMData();

}

}

private function drawReflection(target:UIComponent):void {

if (this.width > 0 && this.height > 0) {

this._matrix = new Matrix(1, 0, 0, -1, 0, target.height);

this._point = this._matrix.transformPoint(new Point(0, target.height));

this._matrix.tx = this._point.x * -1 ;

this._matrix.ty = (this._point.y - target.height) * -1;

this._targetBMData = new BitmapData(this.width, this.height, true, 0);

this._targetBMData.draw(target, this._matrix);

this._rectangle = new Rectangle(0, 0, this.width, this.height);

if (this._blur > 0) {

this._blurFilter = new BlurFilter(this._blur * 5, this._blur * 10, 1.0);

this._targetBMData.applyFilter(this._targetBMData, this._rectangle, this._point,

this._blurFilter);

}

if (this._alphaGrBMData == null) {

this._alphaGradient.createGradientBox(this.width, this.height, Math.PI / 2);

this._shape = new Shape();

this._shape.graphics.beginGradientFill(GradientType.LINEAR, new Array(0, 0), new

Array(this._fadeFrom, this._fadeTo), new Array(0, 0xFF), this._alphaGradient);

this._shape.graphics.drawRect(0, 0, this.width, this.height);

this._shape.graphics.endFill();

this._alphaGrBMData = new BitmapData(this.width, this.height, true, 0);

this._alphaGrBMData.draw(this._shape, _rMatrix);

}

this._combinedBMData = new BitmapData(this.width, this.height, true, 0);

this._combinedBMData.copyPixels(this._targetBMData, this._rectangle, _rPoint, this._alphaGrBMData);

}

}

public function clearBMData():void {

this._targetBMData = null;

this._alphaGrBMData = null;

this._combinedBMData = null;

}

}

}


在MXML中代码：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
  xmlns:util="myComponents.*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务值对象）放在此处 -->


</fx:Declarations>
<fx:Script>
<![CDATA[
private function show(event:*=null):void{
reflection.invalidateDisplayList();
}
]]>
</fx:Script>
<mx:Panel id="panel" creationComplete="show(event)" x="179" y="105">
<mx:TextInput>
</mx:TextInput>
<mx:Image source="images/3.png" width="173" height="172"/>
</mx:Panel>
<util:ReflectionManager id="reflection" target="{panel}" width="{panel.width}"
height="{(panel.height / 100) * 50}"
fadeFrom="0.5" fadeTo="0"
blur="0.5"/>
</s:Application>

效果如下：