mx.skins.ProgrammaticSkin该类是外观元素的基类,它们通过编程方式来绘制自身。
下面通过实现自定义ToolTip来讲解这个类。
ToolTipBorderSkin ,这个方法就是实现自身的绘制.
package skins
{
import flash.display.Graphics;
import flash.geom.Point;
import mx.skins.ProgrammaticSkin;
import flash.filters.BitmapFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.DropShadowFilter;
public class ToolTipBorderSkin extends ProgrammaticSkin
{
public function ToolTipBorderSkin()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void{
trace("w=" + unscaledWidth);
trace("h=" + unscaledHeight);
var g:Graphics = graphics;
g.clear();
//g.lineStyle(0,0xFF0000);
g.beginFill(0xFF0000,0.5);
//g.drawRect(0,0,unscaledWidth,unscaledHeight);
g.drawRoundRect(0,0,unscaledWidth,unscaledHeight,15,10);
g.endFill();
var _w:Number = unscaledWidth;
var _h:Number = unscaledHeight;
var point1:Point = new Point(_w/3,_h);
var point2:Point = new Point(2*_w/3,_h);
var point3:Point = new Point(0,2*_h);
g.beginFill(0xFF0000,0.5);
g.moveTo(point1.x,point1.y);
g.lineTo(point3.x,point3.y);
g.lineTo(point2.x,point2.y);
g.endFill();
this.filters = [getDropShadowFilter()];
}
//添加阴影
private function getDropShadowFilter():BitmapFilter{
var color:Number = 0x000000;
var angle:Number = 45;
var alpha:Number = 0.8;
var blurX:Number = 8;
var blurY:Number = 8;
var distance:Number = 15;
var strength:Number = 0.65;
var inner:Boolean = false;
var knockout:Boolean = false;
var quality:Number = BitmapFilterQuality.HIGH;
return new DropShadowFilter(distance,
angle,
color,
alpha,
blurX,
blurY,
strength,
quality);
}
}
}
我们在下面的自定义样式里可以调用上面的方法。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Style>
ToolTip
{
borderStyle:inset;
color:#FFFFFF;
borderSkin: ClassReference("skins.ToolTipBorderSkin");
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.ToolTipEvent;
import mx.managers.ToolTipManager;
private function initApp():void{
b5.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, moveToolTip);
}
private function moveToolTip(event:ToolTipEvent):void{
trace(event);
event.toolTip.x = b5.x + 5;
event.toolTip.y = b5.y -35;
}
]]>
</mx:Script>
<mx:Button id="b5" width="30" toolTip="this is good!" height="20" x="226" y="167"/>
</mx:Application>