画布文本旋转和移动

Question

我需要在画布上添加文本然后移动整个画布。 当我只是添加文本时，一切正常。 但是当我试图移动画布时，文字变得奇怪了。

正如你所看到的，当我移动画布时，文字的移动并不像它应该的那样。

我该如何解决？

function renderTextCanvas() {
ctx.clearRect(0, 0, img.width, img.height);
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, viewportOffsetX, viewportOffsetY, img.width, img.height);

textComponents.forEach(function (textObj) {
    ctx.save();
    var offsetX = textObj.x;
    var offsetY = textObj.y;

    ctx.translate(offsetX, offsetY);
    ctx.rotate(textObj.rotation);
    ctx.translate(-offsetX, -offsetY);
    ctx.font = textObj.fontSize + 'px ' + textObj.font;
    ctx.fillStyle = textObj.color;


    if (textObj.saved) {
        ctx.fillText(textObj.text, textObj.x + viewportOffsetX, textObj.y + viewportOffsetY);
    }
    else {
        ctx.fillText(textObj.text, textObj.x, textObj.y);
        textObj.saved = true;
        textObj.x -= viewportOffsetX;
        textObj.y -= viewportOffsetY;
    }
    ctx.restore();
});

视口偏移正在拖动时更改：

function onMouseMove(e) {
    if (drag) {
        var pageX = e.pageX;
        var pageY = e.pageY;

        if (e.touches) {
            var touches = e.touches[0];
            pageX = touches.pageX;
            pageY = touches.pageY;
        }

        var deltaX = pageX - originX;
        var deltaY = pageY - originY;

        if (Math.abs(viewportOffsetX) < Math.abs(img.width / 2)) {
            viewportOffsetX += deltaX;
        }
        else {
            if (viewportOffsetX < 0) {
                viewportOffsetX += 1;
            }
            else {
                viewportOffsetX -= 1;
            }
        }
        if (Math.abs(viewportOffsetY) < Math.abs(img.height / 2)) {
            viewportOffsetY += deltaY;
        }
        else {
            if (viewportOffsetY < 0) {
                viewportOffsetY += 1;
            }
            else {
                viewportOffsetY -= 1;
            }
        }
        originX = pageX;
        originY = pageY;
        renderTextCanvas();
    }
}