AS3 约束对象 while Zooming/Panning with GestureEvent / MouseEvent

Question

我想要做的是让我的 MovieClip（比视口大）的边框不可见。就像许多应用程序一样，例如部落冲突。

这样，如果您放大、缩小或平移，您将永远看不到它下面的舞台。

如果我只是平移而不是缩放，那会很容易，因为我只需要计算我的 MC 矩形是否在我的舞台内，如果是，我会：

mc.x = 0 + mc.width / 2;
//or
mc.x = stage.StageWidth - (mc.width/2);
//or .... The same for y

现在最大的问题是我什么时候也放大！每次我想出一些代码时，它都不能很好地工作。网上有很多通过 GestureEvent 进行缩放的示例，但其中 none 使 MC 受到限制，因此您看不到它下面的舞台。

谁能给我举个例子。假设舞台是 480x720 而 mc 是 1080x720！

你必须在始终覆盖舞台的情况下进行平移和缩放，mc 的比例将保持在 1-1.5 之间。

这是我当前的代码：

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);
stage.addEventListener(MouseEvent.CLICK, gotoBox);

var isInBox: Boolean = false;
table.x = 203.1;
table.y = 360;
table.scaleX = 1;
table.scaleY = 1;

var mouseTimer: Timer;

function onPan(event: TransformGestureEvent): void
{
    if (!isInBox)
    {
        if (event.phase == GesturePhase.BEGIN)
        {
        stage.removeEventListener(MouseEvent.CLICK, gotoBox);
        trace("noClick");
        }

        table.x += event.offsetX;
        table.y += event.offsetY;
        if (table.x > (table.width / 2))
        {
        table.x = table.width / 2;
        }
        if (table.x < stage.stageWidth - (table.width / 2))
        {
            table.x = stage.stageWidth - (table.width / 2)
        }
        if (table.y > (table.height / 2))
        {
            table.y = table.height / 2;
        }
        if (table.y < stage.stageHeight - (table.height / 2))
        {
            table.y = stage.stageHeight - (table.height / 2)
        }

        if (event.phase == GesturePhase.END)
        {
            if (mouseTimer !== null)
            {
                if (mouseTimer.running)
                {
                    mouseTimer.stop();
                    mouseTimer.removeEventListener(TimerEvent.TIMER, enableClick);
                }
            }
            mouseTimer = new Timer(250);
            mouseTimer.addEventListener(TimerEvent.TIMER, enableClick);
            mouseTimer.start();
            trace("start");
        }
    }
}
function enableClick(e: TimerEvent)
{
    mouseTimer.stop();
    trace("stop");
    mouseTimer.removeEventListener(TimerEvent.TIMER, enableClick);
    stage.addEventListener(MouseEvent.CLICK, gotoBox);
    trace("nowClick");
}
function gotoBox(e: MouseEvent)
{
// here it goes to another frame
}

我无法添加缩放功能，因为这完全是一场灾难；我在 link FlashAndMath

中使用了类似于函数 onZoom 的东西

因为我需要放大和缩小一个点，这是主要问题，因为我必须移动我的 mc 来使该点位于中心，而我必须将它移动到让我的整个 MC 在一定范围内覆盖整个舞台！这些运动也相互对抗。如果最后一部分不清楚，请让我解释更多:)

从 LDMS 得到正确答案后，我更新了这个问题以避免聊天讨论:)

Answer 1

您需要做的就是，每当您移动或缩放对象时，检查以确保它没有超出范围。

因此，如果您创建了一个名为 forceBounds 的函数，只需在缩放或更改 x/y:

时随时调用它

        function forceBounds():void {
            //figure out the bounds to constrain to
            //the x, should be the farthest left it can go without the edge being seen on the right. To get this value just subtract the smaller width (stage) from the larger width (mc) - this should be a negative number
            var bounds:Rectangle = (stage.stageWidth - mc.width, stage.stageHeight - mc.height, mc.width - stage.stageWidth, mc.height - stage.stageHeight);

            if (mc.x > bounds.x + bounds.width) {
                mc.x = bounds.x + bounds.width;
            }
            else if (mc.x < bounds.x) {
                mc.x= bounds.x;
            }

            if (mc.y > bounds.y + bounds.height) {
                mc.y = bounds.y + bounds.height;
            }
            else if (mc.y < bounds.y) {
                mc.y = bounds.y;
            }
        }

这是我在 FlashPro 中制作的完整示例：（舞台上的对象实例名称 mc 大于舞台边界。

缩放代码取自FlashAndMath.com

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.events.TransformGestureEvent;
import fl.motion.MatrixTransformer;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.events.GesturePhase;

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);

forceBounds();

function onPan(e:TransformGestureEvent):void {
    trace("PAN");
    if(e.phase == GesturePhase.BEGIN){
        stage.removeEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
    }

    //localToGlobal is a helper method that converts a point to global coordinates
    var p:Point = DisplayObject(e.target).localToGlobal(new Point(e.offsetX, e.offsetY));
    //conversely, global to local does the opposite
    p = mc.globalToLocal(p);

    mc.x = p.x;
    mc.y = p.y;

    forceBounds();

    if(e.phase == GesturePhase.END){
        stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
    }
}

function onZoom(event:TransformGestureEvent):void {
    trace("ZOOM");
    var container:MovieClip = mc;
    var locX:Number=event.localX;
    var locY:Number=event.localY;
    var stX:Number=event.stageX;
    var stY:Number=event.stageY;
    var prevScale:Number=container.scaleX;
    var mat:Matrix;
    var externalPoint=new Point(stX,stY);
    var internalPoint=new Point(locX,locY);

    container.scaleX *= (event.scaleX + event.scaleY) * .5;

    if(event.scaleX > 1 && container.scaleX > 6){
        container.scaleX=prevScale;
    }
    if(event.scaleY > 1 && container.scaleY > 6){
        container.scaleX=prevScale;
    }
    if(event.scaleX < 1 && container.scaleX < 0.8){
        container.scaleX=prevScale;
    }
    if(event.scaleY < 1 && container.scaleY < 0.8){
        container.scaleX=prevScale;
    }

    if(container.scaleX < 1) container.scaleX = 1;
    if(container.scaleX > 1.5) container.scaleX = 1.5;
    container.scaleY = container.scaleX;

    mat=container.transform.matrix.clone();
    MatrixTransformer.matchInternalPointWithExternal(mat,internalPoint,externalPoint);
    container.transform.matrix=mat;

    forceBounds();
}

function forceBounds():void {
    //figure out the bounds to constrain to
    //the x, should be the farthest left it can go without the edge being seen on the right. To get this value just subtract the smaller width (stage) from the larger width (mc) - this should be a negative number
    var bounds:Rectangle = new Rectangle(stage.stageWidth - mc.width, stage.stageHeight - mc.height, mc.width - stage.stageWidth, mc.height - stage.stageHeight);

    if (mc.x > bounds.x + bounds.width) {
        mc.x = bounds.x + bounds.width;
    }
    else if (mc.x < bounds.x) {
        mc.x= bounds.x;
    }

    if (mc.y > bounds.y + bounds.height) {
        mc.y = bounds.y + bounds.height;
    }
    else if (mc.y < bounds.y) {
        mc.y = bounds.y;
    }
}

AS3 约束对象 while Zooming/Panning with GestureEvent / MouseEvent

AS3 Constrain Object while Zooming/Panning with GestureEvent / MouseEvent

flash

actionscript-3

zooming

pan

gesture