AS3 放大和缩小鼠标未在注册时单击的位置 [英] AS3 zooming in and out where mouse clicked not at registration

问题描述

我正在尝试通过单击和双击鼠标事件放大和缩小蒙版鼠标平移图像.我让图像放大，但它总是放大左边缘注册点，而不是我单击的位置.我完全不知道如何对此进行编码，并且在互联网上花了一整天的时间试图在没有运气的情况下弄清楚.我希望有人能帮我解决这个问题！

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});
}

推荐答案

这个答案来自 这里

添加此功能:

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);
}

我还在函数中添加了一个 bounds 参数.如果您不想让内容的边缘在遮罩内可见，这将非常有用.因此，如果您可以通过将掩码的边界传递给函数来使用它:

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));

这篇关于AS3 放大和缩小鼠标未在注册时单击的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！