在 JavaScript 画布中复制图块区域

Question

我有一个显示瓦片地图的画布。滚动时，我不想刷新整个图块列表，而是想选择可以重复使用的图块地图的有用部分并将其复制到另一个画布。

例如，如果图块地图跨度为 5 个图块：

0 1 2 3 4
1 2 3 4 5
2 3 4 5 6
3 4 5 6 7
4 5 6 7 8

并且我想向右移动 (x) 1 个图块...我可以复制图块 1 到 4，因为这些图块将在下一帧中使用。所以我会复制：

1 2 3 4
2 3 4 5
3 4 5 6
4 5 6 7
5 6 7 8

我似乎在为此提出正确的数学方面遇到问题。

目前我有以下代码：

// Calculate from and to for x and y
// Change formula if positive or negative movement
    // movX / movY = amount to move across x or y
    // (i.e. movX = 1 (right) or movX = -1 (left)
    // tileXFrom / tileYFrom = tile to start copy from
    // tileXTo / tileYTo = tile to finish copying at
if(movX > 0)
{
    tileXFrom = origX + movX;
    tileXTo = tileXFrom + (tilesCountX - movX);
}
else
{
    tileXFrom = origX;
    tileXTo = tileXFrom + (tilesCountX + movX);
}

if(movY > 0)
{
    tileYFrom = origY + movY;
    tileYTo = tileYFrom + (tilesCountY - movY);
}
else
{
    tileYFrom = origY;
    tileYTo = tileYFrom + (tilesCountY + movY);
}

这些计算工作正常，但是有更好的方法吗？我想知道是否有办法绕过正/负 if 语句。

我现在陷入困境的部分是如何获得每个的真实 x, y 位置。

因此，我需要将图块 1, 0 转换为屏幕上的 x, y 位置，以便从那里开始复制。

如果这一切都有意义的话？

干杯

Answer 1

您可以使用三元运算符来缩短代码，但这不会改变功能：

tileXFrom = (movX > 0) ? origX + movX : origX;
tileXTo   = (movX > 0) ? tileXFrom + (tilesCountX - movX) : tileXFrom + (tilesCountX + movX);
tileYFrom = (movY > 0) ? origY + movY : origY;
tileYTo   = (movY > 0) ? tileYFrom + (tilesCountY - movY) : tileYFrom + (tilesCountY + movY);