先来看演示:
当用户改变滑动条的值时,容器的宽度随着动态变化。
来看源代码:
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
- <mx:Script>
- <![CDATA[
- [Bindable]
- private var scale:Number = 1;
- private function doResize(n:Number):Number{
- zoom.zoomWidthTo = n;
- zoom.play();
- return box.scaleX;
- }
- ]]>
- </mx:Script>
- <mx:Zoom id="zoom" originX="0" originY="0" target="{box}" />
- <mx:Canvas id="box" x="10" y="52" scaleX="{doResize(scale)}" backgroundColor="#ffffff" width="200" height="200" >
- </mx:Canvas>
- <mx:HSlider id="slider" x="26" y="26" change="scale = slider.value" minimum="0" maximum="1" />
- </mx:Application>
关键知识点说明
- flex强大的数据绑定技术,想在组件中绑定as变量,请在此变量前加上[Bindable]元标签
- Zoom动画的使用,Zoom为放缩效果,注意与Resize效果类似,但实际上是有很大区别的。Zoom缩放的是比例,而Resize改变大小。
- 在使用函数绑定的时候,函数里面务必要有返回值

