帆布平移所有元素包括迷你地图

Question

我目前正在我的画布上添加一个迷你地图，它基本上显示并跟踪主画布上显示的内容。我的主画布有缩放和平移功能。我为小地图绘制了一个矩形，它显示了画布上显示的内容。但是，当我平移或缩放它时，它也会为小地图做同样的事情。

下面的代码是我的绘制方法，它使用画布和小地图。

    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）
绘制迷你地图
• 应用翻译
• 绘制项目

Acculumate翻译自己的变量，即。 x / y，并将其与translate一起使用。

技术2

• 绘制迷你地图一次

• 将canvas设置为自己的CSS背景：

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

• 清除并绘制每个更新的项目，无需担心迷你地图（如果需要更改，只需重复两个步骤）。

技术3

• 存储当前翻译的x / y（使用变量预订）
• 首先翻译x / y的画布否定后清除并绘制迷你地图（这将导致位置（0,0）。ctx.translate(-x, -y);
• 重新申请翻译和绘制项目

技术4

• 预订 - 保持x / y当前的翻译
• 在（0,0）
处绘制迷你地图
• 绘制所有以x / y
偏移的项目

这需要更多代码，因为您实际上是手动翻译每个项目。我不推荐这个，因为翻译是可用的，但我在这里包括它是为了完整。

技术5

• 将所有项目绘制到足够大的屏幕外画布以保留所有项目
• 绘制迷你地图
• 在顶部绘制项目画布（作为图像），使用平移偏移或在这种情况下仅使用x / y

这可以与＃2结合使用，但也很可能是使用大多数内存的技术。出于这个原因不推荐，但是，当然这取决于画布的总量。