您的位置:首页 > 其它

flex实现图片根据鼠标的滚动放大或缩小(以鼠标的的位置 为中心放大缩小)

2015-05-06 10:30 676 查看
第一步:

var imageCanvas:ImageView = new ImageView();//创建ImageView对象

imageCanvas.img.source="tuzhi/1.jpg";//指定要显示的图片路径

第二步:ImageView.mxml文件--->此类是主要方法

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" initialize="app(event)" width="600" height="500" backgroundAlpha="1" backgroundColor="#FFFFFF" borderStyle="solid" cornerRadius="0" borderColor="#8D8D8D" borderThickness="1" horizontalScrollPolicy="off"
verticalScrollPolicy="off" xmlns:util="actionscript.util.*">

<mx:Script>

<![CDATA[

import actionscript.util.RepeatBackground;

import mx.controls.Alert;

import mx.effects.Zoom;

import mx.events.FlexEvent;

import mx.events.MoveEvent;

private var rotateDeg:Number=0;

private var oldX:Number,oldY:Number;

public var titleText:String;

public var mouseWheelFlag:Boolean = true;

protected function app(event:FlexEvent):void

{

this.toptitle.setStyle("borderSkin",RepeatBackground);

title.text = titleText;

if(this.mouseWheelFlag){

img.addEventListener(MouseEvent.MOUSE_DOWN, imgMouseDown); //鼠标按下事件

img.addEventListener(MouseEvent.MOUSE_WHEEL, imgZoom);//鼠标滚动事件

img.addEventListener(MouseEvent.MOUSE_MOVE,imgMouseMove); //鼠标移动事件

}

//picCanvas.height = this.height - 26;

closeBtn.x = this.width - 24;

resizeBtn.x = this.closeBtn.x - 18;

img.width = this.width;

img.height = this.height;

img.x=(this.width-img.width)/2;

img.y=(this.height-img.height)/2;

//this.x = 0;

//this.y = 0;

}

public function fullHander(evn:FullScreenEvent):void

{

if(evn.fullScreen)

{

this.width=stage.width;

this.height=stage.height;

this.x=(Capabilities.screenResolutionX-this.width)/2;

this.y=(Capabilities.screenResolutionY-this.height)/2;

}else{

this.width = 600;

this.height = 500;

this.x=(Capabilities.screenResolutionX-this.width)/2;

this.y=(Capabilities.screenResolutionY-this.height)/2;

}

img.width = this.width;

img.height = this.height - 26;

this.closeBtn.x = this.width - 21;

this.resizeBtn.x = this.closeBtn.x - 18;

}

private function resizeImage(evt:MouseEvent):void{

stage.addEventListener(FullScreenEvent.FULL_SCREEN,fullHander);

stage.displayState =(stage.displayState==StageDisplayState.FULL_SCREEN?StageDisplayState.NORMAL:StageDisplayState.FULL_SCREEN);

}

private function hiddenImage():void

{

this.visible = false;

resetImage();

}

//鼠标双击放大

private function imgMouseDouble(evt:MouseEvent):void{

var p:Point =img.globalToLocal(new Point(evt.stageX,evt.stageY));//指定以鼠标的所在位置 为中心 放大

var tempMatrix:Matrix = img.transform.matrix;

tempMatrix.translate(-p.x,-p.y);//1,限制放大的上边框

tempMatrix.scale(1.1, 1.1); //放大

tempMatrix.translate(p.x,p.y);//1,限制放大的下边框

img.transform.matrix = tempMatrix;

}

//鼠标移动

private function imgMouseMove(event:MouseEvent):void

{

if(event.buttonDown){

var x:Number = event.stageX - oldX;

var y:Number = event.stageY - oldY;

oldX = event.stageX;

oldY = event.stageY;

img.move(img.x + x,img.y + y);

}

}

//鼠标按下

private function imgMouseDown(evt:MouseEvent):void

{

oldX = evt.stageX;

oldY = evt.stageY;

//var mc:MovieClip=evt.currentTarget as MovieClip;

//var point:Point = new Point(mc.mouseX,mc.mouseY);

//scaleAtPoint(mc,point,mc.scaleX+1);

}

//恢复原状

private function resetImage():void {

var tempMatrix:Matrix = img.transform.matrix;

tempMatrix.identity();

img.transform.matrix = tempMatrix;

rotateDeg = img.rotation;

}

//鼠标滚动缩放

private function imgZoom(evt:MouseEvent):void

{

var p:Point =img.globalToLocal(new Point(evt.stageX,evt.stageY));//指定以鼠标的所在位置 为中心 放大

var tempMatrix:Matrix = img.transform.matrix;

tempMatrix.translate(-p.x,-p.y);//1,限制放大缩小的上边框

if (evt.delta < 0)

{

tempMatrix.scale(0.9, 0.9); //向下滚动缩小

}

else

{

tempMatrix.scale(1.1, 1.1); //向上滚动放大

}

tempMatrix.translate(p.x,p.y);//1,限制放大缩小的下边框

img.transform.matrix = tempMatrix;

rotateDeg = img.rotation;

}

private function onMouseEventHandler(evt:MouseEvent):void

{

switch (evt.type)

{

case "mouseDown" :

this.startDrag();

break;

case "mouseUp" :

this.stopDrag();

break;

case "mouseOver" :

closeBtn.source="image/closeIcon_1.gif";//图片路径可以自定义

break;

case "mouseOut" :

closeBtn.source="image/closeIcon.png"; //图片路径可以自定义

break;

default:

break;

}

}

]]>

</mx:Script>

<mx:Canvas id="toptitle" x="0" y="0" width="100%" height="25" backgroundImage="@Embed(source='image/background.png')" borderColor="#868686" borderStyle="solid" mouseDown="onMouseEventHandler(event);" mouseUp="onMouseEventHandler(event);">

<mx:Label x="8" y="1" text="查看图片" fontSize="12" color="#FBFBFB" id="title"/>

<mx:Image id="resizeBtn" x="561" y="4" width="16" height="16" source="image/maxIcon.png" themeColor="#A14813" click="resizeImage(event)"/>

<mx:Image id="closeBtn" x="579" y="4" width="16" height="16" source="image/closeIcon.png" themeColor="#A14813" click="hiddenImage();" mouseOver="onMouseEventHandler(event)" mouseOut="onMouseEventHandler(event)"/>

</mx:Canvas>

<mx:Canvas x="0" y="26" backgroundAlpha="0" id="picCanvas" width="100%" height="95%" verticalScrollPolicy="off" horizontalScrollPolicy="off">

<util:ByteArrayImage id="img" x="0" y="0">

</util:ByteArrayImage>

</mx:Canvas>

</mx:Canvas>

第三部:ByteArrayImage.as文件---->此类用于加载二进制文件

package actionscript.util{//包名 可以自己定义

import flash.display.Loader;

import flash.events.Event;

import flash.system.LoaderContext;

import flash.utils.ByteArray;

import mx.controls.Image;

import mx.controls.Alert;

/**

* 用来加载二进制数据的图片类

* */

public class ByteArrayImage extends mx.controls.Image

{

private var _loader:Loader = new Loader();

private var _bonthebl:Boolean=true;//是否按照比例缩放全图显示。

private var _bFillUp:Boolean = false; //是/否平铺

public function Image():void {}

override protected function createChildren():void

{

addChild(_loader);

}

public function loadBytes(bytes:ByteArray,context:LoaderContext=null):void

{

_loader.loadBytes(bytes, context);

_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBytesLoaded);

}

public function get bFillUp():Boolean{

return _bFillUp;

}

public function set bFillUp(value:Boolean):void{

this._bFillUp = value;

}

public function get bonthebl():Boolean{

return _bonthebl;

}

public function set bonthebl(value:Boolean):void{

this._bonthebl = value;

}

private function onBytesLoaded(e:Event):void

{

this.width = 800;

this.height = 600;

if(_bonthebl){

var ih:int=e.currentTarget.height;

var iw:int=e.currentTarget.width;

var blh:Number=this.height/ih;

var blw:Number=this.width/iw;

if(blh>1&&blw>1){

_loader.width=e.currentTarget.width;

_loader.height=e.currentTarget.height;

}

else if(blh>1||blw>1){

if(blh<1){

_loader.width = Math.round(iw*blh);

_loader.height = this.height;

}else{

_loader.width = this.width;

_loader.height = Math.round(ih*blw);

}

}else{

if(blh>blw){

_loader.width = Math.round(iw*blw);

_loader.height = Math.round(ih*blw);

}

else{

_loader.width = Math.round(iw*blh);

_loader.height = Math.round(ih*blh);

}

}

this.width=_loader.width;

this.height=_loader.height;

}

if(_bFillUp)

{

_loader.width = this.width;

_loader.height = this.height;

}

}

}

}

-------------------------------------------------------------------------------------------------------------------

源码地址:http://download.csdn.net/detail/xuhong964388535/8666891

注意:鼠标中心点的精确度 不太准确,可以自己按需求 自行调节
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: