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<minScaleLength|| _totalScaleRatio*scaleRatio*_image.height<minScaleLength)return;//獲取圖片變換矩陣var matrix:Matrix = this._image.transform.matrix;//把圖片參照系上的鼠標點轉換為父容器屏幕參照系坐標var mousePoint:Point = matrix.transformPoint(new Point(this._image.contentMouseX,this._image.contentMouseY)); //計算圖片放縮后光標所在點位置的偏移量，用于放縮后把平移圖片，使得放縮后光標所在點位置不變var dx:Number=(mousePoint.x-matrix.tx)*(1-scaleRatio)+matrix.tx;var dy:Number=(mousePoint.y-matrix.ty)*(1-scaleRatio)+matrix.ty;//放縮圖片 matrix.scale(scaleRatio,scaleRatio);//重置圖片平移量matrix.tx=dx;matrix.ty=dy;//應用變換矩陣this._image.transform.matrix = matrix;_totalScaleRatio*=scaleRatio;}/*** 圖片旋轉，先平移圖片使圖片中心點與參照系原點重疊，然后旋轉圖片，最后把圖片平移回原位* @angle 旋轉角度，正數順時針，負數逆時針* */public function roll(degree:Number = 90):void{var angle:Number = degree * (Math.PI / 180);var matrix:Matrix = this._image.transform.matrix;var centerPoint:Point = matrix.transformPoint(new Point(this._image.width/2, this._image.height/2));matrix.translate(-centerPoint.x, -centerPoint.y);matrix.rotate(angle);matrix.translate(centerPoint.x, centerPoint.y);this._image.transform.matrix = matrix;}/*** 圖片居中復位* 其中tx和ty的偏移量中額外添加了一個像素的負偏移量，用于強制圖片在初始化狀態的時候被Canvas容器壓蓋* 否則圖片將浮與Canvas上面，而無法被Canvas邊框裁剪，（似乎是Flex的Bug）* */public function reset():void{var wScale:Number = this.width/this._image.width;var hScale:Number = this.height/this._image.height;var scale:Number = wScale<hScale?wScale:hScale;var offsetX:Number = (this.width-this._image.width*scale)/2-1;var offsetY:Number = (this.height-this._image.height*scale)/2-1;var matrix:Matrix = new Matrix(scale,0,0,scale,offsetX,offsetY);this._image.transform.matrix=matrix; _totalScaleRatio = scale;}}

?

轉載于:https://www.cnblogs.com/ArtofDesign/p/5132978.html

總結

以上是生活随笔為你收集整理的Flex3.0 图片浏览器（平移、光标中心点放缩、任意角度旋转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。