使画布水平和垂直滚动

Question

我正在使用<canvas> 为世博会制定平面图。

通过一些研究和反复试验，我设法让我的<canvas> 水平滚动。如图Floor Plan Map - Horizontal Only

但我希望我的<canvas> 在用户想要的任何地方滚动/移动。示例：同时垂直和水平滚动。

我尝试添加一个Y 轴，但它只是通过一些奇怪的鼠标交互对角滚动。以下是管理滚动的行的摘录：

function drawSettings(){
var dragging = false;
var lastX;
var lastY;
var marginLeft = 0;
var marginTop = 0;

//Scroll settings start
canvas.addEventListener('mousedown', function(e) {
    var evt = e || event;
    dragging = true;
    lastX = evt.clientX;
    lastY = evt.clientY;
    e.preventDefault();
}, false);

window.addEventListener('mousemove', function(e) {
    var evt = e || event;
    if (dragging) {
        var delta = evt.clientX - lastX;
        lastX = evt.clientX;
        lastY = evt.clientY;
        marginLeft += delta;
        marginTop += delta;
        canvas.style.marginLeft = marginLeft + "px";
        canvas.style.marginTop = marginTop + "px";
    }
    e.preventDefault();
}, false);

window.addEventListener('mouseup', function() {
    dragging = false;
}, false);
//Scroll settings end
}

这是上面示例的结果：Floor Map Plan - Diagonal Error

我该如何解决这个问题？

编辑以供将来参考： Floor Plan Map - FULLY WORKING

Answer 1

你可以像水平拖动那样做，垂直拖动也可以，像这样：

window.addEventListener('mousemove', function(e) {
    var evt = e || event;
    if (dragging) {
        var deltaX = evt.clientX - lastX;
        var deltaY = evt.clientY - lastY;
        lastX = evt.clientX;
        lastY = evt.clientY;
        marginLeft += deltaX;
        marginTop += deltaY;
        canvas.style.marginLeft = marginLeft + "px";
        canvas.style.marginTop = marginTop + "px";
    }
    e.preventDefault();
}, false);