我目前正在我的 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 及其上的任何绘图上应用平移功能?
最佳答案
技术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 的总面积。
关于javascript - Canvas 平移所有元素,包括小 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27139935/