畫布平移所有元素，包括小地圖

Question

我目前正在向畫布上添加一個迷你地圖，該地圖基本上會顯示並遵循主畫布上顯示的內容。 我的主畫布具有縮放和平移功能。 我為小地圖繪制了一個rect，它顯示了畫布上顯示的內容。 但是，當我平移或縮放它時，它對小地圖也一樣。

下面的代碼是我的draw方法，它在畫布和小地圖上進行繪制。

    redraw();
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    canvas.style.border = "red 1px solid";
    object.mPosition = new Vector(0,0);
    object.draw(context);
    context.restore();
    requestAnimationFrame(draw);
    context.save();
    context.beginPath();
    context.lineWidth = 3;
    context.strokeStyle="black";
    context.scale(0.25,0.25);
    context.rect(0,0,canvas.width,canvas.height);
    context.fillStyle="white";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.stroke();
    context.clip();
    context.translate(canvas.width / 2, canvas.height / 2);
    object.draw(context);
    context.closePath();
    context.restore();

下面的代碼顯示了平移代碼。

function OnMouseMove(event) {
    var mousePosition = new Vector(event.clientX, event.clientY);
    if(leftMouseButton) {
        context.translate(mousePosition.getX() - previousMousePosition.getX(), mousePosition.getY() - previousMousePosition.getY());
    }
    previousMousePosition = mousePosition;
}

如何使其停止平移小地圖，而僅將平移功能應用於實際的畫布及其上的任何繪圖？

Answer 1

技術1

• 重置所有轉換（ ctx.setTransform(1,0,0,1,0,0); ）
• 在（0,0）繪制小地圖
• 應用翻譯
• 畫項目

精確轉換為其自己的變量，即。 x / y，並將其與translate一起使用。

技術2

• 繪制一次迷你地圖

• 將canvas設置為其自己的CSS背景：

  canvas.style.background = "url(" + canvas.toDataURL() + ")";

• 清除並繪制每個更新的項目，而無需擔心小地圖（如果需要更改，只需重復兩個第一步）。

技術3

• 存儲當前翻譯的x / y（使用變量進行簿記）
• ctx.translate(-x, -y);首先翻譯x / y的畫布負片 （這將導致位置（0,0）。
• 重新應用翻譯並繪制項目

技術4

• 當前/當前以x / y保留的翻譯
• 在（0,0）繪制小地圖
• 用x / y繪制所有偏移的項目

這實際上需要手動翻譯每個項目，因此需要更多代碼。 由於可以使用筆譯，因此我不建議您使用此筆錄，但出於完整性考慮，在此將其包括在內。

技術5

• 將所有項目繪制到足夠大的屏幕外畫布上以容納所有項目
• 繪制小地圖
• 在頂部繪制項目畫布（作為圖像），平移偏移量或在這種情況下僅使用x / y

可以將其與＃2結合使用，但也很有可能是使用最多內存的技術。 出於這個原因，我們不建議這樣做，但這當然取決於畫布的總大小。