让画布无限大

Question

我目前正在使用画布，在上面画了一些感兴趣的区域。它们由正方形组成，可以通过鼠标单击来移动（即：每次我在画布上单击时，所选区域将以我的光标位置为中心）。

我当前的问题是我想添加以下功能：当我单击画布边缘（左或右）附近时，如果正方形的一部分处于画布外，我希望出现该画布外部分在对面的edfe。

示例：如果我在画布的右边缘附近单击，隐藏部分应出现在左侧。

老实说，我不知道如何正确地做到这一点。在我看来，它需要一个非常繁重的解决方案（有很多循环）。

我们将非常感谢您的帮助。

Answer 1

执行此操作的简单方法是

您有一个具有宽度、高度、x 和 y 的对象

obj = { x :?, y : ?, w : ? , h: ?}

你画它

ctx.fillRect(obj.x, obj.y, obj.w, obj.h);

您有屏幕/画布尺寸

canW = ?;
canH = ?;

当您绘制对象时，检查它是否接触到右边缘。如果是的话，在左侧再画一次

if(obj.x + obj.w > canW){
   ctx.fillRect(obj.x - canW,obj.y, obj.w, obj.h);

现在，当您在左侧时，如果在顶部再次绘制它，请检查它是否不在底部边缘

   if(obj.y + obj.h > canH){
       ctx.fillRect(obj.x - canW, obj.y - canH, obj.w, obj.h);
   }

}

底部也是一样，但是你已经完成了上面渲染中的左上角，这次你只需要检查底部顶部

if(obj.y + obj.h > canH){
   ctx.fillRect(obj.x, obj.y - canH, obj.w, obj.h);
}

你就完成了。

演示展示了一个随机无限滚动的彩色盒子场景。

obj = { x :?, y : ?, w : ? , h: ?}