javascript - Canvas 平移所有元素，包括小 map

Question

我目前正在我的 Canvas 上添加一个迷你 map ，它基本上显示并遵循它在主 Canvas 上显示的内容。我的主 Canvas 具有缩放和平移功能。我为小 map 绘制了一个矩形，它显示 Canvas 上显示的内容。但是，当我平移或缩放它时，它也会对小 map 执行相同的操作。

下面的代码是我在 Canvas 和小 map 上绘制的绘制方法。

    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;
}

我如何让它停止平移小 map 并仅在实际 Canvas 及其上的任何绘图上应用平移功能？

Answer 1

技术1

• 重置所有转换 (ctx.setTransform(1,0,0,1,0,0);)
• 在 (0,0) 绘制迷你 map
• 申请翻译
• 绘制元素

在它自己的变量中累积翻译，即。 x/y，并将其用于翻译。

技巧二

• 绘制一次小 map

• 将 Canvas 设置为自己的 CSS 背景:

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

• 每次更新时清除和绘制元素，不用担心迷你 map (如果需要更改它，只需重复前两个步骤)。

技巧三

• 存储当前翻译的 x/y(book-keep 使用变量)
• 在首先翻译 x/y 的 negative Canvas 后清除并绘制迷你 map (这将导致位置 (0,0)。ctx.translate(-x, -y) ;
• 重新应用翻译并绘制元素

技巧4

• 在 x/y 中保存当前翻译
• 在 (0,0) 绘制迷你 map
• 绘制所有偏移 x/y 的元素

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

技巧5

• 将所有元素绘制到足够大的屏幕外 Canvas 上以容纳所有元素
• 绘制小 map
• 在顶部绘制元素 Canvas (作为图像)，平移偏移或在这种情况下仅使用 x/y

这可以与 #2 结合使用，但它也很可能是使用最多内存的技术。出于这个原因，不推荐，但这当然取决于 Canvas 的总面积。