Flex自定义ToolTip实现与源码分享

Main.mxml(主程度界面)


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"       width="700" height="600" fontSize="12" backgroundColor="#FFFFFF">     <mx:Array id="directionData">         <mx:Object label="上边" value="1" />         <mx:Object label="下边" value="2" />         <mx:Object label="左边" value="3" />         <mx:Object label="右边" value="4" />         <mx:Object label="左上角" value="5" />         <mx:Object label="右上角" value="6" />         <mx:Object label="左下角" value="7" />         <mx:Object label="右下角" value="8" />     </mx:Array>     <mx:ArrayCollection id="listData">         <mx:Object label="image-1" desc="image deｓｃｒｉｐｔion-001 image deｓｃｒｉｐｔion-001"               image="@Embed('cheng/images/001.jpg')"               direction="{box_direction.selectedItem.value}" />         <mx:Object label="image-2" desc="image deｓｃｒｉｐｔion-002 image deｓｃｒｉｐｔion-002"               image="@Embed('cheng/images/002.jpg')"               direction="{box_direction.selectedItem.value}" />         <mx:Object label="image-3" desc="image deｓｃｒｉｐｔion-003 image deｓｃｒｉｐｔion-003"               image="@Embed('cheng/images/003.jpg')"               direction="{box_direction.selectedItem.value}" />         <mx:Object label="image-4" desc="image deｓｃｒｉｐｔion-004 image deｓｃｒｉｐｔion-004"               image="@Embed('cheng/images/004.jpg')"               direction="{box_direction.selectedItem.value}" />     </mx:ArrayCollection>     <mx:ControlBar>         <mx:Label text="ToolTip显示方向" />         <mx:ComboBox id="box_direction" dataProvider="{directionData}" />     </mx:ControlBar>     <mx:HorizontalList id="list_toolTip" dataProvider="{listData}"           width="90"         paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"           horizontalCenter="0" verticalCenter="0">         <mx:itemRenderer>             <mx:Component>                 <mx:VBox toolTip=" "                       toolTipCreate="{CustomToolTip.createToolTip(event, data)}"                       toolTipShow="{CustomToolTip.showToolTip(event, 5, data.direction)}" >                     <mx:ｓｃｒｉｐｔ>                         <![CDATA[                              import cheng.tooltips.CustomToolTip;                          ]]>                     </mx:ｓｃｒｉｐｔ>                     <mx:Image width="70" height="80" source="{data.image}" />                     <mx:Label width="70" fontSize="14" text="{data.label}"                         fontWeight="bold" textAlign="center"                           />                 </mx:VBox>             </mx:Component>         </mx:itemRenderer>     </mx:HorizontalList> </mx:Application> 

CustomToolTip.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"     implements="mx.core.IToolTip"       fontSize="12" borderStyle="solid"       cornerRadius="8" backgroundAlpha="0.7"       width="268" height="190">     <mx:ｓｃｒｉｐｔ>         <![CDATA[              import mx.core.UIComponent;              import mx.events.ToolTipEvent;              import mx.core.IToolTip;                            // 仅仅为了实现 mx.core.IToolTip 接口的方法              public function set text(value:String):void{}              public function get text():String{return "";}                            static public const TOP:uint = 1;              static public const BOTTOM:uint = 2;              static public const LEFT:uint = 3;              static public const RIGHT:uint = 4;              static public const TOP_LEFT:uint = 5;              static public const TOP_RIGHT:uint = 6;              static public const BOTTOM_LEFT:uint = 7;              static public const BOTTOM_RIGHT:uint = 8;                            static public function createToolTip(event:ToolTipEvent, data:Object):void              {                  var tip:CustomToolTip = new CustomToolTip;                  tip.data = data;                  event.toolTip = tip;              }                            /**               * 显示一个tooltip               *                * @param event         触发的对应事件               * @param offset        tooltip相对于原组件的位移               * @param direction     tooltip 显示的方向               * */              static public function showToolTip(event:ToolTipEvent, offset:Number = 10,                   direction:uint = BOTTOM_RIGHT):void              {                  var target:UIComponent = event.currentTarget as UIComponent;                  if (target)                  {                      var tip:IToolTip = event.toolTip;                      var p:Point = target.localToGlobal(new Point);                                            switch(direction)                      {                          case TOP:                          tip.x = p.x + (target.width - tip.width)/2;                          tip.y = p.y - offset - tip.height;                          break;                                                    case BOTTOM:                          tip.x = p.x + (target.width - tip.width)/2;                          tip.y = p.y + offset + target.height;                          break;                                                    case LEFT:                          tip.x = p.x - offset - tip.width;                          tip.y = p.y + (target.height - tip.height)/2;                          break;                                                    case RIGHT:                          tip.x = p.x + offset + target.width;                          tip.y = p.y + (target.height - tip.height)/2;                          break;                                                    case TOP_LEFT:                          tip.x = p.x - offset - tip.width;                          tip.y = p.y - offset - tip.height;                          break;                                                    case TOP_RIGHT:                          tip.x = p.x + offset + target.width;                          tip.y = p.y - offset - tip.height;                          break;                                                    case BOTTOM_LEFT:                          tip.x = p.x - offset - tip.width;                          tip.y = p.y + offset + target.height;                          break;                                                    case BOTTOM_RIGHT:                          tip.x = p.x + offset + target.width;                          tip.y = p.y + offset + target.height;                          break;                                                    default:                          tip.x = p.x + offset + target.width;                          tip.y = p.y + offset + target.height;                          break;                      }                  }              }          ]]>     </mx:ｓｃｒｉｐｔ>     <mx:Canvas left="5" top="5" right="5" bottom="5"           backgroundColor="#FFFFFF" cornerRadius="8" borderStyle="solid">         <mx:Image x="10" y="10" width="110" height="120"              horizontalAlign="center" source="{data.image}"/>         <mx:Label x="10" y="143" width="110" text="{data.label}"               fontWeight="bold" textAlign="center" />         <mx:Text left="134" top="10" right="10" bottom="10" text="{data.desc}"/>     </mx:Canvas> </mx:Canvas> 



<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" >
    <!-- Define the two view states, in addition to the base state.-->
    <mx:states>
        <mx:State name="One">
            <mx:SetProperty target="{p1}" name="x" value="110"/>
            <mx:SetProperty target="{p1}" name="y" value="0"/>
            <mx:SetProperty target="{p1}" name="width" value="200"/>
            <mx:SetProperty target="{p1}" name="height" value="210"/>
            <mx:SetProperty target="{p2}" name="x" value="0"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="100"/>
            <mx:SetProperty target="{p2}" name="height" value="100"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
        <mx:State name="Two">

            <mx:SetProperty target="{p2}" name="x" value="110"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="200"/>
            <mx:SetProperty target="{p2}" name="height" value="210"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
    </mx:states>
    <!-- Define Transition array with one Transition object.-->
    <mx:transitions>
        <!-- A transition for changing from any state to any state. -->
        <mx:Transition id="myTransition" fromState="*" toState="*">
            <!-- Define a Parallel effect as the top-level effect.-->
            <mx:Parallel id="t1" targets="{[p1,p2,p3]}">
                <!-- Define a Move and Resize effect.-->
                <mx:Move duration="400"/>
                <mx:Resize duration="400"/>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
    <!-- Define the Canvas container holding the three Panel containers.-->
    <mx:Canvas id="pm" width="100%" height="100%" >
        <mx:Panel id="p1" title="One" 
                x="0" y="0" width="100" height="100"
                click="currentState='One'" >
            <mx:Label fontSize="24" text="One"/>
        </mx:Panel>