利用滑杆实现对Flex可视化组件的缩放

一、利用滑杆实现对Flex可视化组件的缩放主要涉及到两方面

第一：滑杆的change事件，及value等属性

第二：可视化组件的属性(scaleX,scaleY)，scale本义为可伸缩的意思，这里0<=scaleX,scaleY<=1,是浮点数，自然scaleX是水平方向的缩放，scaleY是垂直方向的缩放。

二、下面介绍一下FLEX中的滑杆：

Flex提供了水平和垂直两种滑动杆，基本使用方法如下：

01 : mx:HSlider 创建水平滑动杆

02 : mx:VSlider 创建垂直滑动杆

03 : 设置滑动范围：minimum和 maximum属性

04 : 设置滑杆的初始值：value属性

05 : 设置最小滑动间隔为可以设置snapInterval属性（如snapInterval='2'）

06 : 创建滑杆的标签可以用labels数组（Flex会均分显示标签位置）

07 : 默认创建的滑动杆都有ToolTip，需要禁止可使用：showToolTip='false'

08 : 如果需要每隔一段距离显示标记，可以设置tickInterval属性（如tickInterval='25'）

09 : 可以同时使用两个箭头标记：thumbCount（1或2，默认值为1, thumbCount为2时可以动态设置最大值）

10 : 使用双箭头的时候设置初始值需要用values数组（如values='[ 20 , 80 ]'）

11 : 可以利用键盘的左右（或上下）方向键来移动滑杆

12 : HOME键和END键（或PageDown和PageUp键）分别定位到最小值和最大值

13：默认，只有当释放滑杆的时候，change事件才会响应。如果设置liveDragging属性为True的话，就可以做到拖动滑杆的时候就可以响应change事件了。

三、举例，利用滑杆实现对画布的缩放，完整代码如下：


<?xml version="1.0" encoding="utf-8"?>

<!-- 测试对组件的缩放 这里举画面为例-->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" backgroundGradientAlphas="[1.0, 1.0]"

backgroundGradientColors="[#03BF7A, #075F96]">

<mx:Canvas x="442" y="76" width="400" height="600" backgroundColor="#cc9933">

<mx:Canvas width="300" height="400" id="subCv" backgroundColor="#FFFFFF"/>

</mx:Canvas>

<mx:HSlider x="442" y="700" width="200" toolTip="显示比例" value="100" top="0"

id="hSld" minimum="10" maximum="200" snapInterval="1" change="doChange(event);" liveDragging="true"

thumbCount="2"

/>

<mx:Script>

<![CDATA[

import mx.events.SliderEvent;

private function doChange(evt:SliderEvent):void {

trace(subCv.scaleX);

trace(subCv.scaleY);

subCv.scaleX = hSld.value/100;

subCv.scaleY = hSld.value/100;

}

]]>

</mx:Script>

</mx:Application>

四、参考资料:


1. URL: http://ningningzc.blogbus.com/logs/36643108.html, 介绍Flex的HSlider,VSlider

2. URL: http://bluewens.blog.163.com/blog/static/69913072008519115621817/, Flex制作Zoom缩放效果