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);
}

你完成了。

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

＆＃13;

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 **/

＆＃13;

使画布无限

1 个答案: