带有矩形区域的 ActionScript 3 startDrag

Question

我有一个名为站点计划的影片剪辑（它是站点计划的图像），并且我有适当的缩放手势来放大，而且效果很好。现在我想将 MouseEvents 放在适当的位置，以便在放大影片剪辑时进行拖动。我似乎无法设置矩形区域的 x 轴和 y 轴。我要做的是将影片剪辑拖到 1080 x 1420 区域内，并在放大时显示以下内容

图片底部在矩形区域底部停止拖动
图片顶部在矩形区域顶部停止拖动
图片左侧在矩形区域左侧停止拖动
图片右侧在矩形区域右侧停止拖动

我的代码如下。我的图片大小是1080 x 1420，我的舞台是1080 * 1920

siteplan.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);
siteplan.addEventListener(MouseEvent.MOUSE_UP, dragEnd);

function dragStart(e:MouseEvent):void
{
    var rect:Rectangle = new Rectangle(0 - 1080, 0 - 1920, 1080, 1420);
    siteplan.startDrag(false, rect); 
}

function dragEnd(e:MouseEvent):void
{
    siteplan.stopDrag();
}

我希望这是有道理的，请帮助！

我也试过：

function dragStart(e:MouseEvent):void
{
    var rect:Rectangle = new Rectangle(0 - (1080 * e.currentTarget.x), 0 - (1920 * e.currentTarget.y), 1080, 1420);
    siteplan.startDrag(false, rect); 
}

Answer 1

您正在查看的事件侦听器只会触发一次，这（虽然是一个好的开始）实际上不允许拖动。此外，在当前设计中，每次 mouseDown.

时都会创建一个新的 Rectangle 对象

问题的症结在于将站点计划固定在屏幕上。我在下面编写了这样一个函数，并演示了您所描述的项目功能。请注意，您可以在一个干净的项目中编译它，并使用滚轮进行缩放，并使用鼠标拖动进行平移，地图将保持在屏幕范围内。

import flash.events.Event;
import flash.display.Loader;

var cursor:Object = { // tracks the starting coordinates
    "drag":false // whether we're currently dragging.
}

// Load our test "map"
var map:Loader = new Loader();
map.load(new URLRequest("http://nerdist.com/wp-content/uploads/2015/11/Fallout-4-Map.png"));
addChild(map)

// Event Listeners
map.addEventListener("mouseDown", drag);
map.addEventListener("mouseMove", drag);
map.addEventListener("mouseUp", drag);
map.addEventListener("releaseOutside", drag);
map.addEventListener("mouseWheel", zoom);

function zoom(e:MouseEvent):void {
    // Using the scrollwheel, we'll zoom in (up to 3x) or out (down to stage size)
    var increment:Number = 1.2;
    if (e.delta < 0) { increment = 0.8; }

    map.width = clamp(map.width * increment, this.loaderInfo.width, map.width/map.scaleX * 3);
    map.height = clamp(map.height * increment, this.loaderInfo.height, map.height/map.scaleY * 3);
    map.scaleY = map.scaleX;
    map.x =  - (mouseX/this.loaderInfo.width) * (map.width - this.loaderInfo.width);
    map.y =  - (mouseY/this.loaderInfo.height) * (map.height - this.loaderInfo.height);
}

function drag(e:Event):void {
    switch (e.type) {
        case "mouseDown":
            // Store the starting points for both cursor and map.
            cursor.x = map.x - mouseX;
            cursor.y = map.y - mouseY;
            cursor.drag = true;
            break;
        case "mouseMove":
            // When moving the mouse, if we're technically dragging...
            if (cursor.drag) {
                // Offset the current location by the delta of the cursor and the original position of the map.
                map.x = clamp(mouseX + cursor.x, -map.width + this.loaderInfo.width, 0);
                map.y = clamp(mouseY + cursor.y, -map.height + this.loaderInfo.height, 0);
            }           
            break;
        case "mouseUp":
        case "releaseOutside":
            cursor.drag = false;
            break;
    }
}

function clamp(original:Number, low:Number, high:Number):Number {
    return (original > high) ? high : (original < low) ? low : original;
}

带有矩形区域的 ActionScript 3 startDrag

ActionScript 3 startDrag with Rectangle area

actionscript-3

flash