代码之家 › 专栏 › 技术社区 › user979331

带有矩形区域的ActionScript 3 startDrag

flash actionscript-3

user979331 · 技术社区 · 7 年前

图像的底部位于矩形区域的底部停止拖动
图像顶部位于矩形区域的顶部停止拖动
图像的右侧位于矩形区域的右侧停止拖动。

我的代码如下。我的图像大小是1080 x 1420,我的舞台是1080 x 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); 
}

1 回复 | 直到 7 年前

Atriace 7 年前

Rectangle 每次你 mouseDown .

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

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