Flex实现web版图片查看器
项目需求：
在web端实现图片浏览，具有放大、缩小、滚轴放大缩小、移动、旋转以及范围控制。
成果图：
核心代码：
1、放大：此处放大是点击按钮，按1.5倍高宽进行放大。
img.width = img.width *1.5;
img.height = img.height *1.5;
2、缩小：此处缩小是点击按钮，按0.5倍高宽进行缩小。
img.width = img.width *0.5;
img.height = img.height *0.5;
3、旋转：此处旋转是按顺时针旋转90度。
img.rotation = img.rotation - 90;
4、滚轴放大缩小：
--先添加滚轴监听
systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel);
--判断当滚轴向前或向后移动时，作出相应反应
private function doMouseWheel(evt:MouseEvent):void
{
//滚轴向前，放大图片
if(evt.delta > 0)
{
img.width = img.width *1.5;
img.height = img.height *1.5;
}
else
{
img.width = img.width * 0.5;
img.height = img.height * 0.5;
}
}
5、移动：图片查看最难的在于移动时的范围控制（不让图片超过图片查看窗口）
--首先添加鼠标按下、弹起的监听事件
private function pan():void
{
img.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDowns);
img.addEventListener(MouseEvent.MOUSE_UP,onMouseUps);
}
--鼠标按下、弹起响应事件（并设定范围）
private function onMouseDowns(evt:MouseEvent):void
{
//拖拽事件，在600*400的矩形范围内拖拽
evt.currentTarget.startDrag(false,new Rectangle(0,0,600-img.width,400-img.height));
evt.currentTarget.addEventListener(MouseEvent.MOUSE_UP,onMouseUps);
}
private function onMouseUps(evt:MouseEvent):void
{
evt.currentTarget.stopDrag();
evt.currentTarget.removeEventListener(MouseEvent.MOUSE_UP,onMouseUps);
}
--在施行这样的方法时，会出现一个bug，即鼠标按下拖拽的时候，当鼠标超出窗体时（可能是失去焦点了），即使鼠标弹起也不会触发MouseUp事件
--所以，添加一个监听，超出窗体则不执行拖拽了
protected function bdImg_mouseOutHandler(event:MouseEvent):void
{
this.stopDrag();
}
PS：需要在装image的容器外添加上Scroller ，目的是切割图片，防止图片显示超过容器部分。
<s:Scroller id="sc">
<s:Group id="gp" height="100%" width="100%">
<s:Image id="img"
horizontalCenter="0"
verticalCenter="0"/>
</s:Group>
</s:Scroller>
最新文章
- 自己手写的自动完成js类
- iOS 应用中有页面加载gif动画，从后台进入前台时就消失了
- [NOIP2010] 提高组 洛谷P1540 机器翻译
- itertools模块速查
- HDFS文件系统的操作
- HRBUST 1987 逃课的孩子
- CSS display属性的值及作用
- org.apache.commons.lang3 的随机数生成
- Visual Studio 实用技能
- Ocelot中文文档-日志
- Unity认证
- Pycharm工具导入requests包（python新手）
- Java学习-049-正则工具类
- CentOS7.4安装和配置zabbix4.0
- 【ReactNative】Mac下分分钟打包 Android apk
- kumavis/obj-multiplex
- 《Linux内核分析》第八周笔记 进程的切换和系统的一般执行过程
- ubuntu 18.04 使用 nvm 安装 nodejs
- 1.C和C++的区别
- 【ContextLoaderListener】Web项目启动报错java.lang.ClassNotFoundException: ContextLoaderListener