Flex tooltip 样式 显示框

package
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	
	import mx.core.IUITextField;
	import mx.core.UIComponent;
	import mx.core.UITextField;

	[Style(name="paddingLeft", type="Number", format="Length", inherit="no")] 
	[Style(name="paddingRight", type="Number", format="Length", inherit="no")] 
	[Style(name="paddingTop", type="Number", format="Length", inherit="no")] 
	[Style(name="paddingBottom", type="Number", format="Length",inherit="no")] 
	public class MessageText2 extends UIComponent
	{
		public function MessageText2()
		{
			super();
			textField = IUITextField(createInFontContext(UITextField));
			setStyle("paddingLeft",5);
			setStyle("paddingRight",5);
			setStyle("paddingTop",5);
			setStyle("paddingBottom",5);
		}
		
		protected var textField:IUITextField;
		
		public var text:String = "";
		
		public var htmlText:String = "";
		
		public var cornerRadius:Number = 0;
		
		public var backColor:Number = 0xFFFFFF;
		
		override protected function createChildren():void{
			//绘制底色
			var sprite:Sprite = new Sprite();
			sprite.graphics.beginFill(backColor,1);
			sprite.graphics.drawRoundRect(0,0,this.width,this.height,cornerRadius);
			sprite.graphics.moveTo(0,this.height/10);
			sprite.graphics.lineTo(-(this.width/25),this.height/3);
			sprite.graphics.lineTo(0,this.height/4);
			sprite.graphics.endFill();
			this.addChild(sprite);
			
			//加文本框
			this.addChild(DisplayObject(textField));
			textField.width = this.width - getStyle("paddingLeft") - getStyle("paddingRight");
			textField.height = this.height - getStyle("paddingBottom") - getStyle("paddingTop");
			textField.x = getStyle("paddingLeft");
			textField.y = getStyle("paddingTop");
			textField.text = text;
		}
	}
}
 
<local:MessageText2 width="400" height="100" text="test" cornerRadius="30"/>
 
package
{
	import flash.display.Graphics;
	import flash.filters.DropShadowFilter;
	
	import mx.controls.TextInput;

	public class MessageText extends TextInput
	{
		public function MessageText()
		{
			super();
			this.width = 250;
			this.height = 55;
			this.setStyle("cornerRadius","8");
		}
		
		public var tipDirection:String = "right";
		
		public var tipWidth:Number = 8;
		
		public var tipHeight:Number = 10;
		
		override protected function updateDisplayList(w:Number,h:Number):void{
			
            super.updateDisplayList(w,h);  
  			if(this.parent==null) return;
  			this.setStyle("borderStyle","solid");
  			this.setStyle("borderThickness",0);
            //得到绘制对象
            var gfx:Graphics = this.graphics;
            //清楚原来绘制轨迹
            gfx.clear();
            //设置绘制的颜色以及透明度  
            gfx.beginFill(this.getStyle("backgroundColor"),this.getStyle("backgroundAlpha"));
            switch(tipDirection) {
            	case 'bottom':
            		//剪头向上   整体位于参照物的下方
            		gfx.moveTo(w/2 - tipWidth,0);
            		//三角形的尖端点
					gfx.lineTo(w/2,- tipHeight);  
		            gfx.lineTo(w/2 + tipWidth,0);
            		break;
            	case 'right':
            		//剪头向左  整体位于参照物的右放
            		gfx.moveTo(0,h/4 - tipWidth);
            		//三角形的尖端点
					gfx.lineTo(-tipHeight,h/3);  
		            gfx.lineTo(0,h/4 + tipWidth);
            		break;
            	case 'left':
            		//剪头想右  整体位于参照物的左方
            		gfx.moveTo(w,h/2 - tipWidth);
            		//三角形的尖端点
					gfx.lineTo(w+tipHeight,h/2);  
		            gfx.lineTo(w,h/2 + tipWidth);
            		break;
            	case 'top':
            		//剪头想下  整体位于参照物的上方
            		gfx.moveTo(w/2 - tipWidth,h);
            		//三角形的尖端点
					gfx.lineTo(w/2,h + tipHeight);  
		            gfx.lineTo(w/2 + tipWidth,h);
            		break;
            }
            
//            var p:Container = parent as Container;
//            
////             var ba:uint = 1;                //backgroundAlpha     背景透明度
////             var bg:uint = 0xffffff;            //backgroundColor     背景颜色
//             //获取容器定义的区域边界信息对象           
//             var vm:EdgeMetrics = p.viewMetrics;       
//            //设置四个角的圆度
//             var radiusContent:Object = {tl:vm.top,tr:0,bl:0,br:vm.top};   
//            //标题栏圆度   
//             var radiusTitle:Object = {tl:vm.top,tr:0,bl:0,br:0};       
////            //画一个圆角矩形,整个背景
////            this.dw(0,0,w,h,radiusContent,bg,ba);
////            //画一个圆角矩形,标题栏   
////            this.drawRoundRect(0,0,w,vm.top,radiusTitle,0xff0000,.7);
////            //画一个圆角矩形,标题栏的那个高光水晶条
////            this.drawRoundRect(0,0,w,vm.top / 2,radiusTitle,0xffffff,.3);
//            
//             //下面是画阴影的。
//             var dropShadow:RectangularDropShadow = new RectangularDropShadow();
//             dropShadow.distance = 8;
//             dropShadow.angle = 60;
//             dropShadow.color = 0x000;
//             dropShadow.alpha = 0.4;
//   
//             dropShadow.tlRadius = radiusContent.tl;
//             dropShadow.trRadius = radiusContent.tr;
//             dropShadow.blRadius = radiusContent.bl;
//             dropShadow.brRadius = radiusContent.br;
//   
//             dropShadow.drawShadow(gfx, 0, 0, w, h);
//             
             this.filters = [new DropShadowFilter(2, 90, 0x000000, 0.6, 2, 2, 1, 1, true)];
            //绘制边框
//            gfx.drawEllipse(0,0,w,h);
//            gfx.endFill();
		}
	}
}
 

你可能感兴趣的:(Flex,Flash)