通过鼠标进行HTML画布平移

Question

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

使用画布，我在画布上创建了数千个圆圈，画布填充了整个视图。我已经添加了一些摇摄功能，但是在鼠标释放后，我在重绘方面遇到了问题。

基本上，用户可以拖动画布(从代码上讲，这是可行的)，但是在视觉上它没有显示任何平移，并且在鼠标释放时，画布被重新绘制到原来的位置，所以看起来好像什么都没有发生过。

联署材料：

$(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);行从()函数中删除。