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>

效果如下:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值