flex 实现图片放大缩小恢复组件

最新推荐文章于 2021-05-25 20:53:41 发布

siejls

最新推荐文章于 2021-05-25 20:53:41 发布

阅读量1.8k

点赞数

分类专栏： flex 学习文章标签：学习 java flex 图片

本文链接：https://blog.youkuaiyun.com/siejls/article/details/42706843

版权

学习同时被 2 个专栏收录

10 篇文章

订阅专栏

flex

8 篇文章

订阅专栏

本文介绍了如何在Flex中创建一个图片放大缩小恢复组件。通过引入自定义组件并指定缩放对象，实现了按钮控制的图片缩放功能。组件源码包括了放大、缩小和恢复原始大小的方法，使用Zoom类进行平滑缩放操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用方法

a. 在页面引用自定义组件的包 xmlns:myzoom="zoomPackage.*"

b.在页面添加自定义组件，并指定要缩放的对象

<s:Button id="test" label="点击"/>
<myzoom:ZoomPackage zoomTarget="{test}"/>

2.组件源码

/FlexAppToJava/flex_src/zoomPackage/ZoomPackage.mxml

    <?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

<s:layout>

<s:BasicLayout/>

</s:layout>




<fx:Script>

<![CDATA[

[Bindable]private var sfLevel:Number=0;//缩放增量

[Bindable]private var curLevel:Number=1;//当前缩放级别

[Bindable]public var zoomTarget:Object;//当前缩放对象


//------------页面调用方法--------------


protected function enlarge_clickHandler(event:MouseEvent):void

{

sfLevel=0.1;

doZoom();

}


protected function narrow_clickHandler(event:MouseEvent):void

{

sfLevel=-0.1;

doZoom();

}

protected function recovery_clickHandler(event:MouseEvent):void

{

reSetZoom();

}


//-----------内部调用方法---------


//放大缩小

public function doZoom():void {

if(zoomTarget!=null){

zoom.stop();

zoom.originX =0;//viewIMG.width / 2;

zoom.originY =0;//viewIMG.height / 2;

zoom.zoomWidthFrom = curLevel;

zoom.zoomHeightFrom =curLevel;

curLevel=curLevel+sfLevel;

zoom.zoomWidthTo = curLevel;

zoom.zoomHeightTo =curLevel;

//curLevel=1+sfLevel;

zoom.duration = 1000;

zoom.target = zoomTarget;

zoom.play();

}

}


//恢复

public function reSetZoom():void {

zoom.stop();

zoom.originX = 0;//viewIMG.width / 2;

zoom.originY = 0;//viewIMG.height / 2;

zoom.zoomWidthFrom = curLevel;

zoom.zoomHeightFrom = curLevel;

curLevel=1;

zoom.zoomWidthTo = curLevel;

zoom.zoomHeightTo =curLevel;

zoom.duration = 1000;

zoom.target = zoomTarget;

zoom.play();

}


]]>

</fx:Script>


<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

<mx:Zoom id="zoom"/>

</fx:Declarations>


<s:HGroup>

<s:Button id="enlarge" label="放大" click="enlarge_clickHandler(event)"/>

<s:Button id="narrow" label="缩小" click="narrow_clickHandler(event)"/>

<s:Button id="recovery" label="恢复" click="recovery_clickHandler(event)" />

</s:HGroup>

</s:Group>

3.最终效果