Question

我正在尝试使用动画翻译旧的Flash动画。在原始的flash动画中，地图图像是可拖动和可缩放的，但是如果平移或者一直放大，地图的边框总是粘在舞台的两侧。

在我的测试中，我抓住了一些允许平移和缩放的代码，但如果你一直平移，地图会越过舞台边界，事实上你可以让地图消失在舞台上。

我认为应该有一种方法可以像二级外部舞台一样绘制，而不是让地图图像超越它。

这是我的代码。

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.25;
var maxScale = 3;

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;  
    console.log(stage.mouseX);
    console.log(stage.mouseY);

}

function stageMouseUp(e)
{
    isDragging = false;
}

function update(e)

{



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

speedX *= friction;
speedY *= friction;

// saber el tamaño actual del mapa en este punto.
that.map.x += speedX;
that.map.y += speedY; 
console.log(that.map.y); 
console.log(that.map.x); 
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)  //control visual
{  
    if (e.currentTarget == that.plusButton)
        scaleMap(-0.1);
    if (e.currentTarget == that.minusButton)
        scaleMap(0.1);
}

function moveMap(e) //control visual
{
    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; // we will scale de map so this goes first.

    map.scaleX -= amount;  // same as map.scaleX = 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();

Answer 1

我经常使用的一个技巧是创建一个＆＃34; fence＆＃34;检查边界并纠正它们的过程。虽然需要一些设置。

要使用此方法，请首先根据您自己的场景设置这些变量。也许这就是你定义第二阶段的意思？＆＃34;

var stageLeft = 0;
var stageRight = 500;
var stageTop = 0;
var stageBottom = 500;
this.map.setBounds(0,0,1462, 1047);  // Set the values to match your map
var mapBounds = this.map.getBounds();

然后，根据地图坐标的设置方式添加此过程或其变体。

// procedure to correct the map x/y to fit the stage
function fenceMap() {
    var map = that.map;
    var ptTopLeft = map.localToGlobal(mapBounds.x,mapBounds.y);
    var ptBotRight = map.localToGlobal(mapBounds.width,mapBounds.height);

    if ((ptBotRight.x - ptTopLeft.x) > (stageRight-stageLeft)) {
        if (ptTopLeft.x > stageLeft) {
            map.x -= ptTopLeft.x - stageLeft;
            speedX = 0;
        } else if (ptBotRight.x < stageRight) {
            map.x -= ptBotRight.x - stageRight;
            speedX = 0;
        }
    }
    if ((ptBotRight.y - ptTopLeft.y) > (stageBottom-stageTop)) {
        if (ptTopLeft.y > stageTop) {
            map.y -= ptTopLeft.y - stageTop;
            speedY = 0;
        } else if (ptBotRight.y < stageBottom) {
            map.y -= ptBotRight.y - stageBottom;
            speedY = 0;
        }
    }
}

然后，只需添加到update（），zoomMap（），moveMap（）和scaleMap（）函数的末尾：

    fenceMap();

将地图边框设置为不在视图区域内交叉

1 个答案: