Сделай холст бесконечным

В настоящее время я использую холст, на котором я нарисовал некоторые области интереса. Они состоят из квадратов и могут быть перемещены щелчком мыши (т. Е. Выделенная область будет находиться в центре моей позиции курсора каждый раз, когда я нажимаю на холст).

Моя текущая проблема заключается в том, что я хотел бы добавить следующую функцию: когда я нажимаю рядом с краем холста (слева или справа),если часть квадрата вне холстаЯ хочу, чтобы эта часть вне холста появилась в противоположном edfe.

Пример: если я щелкну около правого края холста, скрытая часть должна появиться слева.

Если честно, я понятия не имею, как это сделать правильно. Мне кажется, что это требует действительно тяжелого решения (с большим количеством циклов).

Ваша помощь будет очень признательна.

 markE26 июл. 2016 г., 18:26
Вы имеете в виду бесконечную панораму? Вотпример.
 Toby26 июл. 2016 г., 14:03
Я бы рекомендовал опубликовать то, что у вас есть, чтобы хотя бы люди могли видеть, что может работать, а что нет. Трудно устранить неполадки без кода вообще.
 Blindman6726 июл. 2016 г., 14:54
Вам нужно нарисовать все, что перекрывает край, по крайней мере, дважды (по одному разу для каждой стороны, где он виден), если он находится в углу и, таким образом, будет виден в любом другом углу, вам нужно нарисовать его 4 раза по одному разу для каждого угла.
 urban31 дек. 2016 г., 17:28
Вы можете использовать библиотеку под названием TiledCanvas. Она предоставляет интерфейсы для масштабирования и перемещения. И рисовать в бесконечном пространстве, используя все API-интерфейсы Canvas. Это требует, чтобы вы сказали, где вы рисуете.github.com/Squarific/TiledCanvas Преимущество в том, что вам не нужно делать такие вещи, как масштабирование или перемещение.

Ответы на вопрос(1)

Решение Вопроса

Простой способ сделать это

У вас есть объект с высотой ширины, х и у

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

И вы сделали.

Демо показывает случайную бесконечную прокручиваемую цветную сцену коробки.

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

 nugetchar27 июл. 2016 г., 14:16
Большое спасибо ! Это было именно то, что я искал. Это на самом деле немного сложнее из-за характера приложения, которое мы создаем, но меанизм - это самое простое, с чем я столкнулся. Большое спасибо, еще раз. Мне придется хранить некоторую информацию в дополнение, но это будет работать :)

Ваш ответ на вопрос