我想有一个蒙面的鼠标并用点击和双击鼠标事件摇摄的图像缩放。我得到的图像进行放大，但它总是放大左侧边缘报名点，而不是在我点击。我完全不知道如何$ C C此$，并已呆了一整天的互联网试图弄明白，没有运气上。我希望有人能帮助我摸不着头脑！

 进口com.greensock *; // Greensock补间平台。

//变量
VAR percX：数字;
VAR珀西：数字;
VAR destX：数字;
VAR destY：数字;

//图像平移和蒙面
this.mask = mask_mc;
stage.addEventListener（的MouseEvent.MOUSE_MOVE，鼠标移动）;
功能鼠标移动（E：的MouseEvent）{
    如果（mask_mc.hitTestPoint（stage.mouseX，stage.mouseY，FALSE））{
        如果（imgLoader.width＆GT; mask_mc.width）{//避免了滚动，如果图像是在屏蔽区域的宽度
            percX = mask_mc.mouseX / mask_mc.width;
        }
        如果（imgLoader.height＆GT; mask_mc.height）{//避免了滚动，如果图像是在屏蔽区域的高度
            珀西= mask_mc.mouseY / mask_mc.height;
        }
        destX =  - （imgLoader.width-mask_mc.width）* percX;
        destY =  - （imgLoader.height-mask_mc.height）*珀西;
        TweenMax.to（imgLoader，5，{X：destX，Y：destY}）;
    }
}
//添加侦听器的imgLoader影片剪辑。
imgLoader.doubleClickEnabled = TRUE;
imgLoader.addEventListener（MouseEvent.CLICK，INCREASESIZE）;
imgLoader.addEventListener（MouseEvent.DOUBLE_CLICK，decreaseSize）;

//这个函数增加了图像的比例
功能INCREASESIZE（事件：MouseEvent）方法：无效{
TweenLite.to（imgLoader，1，{的scaleX：2，的scaleY：2}）;
}

//这个功能减少了图像的比例
功能decreaseSize（事件：MouseEvent）方法：无效{
TweenLite.to（imgLoader，1，{的scaleX：1，的scaleY：1}）;
}
 

解决方案

这个答案是从的这里

添加此功能：

 函数scaleAroundMouse（objectToScale：的DisplayObject，scaleAmount：数量，范围：矩形= NULL，的onComplete：功能= NULL）{TweenLite的
    //比例会相对完成
    VAR relScaleX：数= scaleAmount / objectToScale.scaleX;
    VAR relScaleY：数= scaleAmount / objectToScale.scaleY;
    //地图矢量父范围内的中心点

    VAR scalePoint：点= objectToScale.localToGlobal（新点（objectToScale.mouseX，objectToScale.mouseY））;
    scalePoint = objectToScale.parent.globalToLocal（scalePoint）;
    //目前注册现在的位置是AB
    变种AB：点=新的点（objectToScale.x，objectToScale.y）;
    // CB = AB  -  scalePoint，objectToScale矢量，将缩放，因为它从中心运行
    变种CB：点= AB.subtract（scalePoint）;
    CB.x * = relScaleX;
    CB.y * = relScaleY;
    // recaulate AB，objectToScale将是剪辑的调整后的位置
    AB = scalePoint.add（CB）;
    //设置实际属性

    如果（边界）{
     VAR限制：矩形=新的Rectangle（
        bounds.x +（bounds.width  - （objectToScale.width * relScaleX）），
        bounds.y +（bounds.height  - （objectToScale.height * relScaleY）），
        （objectToScale.width * relScaleX） -  bounds.width，
        （objectToScale.height * relScaleY） -  bounds.height
     ）;

     如果（AB.x＆LT; limits.x）AB.x = limits.x;
     如果（AB.x＆GT; limits.x + limits.width）AB.x = limits.x + limits.width;
     如果（AB.y＆LT; limits.y）AB.y = limits.y;
     如果（AB.y＆GT; limits.y + limits.height）AB.y = limits.y + limits.height;
    }

    返回TweenLite.to（objectToScale，1，{的onComplete：的onComplete，将scaleX：scaleAmount，的scaleY：scaleAmount，X：AB.x，Y：AB.y）;
}
 

然后更新您的大小的功能，以这样的：

 函数INCREASESIZE（事件：MouseEvent）方法：无效{
    stopMouseMove（）;
    scaleAroundMouse（imgLoader，2，空，resumeMouseMove）;
}

功能decreaseSize（事件：MouseEvent）方法：无效{
    stopMouseMove（）;
    scaleAroundMouse（imgLoader，1，空，resumeMouseMove）;
}

功能stopMouseMove（）：无效{
   stage.removeEventListener（的MouseEvent.MOUSE_MOVE，鼠标移动）;
}

功能resumeMouseMove（）：无效{
   stage.addEventListener（的MouseEvent.MOUSE_MOVE，鼠标移动）;
}
 

我还添加了一个边界参数的功能。如果你永远不希望你的边缘内容是面膜中可见这是非常有用的。所以，如果你能传递你的面具的边界的功能使用它：

  scaleAroundMouse（imgLoader，1，myMask.getBounds（本））;
 

I am trying to have a masked mouse panned image zoom in and out with a click and a double click mouse event. I got the image to zoom but it always zooms in on the left edge registration point, not where I click. I have absolutely no idea how to code this and have spent the whole day on the internet trying to figure it out with no luck. I am hoping someone can help me to figure this out!

import com.greensock.*;//Greensock Tweening Platform.

//Variables
var percX:Number;
var percY:Number;
var destX:Number;
var destY:Number;

//Image panned and masked
this.mask = mask_mc;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mousemove);
function mousemove(e:MouseEvent) {
    if (mask_mc.hitTestPoint(stage.mouseX,stage.mouseY,false)) {
        if (imgLoader.width>mask_mc.width) {//Avoids Scrolling if image is under mask area width
            percX = mask_mc.mouseX/mask_mc.width;
        }
        if (imgLoader.height>mask_mc.height) {//Avoids Scrolling if image is under mask area height
            percY = mask_mc.mouseY/mask_mc.height;
        }
        destX = -(imgLoader.width-mask_mc.width)*percX;
        destY = -(imgLoader.height-mask_mc.height)*percY;
        TweenMax.to(imgLoader,.5,{x:destX,y:destY});
    }
}
//Add listeners for the imgLoader movie clip.
imgLoader.doubleClickEnabled = true;  
imgLoader.addEventListener(MouseEvent.CLICK, increaseSize);
imgLoader.addEventListener(MouseEvent.DOUBLE_CLICK, decreaseSize);

//This function increases the scale of the image
function increaseSize(event:MouseEvent):void{
TweenLite.to(imgLoader, 1, {scaleX:2, scaleY:2});
}

//This function decreases the scale of the image
function decreaseSize(event:MouseEvent):void{
TweenLite.to(imgLoader, 1, {scaleX:1, scaleY:1});
}

This answer is derived from here

Add this function:

function scaleAroundMouse(objectToScale:DisplayObject, scaleAmount:Number, bounds:Rectangle = null, onComplete:Function = null):TweenLite {
    // scaling will be done relatively
    var relScaleX:Number = scaleAmount / objectToScale.scaleX;
    var relScaleY:Number = scaleAmount / objectToScale.scaleY;
    // map vector to centre point within parent scope

    var scalePoint:Point = objectToScale.localToGlobal( new Point(objectToScale.mouseX, objectToScale.mouseY));
    scalePoint = objectToScale.parent.globalToLocal( scalePoint );
    // current registered postion AB
    var AB:Point = new Point( objectToScale.x, objectToScale.y );
    // CB = AB - scalePoint, objectToScale vector that will scale as it runs from the centre
    var CB:Point = AB.subtract( scalePoint );
    CB.x *= relScaleX;
    CB.y *= relScaleY;
    // recaulate AB, objectToScale will be the adjusted position for the clip
    AB = scalePoint.add( CB );
    // set actual properties

    if(bounds){
     var limits:Rectangle = new Rectangle(
        bounds.x + (bounds.width - (objectToScale.width * relScaleX)),
        bounds.y + (bounds.height - (objectToScale.height * relScaleY)),
        (objectToScale.width * relScaleX) - bounds.width,
        (objectToScale.height * relScaleY) - bounds.height
     );

     if(AB.x < limits.x) AB.x = limits.x;
     if(AB.x > limits.x + limits.width) AB.x = limits.x + limits.width;
     if(AB.y < limits.y) AB.y = limits.y;
     if(AB.y > limits.y + limits.height) AB.y = limits.y + limits.height;       
    }

    return TweenLite.to(objectToScale,1,{onComplete: onComplete, scaleX: scaleAmount, scaleY: scaleAmount, x: AB.x, y: AB.y);
}

Then update your sizing function to this:

function increaseSize(event:MouseEvent):void{
    stopMouseMove();
    scaleAroundMouse(imgLoader, 2, null, resumeMouseMove);
}

function decreaseSize(event:MouseEvent):void{
    stopMouseMove();
    scaleAroundMouse(imgLoader, 1, null, resumeMouseMove);
}

function stopMouseMove():void {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE,mousemove);
}

function resumeMouseMove():void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE,mousemove);
}

I also added a bounds parameter to the function. This is useful if you never want the edges of you content to be visible within the mask. So if you could use it by passing the bounds of your mask to the function:

scaleAroundMouse(imgLoader, 1, myMask.getBounds(this));