利用滑杆实现对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缩放效果