FLEX类似谷歌地图拖拽功能

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

要实现类似于谷歌地图拖拽功能，可以用s:Scroller标签来实现，代码如下：

mxml:

<s:Scroller width="100%" height="100%" interactionMode="touch" skinClass="skins.ScrollerSkin">
<s:Group>
<component:Diagram id="diagram">
</component:Diagram></s:Group>
</s:Scroller>

其中的component:Diagram为自己定义的组件，只需替换成你要放置的东西就OK.

皮肤文件 -->

1.ScrollerSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Scroller")]
]]>
</fx:Metadata> <fx:Script>
<![CDATA[
import skins.*;
/**
* @private
*/
override public function beginHighlightBitmapCapture() : Boolean
{
var needUpdate:Boolean = super.beginHighlightBitmapCapture(); // Draw an opaque rect that fill our entire skin. Our background
// is transparent, but we don't want focus/error skins to
// poke through. This is safe to do since we don't have any
// graphic elements as direct children.
graphics.beginFill(0);
graphics.drawRect(0, 0, width, height);
graphics.endFill(); return needUpdate;
} /**
* @private
*/
override public function endHighlightBitmapCapture() : Boolean
{
var needUpdate:Boolean = super.endHighlightBitmapCapture(); // Clear the rect we drew in beginBitmapCapture();
graphics.clear();
return needUpdate;
}
]]>
</fx:Script>
<s:VScrollBar id="verticalScrollBar" visible="false" skinClass="skins.VScrollerSkin"/>
<s:HScrollBar id="horizontalScrollBar" visible="false" skinClass="skins.HScrollBarSkin"/>
</s:SparkSkin>

2.VScrollerSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="15" minHeight="15"
alpha.disabled="0.5" alpha.inactive="0.5" >
<fx:Script>
<![CDATA[ import skins.ScrollerBarTrackSkin;
import skins.ScrollerThumbSkin;
]]>
</fx:Script>
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.VScrollBar")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="inactive" />
</s:states>
<s:Button id="track" top="1" bottom="1" width="10"
focusEnabled="false" tabEnabled="false"
skinClass="skins.ScrollerBarTrackSkin" />
<s:Button id="thumb"
skinClass="skins.ScrollerThumbSkin" mouseEnabled="false"
focusEnabled="false" visible.inactive="false" tabEnabled="false"/>
</s:SparkSkin>

3.HScrollBarSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="35" minHeight="15"
alpha.disabled="0.5" alpha.inactive="0.5">
<fx:Script>
<![CDATA[ import skins.ScrollerBarTrackSkin;
import skins.ScrollerThumbSkin;
]]>
</fx:Script>
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.HScrollBar")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="inactive" />
</s:states>
<s:Button id="track" left="1" right="1" width="10"
focusEnabled="false" tabEnabled="false"
skinClass="skins.ScrollerBarTrackSkin" />
<s:Button id="thumb"
focusEnabled="false" visible.inactive="false" tabEnabled="false" mouseEnabled="false"
skinClass="skins.ScrollerThumbSkin" /> </s:SparkSkin>

4.ScrollerBarTrackSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="10" minHeight="10"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect top="0" bottom="0" left="0" right="0" minWidth="10" minHeight="10">
</s:Rect>
</s:SparkButtonSkin>

5.ScrollerThumbSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="10" minHeight="10"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect top="1" left="1" right="1" bottom="1" radiusX="5" radiusY="5">
<s:fill>
<s:SolidColor color="0xC0C0C0" alpha="0.8"/>
</s:fill>
</s:Rect>
</s:SparkButtonSkin>