Question

我在画布上做了一个小项目，我有一张可以缩放和平移的地图，到目前为止效果非常好。

现在我的问题是，在我放大之后，我不希望图像能够被拖动到比图像的边缘更多的东西（除了画布上的图像之外从不显示任何东西）。这适用于图像的顶部和左侧（X和Y坐标永远不会超过0（画布顶部）。

但是对于右边和底部，我需要计算缩放图像的新宽度和高度，并说X和Y永远不会小于画布宽度和画布外部图像的多余部分。

这似乎不正确，因为我的解释不太好所以制作了一个图像来说明，黑色矩形是我的画布，红色是我的形象。

我的猜测是，它不像为新宽度拍摄图像宽度*比例那么容易，或者它与我的画布的偏移有关，试图用它来计算，但是偏移量只有8px而且看起来不像作为问题的全部范围，就好像我放大了更多问题变得更大。

感谢任何帮助，并为长期和奇怪的解释感到抱歉=）

canvas.addEventListener("mousedown", mouseDown);
function mouseDown(e){
    mouseX=parseInt(e.clientX);
    mouseY=parseInt(e.clientY);
    lastX = mouseX;
    lastY = mouseY;
    down = true;
}

canvas.addEventListener("mousemove", mouseMove);

function mouseMove(e){
    if (!down){
        return;
    }
    mouseX=parseInt(e.clientX);
    mouseY=parseInt(e.clientY);

    dx = mouseX - lastX;
    dy = mouseY - lastY;

    x = dx;
    y = dy;

    if (x>0){
        x = 0;
    }
    if (y>0){
        y = 0;
    }
    draw(x,y);
}

canvas.addEventListener("mouseup", mouseUp);
function mouseUp(){
    down = false;
    lastX = mouseX;
    lastY = mouseY;
    ctx.fillText(mouseX,25,50);
    ctx.fillText(dx,25,75);
}

function draw(){
    ctx.clearRect(0,0,1525,850);
    ctx.scale(scaleY,scaleX);
    ctx.drawImage(img,x,y,1375,850);
    ctx.fillRect(x+688,y+425,10,10);
    ctx.setTransform(1, 0, 0, 1,0,0);
}
//Never zoom more then 2,5
function zoomIN(){
    scaleY = scaleY + 0.1;
    scaleX = scaleX + 0.1;
    if (scaleY >= 2.5){
        scaleY = 2.5;
        scaleX = 2.5;
    }
    draw(scaleY,scaleX,x,y);
}
//Never zoom less then 1
function zoomOUT(){
    scaleY = scaleY - 0.1;
    scaleX = scaleX - 0.1;
    if (scaleY <= 1){
        scaleY = 1;
        scaleX = 1;
    }
    draw(scaleY,scaleX,x,y);
}

缩放后图像宽度不正确

0 个答案: