通過鼠標進行HTML畫布平移

Question

Codepen： https ：//codepen.io/anon/pen/EvNqyY

使用“畫布”，我在畫布上創建了數千個圓，並且畫布填充了整個視口。 我添加了一些平移功能，但是釋放鼠標后重新繪制存在問題。

基本上，用戶可以拖動畫布（在代碼方面，這是可行的），但是在視覺上它不會顯示任何平移，並且在釋放鼠標時，畫布會以其原始位置重新繪制，因此好像什么也沒發生。

JS：

$(document).ready(function() {
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext("2d");
    var global = {
        scale: 1,
        offset: {
            x: 0,
            y: 0,
        },
    };
    var panning = {
        start: {
            x: null,
            y: null,
        },
        offset: {
            x: 0,
            y: 0,
        },
    };
    var systems = '../js/json/eveSystems.json';

    fitToContainer(canvas);

    $.getJSON(systems, function(data) {

        function draw() {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            data.forEach(function(systemData) {
                var coordX = systemData.position.x / 100000000000000;
                var coordY = systemData.position.y / 100000000000000;

                ctx.beginPath();
                ctx.arc(coordX,coordY,20,0,2*Math.PI);
                ctx.stroke();
            });
        }

        draw();

        canvas.addEventListener("mousedown", startPan);

        function pan() {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(panning.offset.x, panning.offset.y);
            console.log(panning.offset.x);
            draw();
        }

        function startPan(e) {
            window.addEventListener("mousemove", trackMouse);
            window.addEventListener("mousemove", pan);
            window.addEventListener("mouseup", endPan);
            panning.start.x = e.clientX;
            panning.start.y = e.clientY;
        }

        function endPan(e) {
            window.removeEventListener("mousemove", trackMouse);
            window.removeEventListener("mousemove", pan);
            window.removeEventListener("mouseup", endPan);
            panning.start.x = null;
            panning.start.y = null;
            global.offset.x = panning.offset.x;
            global.offset.y = panning.offset.y;
        }

        function trackMouse(e) {
            var offsetX  = e.clientX - panning.start.x;
            var offsetY  = e.clientY - panning.start.y;
            panning.offset.x = global.offset.x + offsetX;
            panning.offset.y = global.offset.y + offsetY;
        }
    });

    function fitToContainer(canvas){
        canvas.style.width ='100%';
        canvas.style.height='100%';
        canvas.width  = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }

});

Answer 1

ctx.setTransform覆蓋ctx.translate()完成的（0,0）點的重新映射。 因此，您應刪除ctx.setTransform(1, 0, 0, 1, 0, 0); 從您的draw（）函數。