as3我已经为缩放编码，但是我希望缩放跟随鼠标

Question

Here is coding I found that creates a box and zooms in on point of mouseclick. what I need is for the zoom to then follow the mouse. Deperately need help plz. Thanks

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import fl.motion.MatrixTransformer;

const TWEEN_IN:String = "tweenIn";
const TWEEN_OUT:String = "tweenOut";
var tweenDirection:String;

var internalPoint:Point;
var externalPoint:Point;
var tw:Tween;

var square:Sprite = new Sprite();
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0, 0, 100, 100);

square.x = stage.stageWidth/2 - square.width/2;
square.y = stage.stageHeight/2 - square.height/2;

addChild(square);

square.addEventListener(MouseEvent.CLICK, zoomIn);

function zoomIn($e:MouseEvent):void
{
    square.removeEventListener(MouseEvent.CLICK, zoomIn);

    internalPoint = new Point(square.mouseX, square.mouseY);
    externalPoint = new Point(stage.mouseX, stage.mouseY);

    tweenDirection = TWEEN_IN;

    tw = new Tween(null, "", Elastic.easeOut, square.scaleX, 4, 1, true);
    tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}

function _syncScale($e:TweenEvent):void
{
    square.scaleX = square.scaleY = tw.position;

    var matrix:Matrix = square.transform.matrix;

    MatrixTransformer.matchInternalPointWithExternal(matrix, internalPoint, externalPoint);

    square.transform.matrix = matrix;
}

function _cleanTween($e:TweenEvent):void
{
    tw.removeEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.removeEventListener(TweenEvent.MOTION_FINISH, _cleanTween);

    tw = null;

    if(tweenDirection == TWEEN_IN)
        stage.addEventListener(MouseEvent.CLICK, zoomOut);
    else if(tweenDirection == TWEEN_OUT)
        square.addEventListener(MouseEvent.CLICK, zoomIn);
}

function zoomOut($e:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.CLICK, zoomOut);

    externalPoint = square.localToGlobal(internalPoint);
    internalPoint = square.globalToLocal(externalPoint);


    tweenDirection = TWEEN_OUT;

    tw = new Tween(null, "", Strong.easeOut, square.scaleX, 1, 1, true);
    tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}

Answer 1

something like this ?

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import fl.motion.MatrixTransformer;

const TWEEN_IN:String = "tweenIn";
const TWEEN_OUT:String = "tweenOut";
var tweenDirection:String;//variable to keep track of the tween type(zoom in/zoom out)

var internalPoint:Point;
var externalPoint:Point;//two points used for localToGlobal and globalToLocal coordinates conversion
var tw:Tween;

var square:Sprite = new Sprite();//create the square sprite, and draw a red rectangle
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0, 0, 100, 100);
square.graphics.endFill();

square.x = stage.stageWidth/2 - square.width/2;//centre the square
square.y = stage.stageHeight/2 - square.height/2;

addChild(square);//add it to the display list

square.addEventListener(MouseEvent.CLICK, zoomIn);

function zoomIn($e:MouseEvent):void
{
    square.removeEventListener(MouseEvent.CLICK, zoomIn);
    square.removeEventListener(Event.ENTER_FRAME, pan);
    //update the internal/local(mouse position relative to the square) and external/global(mouse position relative to the stage)
    internalPoint = new Point(square.mouseX, square.mouseY);
    externalPoint = new Point(stage.mouseX, stage.mouseY);

    tweenDirection = TWEEN_IN;//keep track of the tween type
    //create a 'dummy' tween and use the 'change' handler to update the square
    tw = new Tween(null, "", Elastic.easeOut, square.scaleX, 4, 1, true);
    tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}

function _syncScale($e:TweenEvent):void
{
    //update the scale
    square.scaleX = square.scaleY = tw.position;
    //get a reference to the square's transformation matrix
    var matrix:Matrix = square.transform.matrix;
    //use the MatrixTransformer utility to 'automagically' adjust translation with the scale
    MatrixTransformer.matchInternalPointWithExternal(matrix, internalPoint, externalPoint);
    //apply the updated transform matrix to the square
    square.transform.matrix = matrix;
}

function _cleanTween($e:TweenEvent):void
{
    //tween is complete, cleanul
    tw.removeEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.removeEventListener(TweenEvent.MOTION_FINISH, _cleanTween);

    tw = null;

    if(tweenDirection == TWEEN_IN){
        stage.addEventListener(MouseEvent.CLICK, zoomOut);
        square.addEventListener(Event.ENTER_FRAME, pan);
    }else if(tweenDirection == TWEEN_OUT){
        square.addEventListener(MouseEvent.CLICK, zoomIn);
    }
}

function zoomOut($e:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.CLICK, zoomOut);
    square.removeEventListener(Event.ENTER_FRAME, pan);

    externalPoint = square.localToGlobal(internalPoint);
    internalPoint = square.globalToLocal(externalPoint);

    tweenDirection = TWEEN_OUT;

    tw = new Tween(null, "", Strong.easeOut, square.scaleX, 1, 1, true);
    tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}
function pan($e:Event):void {
    //move about the centre of the stage, should keep the scale in mind for 'bounds'
    square.x = stage.stageWidth/2-mouseX;
    square.y = stage.stageHeight/2-mouseY;
}