博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Flex3.0 图片浏览器(平移、光标中心点放缩、任意角度旋转)
阅读量:5292 次
发布时间:2019-06-14

本文共 4294 字,大约阅读时间需要 14 分钟。

import flash.events.Event;    import flash.events.MouseEvent;    import flash.geom.Matrix;    import flash.geom.Point;        import mx.containers.Canvas;    import mx.controls.Image;    import mx.events.ResizeEvent;        /**     * 图片浏览器     * 利用仿射变矩阵实现图片的平移、放缩和旋转     * 其中放缩和平移已经集成在滚轮事件中,放缩调用zoom方法,旋转调用roll方法,居中复位调用reset方法     * @author lijy 20160114     * */    public class ImageViewer extends Canvas    {        //图片对象        private var _image:Image = null;        //鼠标按下时记录的位置信息,用于平移时计算平移量        private var _mouseDownPoint:Point = null;        //记录总放缩比        private var _totalScaleRatio:Number = 1;                /**         * 最大放缩比,最大放缩量由放缩比确定         * */        public var maxScaleRatio:Number = 5;                /**         * 最小放缩边长,最小放缩量由最小边长确定         * */        public var minScaleLength:Number = 50;                /**         * 加载图像或 SWF 文件         * */        public function load(url:Object=null):void{            this._image.load(url);        }                /**         * 获取作为内容加载的 URL、对象、类或类的字符串名称         * */        public function get source():Object{            return this._image.source;        }                /**         * 设置作为内容加载的 URL、对象、类或类的字符串名称         * */        public function set source(value:Object):void{            this._image.source=value;        }                /**         * 构造函数初始化图片对象         * */        public function DistImageViewer(){            this._image = new Image();        }                /**         * 添加Image到Canvas中,并添加鼠标事件监听         * */        override protected function createChildren():void{            this.addChild(this._image);            this._image.addEventListener(MouseEvent.MOUSE_DOWN,imgMouseDown);            this._image.addEventListener(MouseEvent.MOUSE_MOVE,imgMouseMove);            this._image.addEventListener(MouseEvent.MOUSE_WHEEL,imgMouseWheel);            this._image.addEventListener(ResizeEvent.RESIZE,imgSizeChanged);            this._image.addEventListener(Event.COMPLETE,imgLoadComplete);            super.createChildren();        }                /**         * 设置滚轮策略,但是貌似不起作用,需要在调用处重新设置         * */        override protected function updateDisplayList(w:Number, h:Number):void{            this.setStyle('verticalScrollPolicy','off');            this.setStyle('horizontalScrollPolicy','off');            super.updateDisplayList(w,h);        }                        /**         * 鼠标滚轮事件处理用于放缩图片         * 图片默认的放缩是以左上角为中心点的,要实现以光标位置为中心放缩,需要在放缩后平移图片以保持光标点位置不变         * */        private function imgMouseWheel(e:MouseEvent):void{            //本次放缩比            var scaleRatio:Number = e.delta>0?1.1:0.9;            this.zoom(scaleRatio);            e.stopPropagation();        }                /**         * 鼠标点击时,记录点击位置信息,用于在平移时计算平移量         * */        private function imgMouseDown(e:MouseEvent):void{            var matrix:Matrix = this._image.transform.matrix;            var x:Number = matrix.tx-this.contentMouseX;            var y:Number = matrix.ty-this.contentMouseY;            _mouseDownPoint = new Point(x,y);        }                /**         * 鼠标移动,使用鼠标按下时记录的位置信息平移图片         * */        private function imgMouseMove(e:MouseEvent):void{            if(e.buttonDown && _mouseDownPoint!=null){                            var matrix:Matrix = this._image.transform.matrix;                                    matrix.tx = _mouseDownPoint.x+this.contentMouseX;                matrix.ty = _mouseDownPoint.y+this.contentMouseY;                this._image.transform.matrix = matrix;            }        }                /**         * 重新加载新的图片后会引起尺寸改变,此事件用于重新加载图片后居中图片         * 对于尺寸一样的两个图片,参见imgLoadComplete         * */        private function imgSizeChanged(e:Event):void{            this.reset();        }                /**         * 图片加载完成时会触发该事件,但如果此时获取图片的尺寸仍然会得到上一个图片的尺寸         * 因此在该事件仅能用于居中前后两个尺寸一样的图片,对于尺寸不一样的两个图片,参见imgSizeChanged         * */        private function imgLoadComplete(e:Event):void{            this.reset();        }                /**         * 图片放缩         * @scaleRatio 图片放缩比,通常放大用1.1,缩小用0.9         * */        public function zoom(scaleRatio:Number):void{            //如果超出放缩比则直接返回            if(_totalScaleRatio*scaleRatio>maxScaleRatio                 || _totalScaleRatio*scaleRatio*_image.width

 

转载于:https://www.cnblogs.com/ArtofDesign/p/5132978.html

你可能感兴趣的文章
控制台程序秒变Windows服务(Topshelf)
查看>>
字节流与字符流的区别详解
查看>>
20141026--娱乐-箱子
查看>>
自定义分页
查看>>
Oracle事务
查看>>
任意输入10个int类型数据,把这10个数据首先按照排序输出,挑出这些数据里面的素数...
查看>>
String类中的equals方法总结(转载)
查看>>
图片问题
查看>>
bash使用规则
查看>>
AVL数
查看>>
第二章练习
查看>>
ajax2.0
查看>>
C#时间截
查看>>
C语言程序设计II—第九周教学
查看>>
C# 获取系统时间及时间格式转换
查看>>
WCF、WebAPI、WCFREST、WebService之间的区别
查看>>
2018-2019-2-20175332-实验四《Android程序设计》实验报告
查看>>
全栈12期的崛起之捡点儿有用的说说
查看>>
基础类型
查看>>
属性动画
查看>>