使用 Flex 和 Dojo 开发交互式Web应用程序
2010-03-03 00:00:00 来源:WEB开发网这样,整个图片处理应用程序的用户界面就构建完成了,如下图所示:
图 4. 图片处理程序用户界面
加入操作支持事件响应
在实际应用系统中,人机交互是必不可少且非常重要的一部分,如何对用户触发的事件进行有效的响应是 Flex 应该解决的重点问题之一,下面将通过一个具体功能的实现来介绍三种常见的交互模式,鼠标事件响应、键盘事件响应和控件触发事件的响应。
图片缩放功能是本图片处理应用程序的主要功能,它主要提供了三种交互模式完成图片局部放大缩小的功能,包括支持鼠标左右键单击放大缩小,支持键盘快捷键放大缩小以及点击 Flex 控件完成放大缩小。
首先来看一下在 Flex 中实现放大缩小的功能,封装在 ImageZoom.mxml 文件中,代码如下:
清单 3. Flex 中实现图片缩放功能
1 public function zoom( factor : Number, isButton : Boolean ) : void
2 {
3 if(!isAnimating ){
4 isAnimating = true;
5 if(zoomEffect.isPlaying ){
6 zoomEffect.end();
7 }
8 if(factor <= 5 && factor >= -5){
9 if((isButton && zoomEffect.originX.toString() == 'NaN'
&&zoomEffect.originY.toString() == 'NaN')|| flag == true &&
isButton){
10 zoomEffect.originX = image.contentWidth/2;
11 zoomEffect.originY = image.contentHeight/2;
12 }
13 flag = false;
14 scale_temp = factor;
15 if(scaleSize[factor+5] > 1){
16 zoomEffect.zoomHeightTo = Math.max(temp + scaleSize[factor+5], minScale);
17 zoomEffect.zoomWidthTo = Math.max(temp + scaleSize[factor+5], minScale);
18 }else if(scaleSize[factor+5] < 1){
19 zoomEffect.zoomHeightTo=Math.max(temp - temp*(1-scaleSize[factor+5]), minScale);
20 zoomEffect.zoomWidthTo=Math.max(temp - temp*(1-scaleSize[factor+5]), minScale);
21 }else{
22 zoomEffect.zoomHeightTo = Math.max(temp, minScale);
23 zoomEffect.zoomWidthTo = Math.max(temp, minScale);
24 }
25 }
26 zoomEffect.play();
27 this.dispatchEvent(new Event(EVENT_SCALE_UPDATED));
28 }
29 }
更多精彩
赞助商链接