`
cloud21
  • 浏览: 396283 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

分享一个ToolTip类,趋于完美!

    博客分类:
  • Flex
阅读更多
package myas
{
        import flash.display.*;
        import flash.events.*;
        import flash.filters.*;
        import flash.geom.*;
        import flash.text.*;
        //import flash.utils.Timer;

        import fl.transitions.Tween;
        import fl.transitions.easing.*;
        import fl.transitions.TweenEvent;


        /**
         * Example:
                var tt:ToolTip = new ToolTip();
                tt.show( DisplayObject, "", "这里是信息" );
         或:
         var tf:TextFormat = new TextFormat();
        tf.bold = true;
        tf.size = 12;
        tf.color = 0xff0000;
        var contentFormat:TextFormat = new TextFormat();
        contentFormat.size = 14;
        contentFormat.color = 0xFFFFFF;
        contentFormat.bold = false;
        
        var tt:ToolTip = new ToolTip();
        tt.hook = true;
        tt.hookSize = 20;
        tt.cornerRadius = 20;
        tt.align = "center";
        tt.titleFormat = tf;
        tt.contentFormat = contentFormat;
        tt.show( DisplayObject, "Title Of This ToolTip", "Some Copy that would go below the ToolTip Title" );
         *
         ****** by zcheng  2011-3-22 626272689@qq.com
         基于* @author Duncan Reid, www.hy-brid.com  * @date October 17, 2008  * @version 1.1
         *
         */

        public class ToolTip extends Sprite
        {
                //objects
                private var _stage:Stage;
                private var _parentObject:DisplayObject;
                private var _tf:TextField;// title field
                private var _cf:TextField;//content field
                private var _tween:Tween;

                //formats
                private var _titleFormat:TextFormat;
                private var _contentFormat:TextFormat;

                /* check for format override */
                private var _titleOverride:Boolean = false;
                private var _contentOverride:Boolean = false;

                //defaults
                private var _defaultWidth:Number = 200;//宽
                private var _buffer:Number = 10;//四周留白数
                private var _align:String = "right";//箭头位置
                private var _cornerRadius:Number = 4;//圆角度数
                private var _bgColors:Array = [0xFFF4E1,0xFFF4E1];
                //private var _bgColors:Array = [0xB5FEB4,0x003300];//背景色
                private var _autoSize:Boolean = false;//自动调整大小
                private var _hookEnabled:Boolean = true;//有无箭头
                //private var _delay:Number = 0;  //延迟出现毫秒数,已精简
                private var _hookSize:Number = 10;//箭头大小

                //offsets
                private var _offSet:Number;
                private var _hookOffSet:Number;


                public function ToolTip():void
                {
                        //do not disturb parent display object mouse events
                        this.mouseEnabled = false;
                        this.buttonMode = false;
                        this.mouseChildren = false;
                        //setup delay timer
                        /*_timer = new Timer(this._delay, 1);
                                    _timer.addEventListener("timer", timerHandler);*/
                        this.animate(true);
                }

                public function show( p:DisplayObject, title:String, content:String=null ):void
                {
                        //get the stage from the parent
                        this._stage = p.stage;
                        this._parentObject = p;

                        this.addCopy( title, content );
                        this.setOffset();
                        this.drawBG();
                        this.bgGlow();

                        //initialize coordinates
                        var parentCoords:Point = new Point(_parentObject.mouseX,_parentObject.mouseY);
                        var globalPoint:Point = p.localToGlobal(parentCoords);
                        this.x = globalPoint.x + this._offSet;
                        this.y = globalPoint.y - this.height - 10;

                        this.alpha = 0;
                        this._stage.addChild( this );
                        this._parentObject.addEventListener( MouseEvent.MOUSE_OUT, this.onMouseOut );
                        //removed mouse move handler in lieu of enterframe for smoother movement;
                        //this._parentObject.addEventListener( MouseEvent.MOUSE_MOVE, this.onMouseMovement );

                        this.follow( true );
                        //_timer.start();
                }

                public function hide():void
                {
                        this.animate( false );
                }

                /*private function timerHandler( event:TimerEvent ):void {
                this.animate(true);
                }*/

                private function onMouseOut( event:MouseEvent ):void
                {
                        event.currentTarget.removeEventListener(event.type, arguments.callee);
                        this.hide();
                }

                private function follow( value:Boolean ):void
                {
                        if (value)
                        {
                                addEventListener( Event.ENTER_FRAME, this.eof );
                        }
                        else
                        {
                                removeEventListener( Event.ENTER_FRAME, this.eof );
                        }
                }

                private function eof( event:Event ):void
                {
                        this.position();
                }

                private function position():void
                {
                        var speed:Number = 3;
                        var parentCoords:Point = new Point(_parentObject.mouseX,_parentObject.mouseY);
                        var globalPoint:Point = _parentObject.localToGlobal(parentCoords);
                        var xp:Number = globalPoint.x + this._offSet;
                        var yp:Number;
                        if ((_hookEnabled &&globalPoint.y>this.height) || (!_hookEnabled &&globalPoint.y>this.height+10))
                        {
                                yp = globalPoint.y - this.height - 10;
                                if (! _hookEnabled)
                                {
                                        _hookEnabled = true;
                                        this.graphics.clear();
                                        drawBG();
                                }
                        }
                        else if (stage.stageHeight/2>this.height)
                        {
                                yp = globalPoint.y + 25;
                                if (_hookEnabled)
                                {
                                        _hookEnabled = false;
                                        this.graphics.clear();
                                        drawBG();
                                }
                        }
                        var overhangRight:Number = this._defaultWidth + xp;
                        if (overhangRight > stage.stageWidth)
                        {
                                xp = stage.stageWidth - this._defaultWidth;
                        }
                        if (xp < 0)
                        {
                                xp = 0;
                        }
                        if (yp < 0)
                        {
                                yp = 0;
                        }
                        this.x += ( xp - this.x ) / speed;
                        this.y += ( yp - this.y ) / speed;
                }

                private function addCopy( title:String, content:String ):void
                {
                        if (! this._titleOverride)
                        {
                                this.initTitleFormat();
                        }
                        var titleIsDevice:Boolean = this.isDeviceFont(_titleFormat);

                        this._tf = this.createField(titleIsDevice);
                        this._tf.htmlText = title;
                        this._tf.setTextFormat( this._titleFormat);
                        //this._tf.setTextFormat( this._titleFormat, 0, title.length );
                        if (this._autoSize)
                        {
                                this._defaultWidth = this._tf.textWidth + 4 + ( _buffer * 2 );
                        }
                        else
                        {
                                this._tf.width = this._defaultWidth - ( _buffer * 2 );
                        }

                        this._tf.x = this._tf.y = this._buffer;
                        this.textGlow( this._tf );
                        addChild( this._tf );
                        if (content != null)
                        {
                                if (! this._contentOverride)
                                {
                                        this.initContentFormat();
                                }
                                //check for device font
                                var contentIsDevice:Boolean = this.isDeviceFont(_contentFormat);
                                this._cf = this.createField(contentIsDevice);
                                this._cf.htmlText = content;
                                var bounds:Rectangle = this.getBounds(this);
                                this._cf.x = this._buffer;
                                this._cf.y = bounds.height + 5;
                                this.textGlow( this._cf );
                                this._cf.setTextFormat( this._contentFormat );
                                if (this._autoSize)
                                {
                                        var cfWidth:Number = this._cf.textWidth + 4 + ( _buffer * 2 );
                                        this._defaultWidth = cfWidth > this._defaultWidth ? cfWidth:this._defaultWidth;
                                }
                                else
                                {
                                        this._cf.width = this._defaultWidth - ( _buffer * 2 );
                                }
                                addChild( this._cf );
                        }
                }

                //create field, if not device font, set embed to true
                private function createField( deviceFont:Boolean ):TextField
                {
                        var tf:TextField = new TextField();
                        tf.embedFonts = ! deviceFont;
                        tf.gridFitType = "pixel";
                        //tf.border = true;
                        tf.autoSize = TextFieldAutoSize.LEFT;
                        tf.selectable = false;
                        if (! this._autoSize)
                        {
                                tf.multiline = true;
                                tf.wordWrap = true;
                        }
                        return tf;
                }

                //draw background, use drawing api if we need a hook
                private function drawBG():void
                {
                        var bounds:Rectangle = this.getBounds(this);
                        var fillType:String = GradientType.LINEAR;
                        //var colors:Array = [0xFFFFFF, 0x9C9C9C];
                        var alphas:Array = [1,1];
                        var ratios:Array = [0x00,0xFF];
                        var matr:Matrix = new Matrix();
                        var radians:Number = 90 * Math.PI / 180;
                        matr.createGradientBox(this._defaultWidth, bounds.height + ( this._buffer * 2 ), radians, 0, 0);
                        var spreadMethod:String = SpreadMethod.PAD;
                        this.graphics.beginGradientFill(fillType, this._bgColors, alphas, ratios, matr, spreadMethod);
                        if (this._hookEnabled)
                        {
                                var xp:Number = 0;
                                var yp:Number = 0;
                                var w:Number = this._defaultWidth;
                                var h:Number = bounds.height + ( this._buffer * 2 );
                                this.graphics.moveTo( xp + this._cornerRadius, yp );
                                this.graphics.lineTo( xp + w - this._cornerRadius, yp );
                                this.graphics.curveTo( xp + w, yp, xp + w, yp + this._cornerRadius );
                                this.graphics.lineTo( xp + w, yp + h - this._cornerRadius );
                                this.graphics.curveTo( xp + w, yp + h, xp + w - this._cornerRadius, yp + h );

                                //hook
                                this.graphics.lineTo( xp + this._hookOffSet + this._hookSize, yp + h );
                                this.graphics.lineTo( xp + this._hookOffSet , yp + h + this._hookSize );
                                this.graphics.lineTo( xp + this._hookOffSet - this._hookSize, yp + h );
                                this.graphics.lineTo( xp + this._cornerRadius, yp + h );

                                this.graphics.curveTo( xp, yp + h, xp, yp + h - this._cornerRadius );
                                this.graphics.lineTo( xp, yp + this._cornerRadius );
                                this.graphics.curveTo( xp, yp, xp + this._cornerRadius, yp );
                                this.graphics.endFill();
                        }
                        else
                        {
                                this.graphics.drawRoundRect( 0, 0, this._defaultWidth, bounds.height + ( this._buffer * 2 ), this._cornerRadius );
                        }
                }




                /* Fade In / Out */

                private function animate( show:Boolean ):void
                {
                        var end:int = show == true ? 1:0;
                        _tween = new Tween(this,"alpha",Strong.easeOut,this.alpha,end,.5,true);
                        if (! show)
                        {
                                _tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
                                //_timer.reset();
                        }
                }

                private function onComplete( event:TweenEvent ):void
                {
                        event.currentTarget.removeEventListener(event.type, arguments.callee);
                        this.cleanUp();
                }

                /* End Fade */




                /** Getters / Setters */

                public function set tipWidth( value:Number ):void
                {
                        this._defaultWidth = value;
                }

                public function set titleFormat( tf:TextFormat ):void
                {
                        this._titleFormat = tf;
                        if (this._titleFormat.font == null)
                        {
                                this._titleFormat.font = "_sans";
                        }
                        this._titleOverride = true;
                }

                public function set contentFormat( tf:TextFormat ):void
                {
                        this._contentFormat = tf;
                        if (this._contentFormat.font == null)
                        {
                                this._contentFormat.font = "_sans";
                        }
                        this._contentOverride = true;
                }

                public function set align( value:String ):void
                {
                        var a:String = value.toLowerCase();
                        var values:String = "right left center";
                        if (values.indexOf(value) == -1)
                        {
                                throw new Error(this + " : Invalid Align Property, options are: 'right', 'left' & 'center'");
                        }
                        else
                        {
                                this._align = a;
                        }
                }

                /*public function set delay( value:Number ):void {
                this._delay = value;
                this._timer.delay = value;
                }*/

                public function set hook( value:Boolean ):void
                {
                        this._hookEnabled = value;
                }

                public function set hookSize( value:Number ):void
                {
                        this._hookSize = value;
                }

                public function set cornerRadius( value:Number ):void
                {
                        this._cornerRadius = value;
                }

                public function set colors( colArray:Array ):void
                {
                        this._bgColors = colArray;
                }

                public function set autoSize( value:Boolean ):void
                {
                        this._autoSize = value;
                }


                /* End Getters / Setters */



                /* Cosmetic */

                private function textGlow( field:TextField ):void
                {//对显示对象应用发光效果
                        var color:Number = 0x000000;
                        var alpha:Number = 0.2;
                        var blurX:Number = 2;
                        var blurY:Number = 2;
                        var strength:Number = 1;
                        var inner:Boolean = false;
                        var knockout:Boolean = false;
                        var quality:Number = BitmapFilterQuality.HIGH;

                        var filter:GlowFilter = new GlowFilter(color,
                                                          alpha,
                                                          blurX,
                                                          blurY,
                                                          strength,
                                                          quality,
                                                          inner,
                                                          knockout);
                        var myFilters:Array = new Array();
                        myFilters.push(filter);
                        field.filters = myFilters;
                }

                private function bgGlow():void
                {//对显示对象应用发光效果
                        var color:Number = 0x000000;
                        var alpha:Number = 0.40;
                        var blurX:Number = 2;
                        var blurY:Number = 2;
                        var strength:Number = 1;
                        var inner:Boolean = false;
                        var knockout:Boolean = false;
                        var quality:Number = BitmapFilterQuality.HIGH;

                        var filter:GlowFilter = new GlowFilter(color,
                                                          alpha,
                                                          blurX,
                                                          blurY,
                                                          strength,
                                                          quality,
                                                          inner,
                                                          knockout);
                        var myFilters:Array = new Array();
                        myFilters.push(filter);
                        filters = myFilters;
                }

                private function initTitleFormat():void
                {
                        _titleFormat = new TextFormat();
                        _titleFormat.font = "_sans";
                        _titleFormat.bold = true;
                        _titleFormat.size = 16;
                        _titleFormat.color = 0x01430E;
                }

                private function initContentFormat():void
                {
                        _contentFormat = new TextFormat();
                        _contentFormat.font = "_sans";
                        _contentFormat.bold = false;
                        _contentFormat.size = 14;
                        _contentFormat.color = 0x000000;
                }

                /* End Cosmetic */



                /* Helpers */

                /* Check if font is a device font */
                private function isDeviceFont( format:TextFormat ):Boolean
                {
                        var font:String = format.font;
                        var device:String = "_sans _serif _typewriter";
                        return device.indexOf( font ) > -1;
                        //_sans
                        //_serif
                        //_typewriter
                }

                private function setOffset():void
                {
                        switch ( this._align )
                        {
                                case "left" :
                                        this._offSet = - _defaultWidth +  ( _buffer * 3 ) + this._hookSize;
                                        this._hookOffSet = this._defaultWidth - ( _buffer * 3 ) - this._hookSize;
                                        break;

                                case "right" :
                                        this._offSet = 0 - ( _buffer * 3 ) - this._hookSize;
                                        this._hookOffSet = _buffer * 3 + this._hookSize;
                                        break;

                                case "center" :
                                        this._offSet = - ( _defaultWidth / 2 );
                                        this._hookOffSet =  ( _defaultWidth / 2 );
                                        break;

                                default :
                                        this._offSet = - ( _defaultWidth / 2 );
                                        this._hookOffSet =  ( _defaultWidth / 2 );
                                        break;
                        }
                }

                /* End Helpers */



                /* Clean */

                private function cleanUp():void
                {
                        this._parentObject.removeEventListener( MouseEvent.MOUSE_OUT, this.onMouseOut );
                        this.follow( false );
                        this._tf.filters = [];
                        this.filters = [];
                        removeChild( this._tf );
                        this._tf = null;
                        if (this._cf != null)
                        {
                                this._cf.filters = [];
                                removeChild( this._cf );
                        }
                        this.graphics.clear();
                        parent.removeChild( this );
                }

                /* End Clean */

        }
}
分享到:
评论
1 楼 zhchyun2008 2014-11-05  
这里有个小问题,背景有时候会出现?不知道如何解决

相关推荐

    Tooltip

    1. **Tooltip类定义**:定义一个Tooltip类,可能继承自系统提供的基础Tooltip类,或者完全自定义实现。这个类应该包含必要的属性(如Tooltip文本)和方法(如显示、隐藏、设置文本等)。 2. **关联控件**:类中可能...

    MFC_ToolTip超级类(可以实现各种类型的ToolTip的弹出)

    标题“MFC_ToolTip超级类”指的是一个专门扩展了MFC原生`CToolTipCtrl`类的自定义类,以实现更丰富的功能,比如创建不同类型的ToolTip。 `ToolTip`控件通常用来提供关于用户界面上各个控件的额外信息,当鼠标悬停在...

    VC 简洁的tooltip提示类

    在标题提到的"VC 简洁的tooltip提示类"中,我们可以理解为这是一个专门为VC++开发的自定义类,用于增强或简化对控件(如static、Edit、Button等)添加Tooltip提示的过程。 Tooltip提示通常用于提供额外的信息,当...

    一个ajax的tooltip例子

    在网页设计中,Tooltip通常用于提供额外的上下文信息,当用户将鼠标悬停在某个元素上时,会弹出一个小窗口显示详细信息。Ajax Tooltip的优点在于,它无需刷新页面就能获取并展示远程数据,从而提供更加流畅的用户...

    3D地球+自定义tooltip,自定义样式完美显示

    在3D地球这种场景下,由于地球表面的复杂性,如何让tooltip准确地跟随鼠标并清晰地显示信息,确实是一个挑战。 为了解决这个问题,开发者可以利用ECharts的自定义tooltip功能。在ECharts的配置项中,可以通过`...

    PB9下系统tooltip的制作(nvo_ToolTip API实现,漂亮!)

    1.声明一实例变量 nvo_ToolTip ToolTip 2.在需要此服务的对象的构造事件中加入 ToolTip.AddTool(this, string(this.tag), 0) 3.在对象的MouseMove事件中加入ToolTip.RelayMsg(This) 4.把要显示的ToolTips文本...

    as3 鼠标提示类ToolTip

    在ActionScript 3 (AS3)中,ToolTip 类是一个用于创建和管理鼠标悬停提示的内置组件。这个类使得开发者可以自定义显示在鼠标指针附近的文本或图形提示,为用户提供更多的上下文信息。在本篇文章中,我们将深入探讨...

    一个Vue2x的tooltip提示信息组件

    "一个Vue2x的tooltip提示信息组件"就是这样一个专门用于在用户与界面交互时提供额外信息的组件。 该组件的核心功能在于,当用户对某个元素执行特定操作(如悬停、点击等)时,它会动态地显示或隐藏提示信息。这些...

    flash 的几个tooltip显示

    - AS3(ActionScript 3.0):引入`flash.ui.ToolTip`类,创建一个Tooltip实例并用`new ToolTip()`初始化,然后使用`ToolTip.displayObject.text`设置文本。 3. 自定义Tooltip样式: - 通过修改Tooltip的样式属性...

    能够实现多行显示tooltip的类

    通常,系统默认的tooltip只支持单行显示,但在这个情况下,开发人员可能已经编写了一个特殊的类(如clsToolTip.cls),该类能够提供更丰富的用户体验,尤其是在需要显示更多信息但又不希望打开新窗口的情况下。...

    MFC中的tooltip的类

    1. **创建Tooltip**: 在MFC应用程序中,你可以通过在对话框或窗口类的初始化成员函数中创建`CToolTipCtrl`对象,并调用`Create()`函数来创建一个Tooltip控件。 2. **关联控件与Tooltip**: 使用`AddTool()`或`...

    as3 tooltip的例子

    在描述中提到的“一个tooltip类,表示一个长方形的小弹出窗口”,实际上就是在创建一个自定义的Tooltip类,以便在用户将鼠标悬停在特定的舞台对象(如按钮或图形)上时显示相关信息。 创建自定义Tooltip类的步骤...

    WPF修改Tooltip样式

    在Windows Presentation Foundation (WPF) 中,Tooltip是一个用于显示与鼠标指针相关的简短提示信息的控件。它通常在用户将鼠标悬停在其他UI元素上时出现,提供额外的信息。在默认情况下,Tooltip的样式是有限的,但...

    带有tooltip的ClistCtrl类

    首先,我们需要创建一个继承自ClistCtrl的自定义类,例如CToolTipListCtrl。在这个新类中,我们将重写一些必要的成员函数来处理tooltip的显示。 2. **初始化tooltip控制**: 在CToolTipListCtrl的构造函数中,...

    MFC示例:ToolTip的使用.rar

    在Microsoft Foundation Class (MFC)库中,ToolTip控件是一个非常实用的功能,它可以在用户将鼠标悬停在特定控件上时显示简短的提示信息。这个“MFC示例:ToolTip的使用.rar”文件包含了一个示例项目,用于演示如何...

    react-reacttooltipReact的tooltip组件

    这是一个示例Tooltip! &lt;/ReactTooltip&gt; ); } export default MyComponent; ``` 在上面的代码中,当鼠标悬停在`span`元素上时,将在其上方显示一个黑色背景的Tooltip。 `react-tooltip`还支持各种类型的...

    支持TOOLTIP的COMBOX

    在提供的压缩包文件中,"QoushuiControlLib"可能是一个自定义的用户控件库,包含了支持TOOLTIP的COMBOBOX类。开发者可能已经在这个库中封装了所需的逻辑,包括如何关联每个COMBOBOX项与对应的TOOLTIP,以及如何在...

    简单 ToolTip 类

    简单 ToolTip 类,可以设置显示位置,自己控制显示或隐藏。

    表格单元格自定义ToolTip组件

    "表格单元格自定义ToolTip组件"是一个专门解决UI交互问题的工具,它允许开发者根据需求为表格中的每个单元格提供更加详细和丰富的信息提示。这种自定义的ToolTip在Flex组件上特别有用,Flex是一种强大的富互联网应用...

    vc中tooltip应用

    首先,我们需要在资源视图中添加一个Tooltip控件,然后在类视图中关联一个`CToolTipCtrl`成员变量。接着,在对话框初始化函数(如`OnInitDialog`)中,使用`CToolTipCtrl::Create`创建并初始化Tooltip,并通过`...

Global site tag (gtag.js) - Google Analytics