请说明如何在动画上实现此脚本

Question

我有一个正在制作的动画，它是用Adobe animate完成的，并且图形效果很好，但是代码无法正常工作，或者我只是不了解它是如何工作的。

此代码可在给定地图上添加平移，缩放和居中控件。问题是我的地图比画布舞台大得多，如果我平移或缩放地图太多，地图边框就会进入舞台内部，尽管会显示我不想要的舞台背景。我需要舞台充当遮罩，并使地图可见，但不允许其超出地图边界。

有没有一种简便的方法可以使下面的代码适应我的需要？

var that = this;
var clickedX;
var clickedY;
var isDragging = false;
var friction = 0.85;
var speedX = 0;
var speedY = 0;
var mapOriginalX = this.map.x;
var mapOriginalY = this.map.y;
var mapNudge = 5;
var minScale = 0.3;
var maxScale = 3;
console.log(this.map.x);
console.log(this.map.y);
console.log(stage.x);
console.log(stage.y);

function onMouseWheel(e)
{
    var delta;

    if (e == window.event)
        delta = -10 / window.event.wheelDeltaY;
    else
        delta = e.detail / 30;

    var zoomFactor = delta; 
    scaleMap(zoomFactor);   
}

function mouseDown(e)
{
    clickedX = stage.mouseX;
    clickedY = stage.mouseY;
    isDragging = true;  
}

function stageMouseUp(e)
{
    isDragging = false;
}

function update(e)
{   
    if (isDragging)
    {
        speedX = stage.mouseX - clickedX;
        speedY = stage.mouseY - clickedY;
    }   

    speedX *= friction;
    speedY *= friction;

    that.map.x += speedX;
    that.map.y += speedY;

    clickedX = stage.mouseX;
    clickedY = stage.mouseY;
}

function resetMap()
{
    that.map.x = mapOriginalX;
    that.map.y = mapOriginalY;
    that.map.scaleX = that.map.scaleY = 1;
}

function zoomMap(e)
{
    if (e.currentTarget == that.plusButton)
        scaleMap(-0.1);
    if (e.currentTarget == that.minusButton)
        scaleMap(0.1);
}

function moveMap(e)
{
    if (e.currentTarget == that.upButton)
        speedY -= mapNudge;
    else if (e.currentTarget == that.rightButton)
        speedX += mapNudge;
    else if (e.currentTarget == that.downButton)
        speedY += mapNudge;
    else if (e.currentTarget == that.leftButton)
        speedX -= mapNudge;
}

function scaleMap(amount)
{
    var map = that.map;

    map.scaleX -= amount;
    map.scaleY = map.scaleX;

    if (map.scaleX < minScale)
        map.scaleX = map.scaleY = minScale;
    else if (map.scaleX > maxScale)
        map.scaleX = map.scaleY = maxScale;
}

// listeners
this.map.on("mousedown", mouseDown.bind(this));
this.resetButton.on("click", resetMap.bind(this));
this.plusButton.on("click", zoomMap.bind(this));
this.minusButton.on("click", zoomMap.bind(this));
this.upButton.on("click", moveMap.bind(this));
this.rightButton.on("click", moveMap.bind(this));
this.downButton.on("click", moveMap.bind(this));
this.leftButton.on("click", moveMap.bind(this));
stage.on("stagemouseup", stageMouseUp.bind(this));
document.getElementById('canvas').addEventListener('mousewheel', onMouseWheel.bind(this));
document.getElementById('canvas').addEventListener('DOMMouseScroll', onMouseWheel.bind(this));
createjs.Ticker.addEventListener("tick", update.bind(this));

resetMap();