【问题标题】：Canvas Panning All Elements Including Minimap画布平移所有元素，包括小地图
【发布时间】：2014-11-26 14:22:09
【问题描述】：

我目前正在我的画布上添加一个迷你地图，它基本上显示并遵循它在主画布上显示的内容。我的主画布具有缩放和平移功能。我为小地图绘制了一个矩形，它显示了画布上显示的内容。但是，当我平移或缩放它时，它对小地图也是如此。

下面的代码是我在画布和小地图上绘制的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;
}

如何让它停止平移小地图，只在实际画布上应用平移功能以及上面的任何绘图？

【问题讨论】：

是的，当我在实际画布上平移对象时，如何让小地图保持在一个位置 (0,0) 而不使其平移？
答案对你有帮助吗？

标签： javascript css html canvas

【解决方案1】：

技术 1

重置所有转换 (ctx.setTransform(1,0,0,1,0,0);)
在 (0,0) 处绘制小地图
申请翻译
绘制项目

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

技术 2

绘制一次小地图
将画布设置为自己的 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 结合使用，但它也很可能是使用最多内存的技术。出于这个原因，不推荐，但它当然取决于画布的总大小。

【讨论】：