flex布局|Flex4 自定义ToolTip组件替换系统默认的ToolTip的例子

更新时间:2020-03-11    来源:flex    手机版     字体:

【www.bbyears.com--flex】

Flex中,如果给组件设置了toolTip属性值,则当鼠标移动到该组件上时,会自动出现tip提示,默认样式是黄色背景,且只能显示普通文本。

 

我们可以继承系统的ToolTip来实现自己的toolTip组件替换,并实现如下功能:
1,提示文本可以使用html文本(同时可以显示图片)
2,提示背景使用自定义皮肤(渐变,边框,半透明背景)

 

效果图如下:

 


--- 自定义提示组件 HtmlToolTip.as ---

package {

    import mx.controls.ToolTip;

     

    public class HtmlToolTip extends ToolTip

    {

        override protected function commitProperties():void{

            super.commitProperties();

            //转化为HTML文本

            textField.htmlText = text;

        }

         

        override protected function createChildren():void{

            //设置边框样式

            this.setStyle("borderSkin",HtmlToolBorder);

            this.setStyle("backgroundColors",[0x006699, 0xAEB4E6]);

            this.setStyle("borderColor",0x5965CC);

            super.createChildren();

        }

    }

}

--- 提示组件皮肤 HtmlToolBorder.as ---

package

{

    import flash.display.GradientType; 

    import mx.skins.halo.ToolTipBorder;

     

    //ToolTipBorder是默认的边框样式

    public class HtmlToolBorder extends ToolTipBorder{

        override protected function updateDisplayList(unscaledWidth:Number,

                                                      unscaledHeight:Number):void{

             

            var borderThickness:Number = this.getStyle("borderThickness");

            var borderColor:Number     = this.getStyle("borderColor");

            var backgroundColors:Array = this.getStyle("backgroundColors");

            var backgroundAlpha:Number = this.getStyle("backgroundAlpha");

             

            super.updateDisplayList(unscaledWidth, unscaledHeight);

             

            var w:Number = this.width;

            var h:Number = this.height;

            //清除原背景图形

            this.graphics.clear();

            //用渐变绘制背景

            this.graphics.beginGradientFill(GradientType.LINEAR,backgroundColors,[1.0,0.5],[0,255]);

            //绘制矩形

            this.graphics.drawRect(0,0,w,h);

            this.graphics.endFill();

            this.alpha = backgroundAlpha;   

             

            //绘制边框

            this.graphics.lineStyle(borderThickness,borderColor,1);

            this.graphics.moveTo(0,0);

            this.graphics.lineTo(w,0);

            this.graphics.lineTo(w,h);

            this.graphics.lineTo(0,h);

            this.graphics.lineTo(0,0);

        }

    }

}

--- 使用 ---


flex/spark"
               creationComplete="init(event)">  
    
        HtmlText
" +                     "






Go to: http://hangge.com";             }                       ]]>     
                         

本文来源:http://www.bbyears.com/flash/86432.html