[转] Flex中实现List横向展示图片，并且鼠标靠近时显示大图（ImageToolTip）
实现的效果：图片横向展示，鼠标Over的时候，在图片的旁边显示大图,当点击按钮的时候可以实现图片的滚动。
1 <?xml version="1.0" encoding="utf-8"?>
2 <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
3 xmlns:s="library://ns.adobe.com/flex/spark"
4 xmlns:mx="library://ns.adobe.com/flex/mx"
5 >
6 <!-- <s:layout>
7 <s:VerticalLayout gap="0"/>
8 </s:layout>-->
9 <fx:Declarations>
10 <!-- 将非可视元素（例如服务、值对象）放在此处 -->
11 </fx:Declarations>
12
13 <fx:Script>
14 <![CDATA[
15 import com.jingle.presentation.ImageListViewPM;
16 import com.jingle.util.LoadingManager;
17
18 import mx.controls.Alert;
19 import mx.core.FlexGlobals;
20 import mx.effects.Tween;
21 import mx.effects.easing.Linear;
22 import mx.events.CloseEvent;
23 import mx.events.ListEvent;
24
25 [Bindable]
26 [Inject]
27 public var model:ImageListViewPM;
28
29 public var i:int=1;
30
31 protected function previousClickHandler(event:MouseEvent):void
32 {
33 var from:Number = frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition;
34 var end:Number = frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition - frameList.scroller.horizontalScrollBar.viewport.width;
35 if(tween != null)
36 {
37 tween.endTween();
38 }
39 tween = new Tween(this,from,end,500,10,tweenUpdateHandler,tweenEndHandler);
40 tween.easingFunction = Linear.easeInOut;
41 }
42 private var tween:Tween;
43 protected function nextClickHandler(event:MouseEvent):void
44 {
45 var from:Number = frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition;
46 var end:Number = frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition + frameList.scroller.horizontalScrollBar.viewport.width;
47 if(tween != null)
48 {
49 tween.endTween();
50 }
51 tween = new Tween(this,from,end,500,10,tweenUpdateHandler,tweenEndHandler);
52 tween.easingFunction = Linear.easeInOut;
53 }
54
55 private function tweenUpdateHandler(value:String):void
56 {
57 frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition = Math.round(Number(value) * 100) / 100;
58 }
59
60 private function tweenEndHandler(value:String):void
61 {
62 //
63 }
64
65 ]]>
66 </fx:Script>
67
68 <s:HGroup width="100%" height="100%" verticalAlign="middle" gap="0">
69 <!--<s:Button skinClass="com.jingle.view.skin.PageButtonSkin" width="30" height="30" click="previousClickHandler(event)" buttonMode="true"/>-->
70 <mx:Button buttonMode="true" click="previousClickHandler(event)" height="50" styleName="leftBtn" width="25.3" overSkin="@Embed('assets/image/leftBtn.png')" upSkin="@Embed('assets/image/leftBtn.png')" downSkin="@Embed('assets/image/left_button_down.swf')"/>
71 <s:List id="frameList" minWidth="0" minHeight="0" width="100%" borderVisible="false" verticalCenter="0"
72 dataProvider="{model.imageList}"
73 itemRenderer="com.ImageListItemsRenderer"
74 >
75 <s:layout>
76 <s:HorizontalLayout gap="5" id="frameListLayout" />
77 </s:layout>
78 </s:List>
79
80 <!--<s:Button skinClass="com.jingle.view.skin.PageButtonSkin" width="30" height="30" rotation="180" right="0"
81 click="nextClickHandler(event)" buttonMode="true"/>-->
82 <mx:Button buttonMode="true" click="nextClickHandler(event)" height="50" styleName="rightBtn" width="25.3" overSkin="@Embed('assets/image/rightBtn.png')" upSkin="@Embed('assets/image/rightBtn.png')" downSkin="@Embed('assets/image/right_button_down.swf')"/>
83
84 </s:HGroup>
85 </s:Group>
下面是ItemRenderer部分：
ImageListItemRenderer.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
3 xmlns:s="library://ns.adobe.com/flex/spark"
4 xmlns:mx="library://ns.adobe.com/flex/mx"
5 autoDrawBackground="true"
6 width="52" height="52" rollOver="itemRollOverHandler(event)"
7 rollOut="itemRollOutHandler(event)">
8
9 <fx:Script>
10 <![CDATA[
11
12 import com.ResourceImageVO;
13 import com.ImageListViewPM;
14 import com.ImageDragProxy;
15 import com.ImageToolTip;
16 import com.model.Resource;
17
18 import mx.core.DragSource;
19 import mx.managers.DragManager;
20
21 [Bindable]
22 public var resourceImageVO:ResourceImageVO;
23
24 [Bindable]
25 public var imgHeight:Number = 52;
26
27 [Bindable]
28 public var imgWidth:Number = 52;
29
30 override public function set data(value:Object):void
31 {
32 super.data = value;
33 resourceImageVO = value as ResourceImageVO;
34 }
35
36 protected function itemRollOverHandler(event:MouseEvent):void
37 {
38 showToolTip();
39 }
40
41 protected function itemRollOutHandler(event:MouseEvent):void
42 {
43 hideToolTip();
44 }
45
46 private function showToolTip():void
47 {
48 var p:Point = localToGlobal(new Point());
49 p.x = p.x + width + 20;
50 ImageToolTip.getInstance().show(resourceImageVO.m, p, 400, 5); //显示中图，传入中图的地址
51 }
52
53 private function hideToolTip():void
54 {
55 ImageToolTip.getInstance().hide();
56 }
57
58 ]]>
59 </fx:Script>
60
61 <s:states>
62 <s:State name="normal" />
63 <s:State name="hovered" />
64 <s:State name="selected" />
65 </s:states>
66
67 <s:Rect left="0" right="0" top="0" bottom="0" >
68 <s:fill>
69 <s:SolidColor color.normal="0xffffff" color.selected="0xff8800" color.hovered="0xffffff" />
70 </s:fill>
71 </s:Rect>
72
73 <s:Group>
74 <s:Image id="img" source="{resourceImageVO.s}" width="{imgWidth}" height="{imgHeight}"
75 left="2" top="2" buttonMode="true">
76 <s:filters>
77 <mx:GlowFilter blurX="3" blurY="3" color="0x777777" strength="1" quality="5" />
78 </s:filters>
79 </s:Image>
80 </s:Group>
81 </s:ItemRenderer>
下面是ImageToolTip.as
1 package com
2 {
3 import flash.display.Bitmap;
4 import flash.display.DisplayObject;
5 import flash.display.Loader;
6 import flash.display.Shape;
7 import flash.events.Event;
8 import flash.events.TimerEvent;
9 import flash.filters.DropShadowFilter;
10 import flash.geom.Point;
11 import flash.net.URLRequest;
12 import flash.system.LoaderContext;
13 import flash.utils.Timer;
14 import mx.core.Application;
15 import mx.core.FlexGlobals;
16 import mx.core.UIComponent;
17 import mx.managers.PopUpManager;
18 import spark.components.Application;
19
20 public class ImageToolTip extends UIComponent
21 {
22 private var _maxWidth:int = 400;
23 private var _delay:int = 200;
24 private var _timer:Timer;
25 private var _url:String;
26 private var _loader:Loader;
27 private var _padding:int;
28 private var _border:Shape;
29
30 public function ImageToolTip()
31 {
32 this._timer = new Timer(this._delay);
33 this._timer.addEventListener(TimerEvent.TIMER, onTimer);
34 this._loader = new Loader();
35 this._loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
36 addChild(this._loader);
37 this._border = new Shape();
38 addChild(this._border);
39 var dropShadowFilter:DropShadowFilter = new DropShadowFilter(4, 45, 0, 1, 5, 5, 0.15);
40 filters = [dropShadowFilter];
41 }
42
43
44 private function onTimer(evt:TimerEvent):void
45 {
46 this._timer.stop();
47 if(!isPopUp)
48 {
49 PopUpManager.addPopUp(this, FlexGlobals.topLevelApplication as DisplayObject);
50 }
51 this._loader.load(new URLRequest(this._url), new LoaderContext(true));
52 }
53
54 private function onLoadComplete(evt:Event):void
55 {
56 var isBitmap:Boolean = false;
57 if(this._loader.content is Bitmap)
58 {
59 (this._loader.content as Bitmap).smoothing = true;
60 isBitmap = true;
61 }
62
63 if(isBitmap && Math.max(this._loader.content.width, this._loader.content.height) < this._maxWidth && this._padding > 0)
64 {
65 this._maxWidth = Math.max(this._loader.content.width, this._loader.content.height);
66 }
67
68 var xScale:Number = (this._maxWidth - 2 * this._padding) / Math.max(this._loader.content.width, this._loader.content.height);
69 this._loader.scaleX = xScale;
70 this._loader.scaleY = (this._maxWidth - 2 * this._padding) / Math.max(this._loader.content.width, this._loader.content.height);
71
72 width = this._loader.width + this._padding * 2;
73 height = this._loader.height + this._padding * 2;
74 this.updateView();
75 visible = true;
76 }
77
78 public function hide():void
79 {
80 this._timer.stop();
81 if(isPopUp)
82 {
83 PopUpManager.removePopUp(this);
84 }
85 }
86
87 private function updateView():void
88 {
89 graphics.clear();
90 graphics.beginFill(0xffffff);
91 graphics.drawRect(0, 0, width, height);
92 graphics.endFill();
93
94 this._border.graphics.clear();
95 this._border.graphics.lineStyle(1,0x555555);
96 this._border.graphics.drawRect(0,0,width,height);
97
98 if(x + width > FlexGlobals.topLevelApplication.width)
99 {
100 x = localToGlobal(new Point(mouseX,mouseY)).x - width - 20;
101 }
102
103 if(y + height > FlexGlobals.topLevelApplication.height)
104 {
105 y = localToGlobal(new Point(mouseX,mouseY)).y - height - 20;
106 }
107
108 this._loader.x = this._padding;
109 this._loader.y = this._padding;
110 this._loader.width = width - 2 * this._padding;
111 this._loader.height = height - 2 * this._padding;
112 }
113
114 public function show(imageURL:String, point:Point, maxWidth:int = 400, padding:int = 5):void
115 {
116 if(!imageURL || imageURL == "")
117 {
118 return;
119 }
120
121 this._url = imageURL;
122 this.x = point.x;
123 this.y = point.y;
124 this._padding = padding;
125 this._maxWidth = maxWidth;
126
127 if(this._timer.running)
128 {
129 this._timer.stop();
130 }
131 this._timer.start();
132 visible = false;
133 }
134 private static var _instance:ImageToolTip;
135
136 public static function getInstance():ImageToolTip
137 {
138 if(!_instance)
139 {
140 _instance = new ImageToolTip();
141 }
142 return _instance;
143 }
144 }
145 }
