自定义Flex ToolTip 的样式
?mx|ToolTip
??? ? {
??? ??? ? borderStyle:ClassReference("myBorder");
????? }
?
查看ToolTipBorder这个类的updateDisplayList(),可以得知通过设置borderStyle为自定义的Border类,可以继承
ToolTipBorder, 或模仿重写一下.
?
ToolTipBorder的源码?override protected function updateDisplayList(w:Number, h:Number):void{super.updateDisplayList(w, h);var borderStyle:String = getStyle("borderStyle");var backgroundColor:uint = getStyle("backgroundColor");var backgroundAlpha:Number= getStyle("backgroundAlpha");var borderColor:uint = getStyle("borderColor");var cornerRadius:Number = getStyle("cornerRadius");var g:Graphics = graphics;g.clear();filters = []; //主要是这里的代码switch (borderStyle){case "none":{// Don't draw anythingbreak;}case "errorTipRight":{// border drawRoundRect(11, 0, w - 11, h - 2, 3,borderColor, backgroundAlpha); // left pointer g.beginFill(borderColor, backgroundAlpha);g.moveTo(11, 7);g.lineTo(0, 13);g.lineTo(11, 19);g.moveTo(11, 7);g.endFill();filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];break;}case "errorTipAbove":{// border drawRoundRect(0, 0, w, h - 13, 3,borderColor, backgroundAlpha); // bottom pointer g.beginFill(borderColor, backgroundAlpha);g.moveTo(9, h - 13);g.lineTo(15, h - 2);g.lineTo(21, h - 13);g.moveTo(9, h - 13);g.endFill();filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];break;}case "errorTipBelow":{// border drawRoundRect(0, 11, w, h - 13, 3,borderColor, backgroundAlpha); // top pointer g.beginFill(borderColor, backgroundAlpha);g.moveTo(9, 11);g.lineTo(15, 0);g.lineTo(21, 11);g.moveTo(10, 11);g.endFill();filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];break;}default: //Tooltip{// facedrawRoundRect(3, 1, w - 6, h - 4, cornerRadius,backgroundColor, backgroundAlpha) if (!dropShadow)dropShadow = new RectangularDropShadow();dropShadow.distance = 3;dropShadow.angle = 90;dropShadow.color = 0;dropShadow.alpha = 0.4;dropShadow.tlRadius = cornerRadius + 2;dropShadow.trRadius = cornerRadius + 2;dropShadow.blRadius = cornerRadius + 2;dropShadow.brRadius = cornerRadius + 2;dropShadow.drawShadow(graphics, 3, 0, w - 6, h - 4);break;}}}
?
重写可参考
http://flexonblog.wordpress.com/2008/08/19/design-your-own-tooltipborder-in-flexcustom-tooltipborder-in-flexwith-example/
这里还有个Demo 演示