使画布无限 [英] Make a canvas infinite

问题描述

我目前正在使用画布，我在其中绘制了一些感兴趣的领域。它们包含方块，可以通过鼠标单击移动（即：每次我点击画布时，所选区域将居中于我的光标位置）。

I am currently using a canvas on which I drew some areas of interest. They consist in squares and can be moved by a mouse click (i.e : a selected area will center on my cursor position everytime I click on the canvas).

我当前的问题是我想添加以下功能：
当我在画布边缘附近（左或右）点击时，如果广场的一部分在画布外，我希望这个非画布部分出现在相反的edfe。

My current problem is that I would like to add the following feature: When I click near the edge of the canvas (either left or right), if a portion of the square is off-canvas, I want this off-canvas portion to appear at the opposite edfe.

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

Example: If I click near the right edge of the canvas, the hidden portion should appear on the left.

老实说，我对如何正确地做这件事没有任何线索。在我看来，它需要一个非常重的解决方案（有很多循环）。

To be honest, I don't have any clue on how to do this properly. It seems to me that it requires a really heavy solution (with a lot of loops).

非常感谢你的帮助。

推荐答案

这样做的简单方法是

你有一个宽度为高，x和y的对象

You have an object with width height, x,and y

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

你画它

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

你有屏幕/画布尺寸

canW = ?;
canH = ?;

绘制对象时检查是否触及右边缘。如果是这样在左侧再次绘制

When you draw the object check if it is touching the right edge. If so draw it again on the left side

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

现在你在左侧检查它是否在底部边缘，如果它是绘制它再次在顶部

Now as you are on the left side check that it's not on the bottom edge if it is draw it again at the top

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

}

底部也一样，但是你已经在上面的渲染中做了左上角你只需要检查这个时间的底部

And the same for the bottom, But ass you have already done the top left in the above render you only need check this time for the bottom top

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

你完成了。

演示显示随机无限滚动彩色方块场景。

Demo shows a random infinite scrolling colored box scene.

var onResize;
function display(){  //
    ctx.setTransform(1,0,0,1,0,0); // reset transform
    ctx.globalAlpha = 1;           // reset alpha
    ctx.clearRect(0,0,w,h);
    if(array.length === 0){
        addRandomObjects();
    }
    // move the scene;
    offsetDX += (Math.random() + Math.random() + Math.random())/3 -0.5;
    offsetDY += (Math.random() + Math.random() + Math.random())/3 -0.5;
    offsetDX = Math.max(-4,Math.min(4,offsetDX));
    offsetDY = Math.max(-4,Math.min(4,offsetDY));
    offsetX += offsetDX;
    offsetY += offsetDY;
    offsetX = ((offsetX % w) + w) % w;
    offsetY = ((offsetY % h) + h) % h;
  
    // draw the scene;
    drawObjects();
    
}
var offsetX = 0;
var offsetY = 0;
var offsetDX = 0;
var offsetDY = 0;

var drawObjects = function(){
    var ox = offsetX;  // get the offset
    var oy = offsetY;
    for(i = 0; i < array.length; i ++){ // do each object
        var a = array[i];
        var x = (a.x + ox)%w;
        var y = (a.y + oy)%h;
        ctx.fillStyle = a.col;   
        ctx.fillRect(x,y,a.w,a.h); // draw it
        if(x+a.w > w){  // if touching right edge draw again at left
            ctx.fillRect(x-w,y,a.w,a.h);
            if(y+a.h > h){
                ctx.fillRect(x-w,y-h,a.w,a.h);
            }
              
        }
        if(y+a.h > h){ // if touching bottom draw again at top
            ctx.fillRect(x,y-h,a.w,a.h);
        }
    }

}

var array = [];

var addRandomObjects = function(){
    for(i = 0; i < 50; i++){
        var hue = Math.floor(Math.random() * 360);
        array.push({
            x: Math.random() * w,
            y : Math.random() * h,
            w : Math.max(50,Math.random() * (w * h * 0.0004)),
            h : Math.max(80,Math.random() * (w * h * 0.0004)),
            col: "hsla("+hue+",100%,50%,0.5)",
        })
    }
}

var onResize = function(){
    array = [];
}






/** SimpleFullCanvasMouse.js begin **/
//==================================================================================================
// The following code is boilerplate code that provides me with a standard interface to various forums.
// It provides a mouse interface, a full screen canvas, and some global often used variable  
// like canvas, ctx, mouse, w, h (width and height), globalTime
// This code is not intended to be part of the answer unless specified and has been formated to reduce
// display size. It should not be used as an example of how to write a canvas interface.
// By Blindman67
const U = undefined;const RESIZE_DEBOUNCE_TIME = 100;
var w,h,cw,ch,canvas,ctx,mouse,createCanvas,resizeCanvas,setGlobals,globalTime=0,resizeCount = 0; 
var L = typeof log === "function" ? log : function(d){ console.log(d); }
createCanvas = function () { var c,cs; cs = (c = document.createElement("canvas")).style; cs.position = "absolute"; cs.top = cs.left = "0px"; cs.zIndex = 1000; document.body.appendChild(c); return c;}
resizeCanvas = function () {
    if (canvas === U) { canvas = createCanvas(); } canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext("2d"); 
    if (typeof setGlobals === "function") { setGlobals(); } if (typeof onResize === "function"){ resizeCount += 1; setTimeout(debounceResize,RESIZE_DEBOUNCE_TIME);}
}
function debounceResize(){ resizeCount -= 1; if(resizeCount <= 0){ onResize();}}
setGlobals = function(){ cw = (w = canvas.width) / 2; ch = (h = canvas.height) / 2; }




resizeCanvas(); 
window.addEventListener("resize",resizeCanvas); 

function update(timer){ // Main update loop
    globalTime = timer;
    display();  // call demo code
    requestAnimationFrame(update);
}
requestAnimationFrame(update);

/** SimpleFullCanvasMouse.js end **/

这篇关于使画布无限的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！