ActionScript 3 startDrag with Rectangle area

Question

I have a movie clip called site plan (which is an image of a site plan) and I have zoom gestures in place to to zoom in and those are working well. Now I want to put MouseEvents in place to do dragging when the movie clip is is zoomed in. I seem to having trouble with setting the Rectangle area x and y axis. What I am to do is make the movie clip dragged inside the 1080 x 1420 area and have the following when zoomed in

Bottom of the image is at the bottom of the rectangle area stop dragging
Top of the image is at the top of the rectangle area stop dragging
Left side of the image is at the left of the rectangle area stop dragging
Right side of the image is at the right of the rectangle area stop dragging.

My code is below. The size of my image is 1080 x 1420 and my stage is 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();
}

I hope this make sense, Please Help!

I have also tried:

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

Atriace Atriace · Accepted Answer · 2017-07-24T16:55:39

The event listeners you're looking at will only fire once, which (while a good start) doesn't actually allow for dragging. Also, with the current design, you're creating a new Rectangle object every time you mouseDown.

The crux of your issue depends on clamping the siteplan to your screen. I've written such a function below, along with a demonstration of your project functioning as you described. Note that you can compile this in a clean project, and using your scrollwheel to zoom, and mouse drag to pan, the map stays within the bounds of your screen.

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 with Rectangle area

1 Answers