Javascript 无限空间，相机偏移计算

我正在开发一个游戏引擎。房间测量10000 x 10000个点，相机（帆布）测量800 x 600。房间代表无限空间，超出限制的对象会重新出现在另一侧。当摄影机矩形至少跨越一个限制时，会出现问题， 限制另一侧的对象应显示为一个连续空间。 我已经尝试了几种方法来实现这一点，但没有一种似乎是一个优雅的解决方案。 有什么想法吗

视口

四个红色的盒子是照相机。4个蓝色框是房间的可见部分

将对象传递到另一侧很容易。但要计算对象绘制的内容以及应用于每个对象的偏移量（画布内的偏移量）。。我的脑子一片空白。

---

我需要找到一个最佳解决方案。

您可以将场景打印两次。假设场景的上边界在视口中：在该边界上方和下方打印一次场景。您可以对其他边界执行相同的操作。显然，这可以优化，但应该有效。

另一种方法是使用模运算符实现转换。请看下面的示例

使用图像作为房间和画布作为视口，以下代码允许在画布中将房间视为环绕

尝试dx和dy的值以查看效果。 实际上，不会使用img标记，因此只能通过画布的视口看到房间

在

---

=iw&&y+chI假设您有一个打印场景的函数：首先，您在“正常”位置（假设与矩形匹配的位置）打印场景。然后将上下文向上移动场景的高度，然后再次打印它（这样，您可以打印C角）；然后将上下文向右移动场景的宽度，然后再次打印（这样可以打印D角）；最后，将上下文向下移动场景的高度并打印角点B。另外，请参见
<img id='room'>
<canvas id='canv' width=100 height=75></canvas>

im=new Image();
im.src='http://www.all-sweets.com/gradient-wallpaper/gradient-background/gradient-background-3.jpg';
im.onload=function() {
    document.getElementById('room').src=im.src; 
    c=document.getElementById('canv');
    cx=c.getContext('2d');
    cw=c.width;
    ch=c.height;
    iw=im.width;
    ih=im.height;
    x=0;//x value of  top left corner of viewport
    y=0;//y value of top left corner of viewport
    //displacement much less than image width or height
    //build up of displacement move viewport
/*************************************************************** 
Displacements would be set as viewport moves
Manually change these values below to see effect on viewport.
Shown image is 400px by 300px
set dx to 350   and dy to 260 for example to see overlap effect
****************************************************************/
    dx=0;//displacement from current x
    dy=0;//displacement from current y

//*************************************************************** 
    x+=dx;//new x position
    x=x%iw; //modulo translates relative to room coordinates
    x=(x+iw)%iw;//deals with negative x
    y+=dy;//new y position
    y=y%ih;//modulo translates relative to room coordinates
    y=(y+ih)%ih;//deals with negative y
    if(x+cw<iw && y+ch<ih) { //totally inside room
       cx.drawImage(im, x, y, cw, ch, 0, 0, cw, ch); 
    }
    else if(x+cw>=iw && y+ch<ih) { //extends beyond room on right only
        cx.drawImage(im, x, y, iw-x, ch, 0, 0, iw-x, ch);
        cx.drawImage(im, 0, y, x+cw-iw, ch, iw-x, 0, x+cw-iw, ch);
    }
    else if(x+cw<iw && y+ch>=ih) {//extends beyond room at bottom only
        cx.drawImage(im, x, y, cw, ih-y, 0, 0, cw, ih-y);
        cx.drawImage(im, x, 0, cw, y+ch-ih, 0, ih-y, cw, y+ch-ih);
    }
    else {//extends beyond room on right and bottom
        cx.drawImage(im, x, y, iw-x, ih-y, 0, 0, iw-x, ih-y);
        cx.drawImage(im, 0, y, x+cw-iw, ih-y, iw-x, 0, x+cw-iw, ih-y);
        cx.drawImage(im, x, 0, iw-x, y+ch-ih, 0, ih-y, iw-x, y+ch-ih);
        cx.drawImage(im, 0, 0, x+cw-iw, y+ch-ih, iw-x, ih-y, x+cw-iw, y+ch-ih);
    }
}