background arrastável

12

Eu quero conseguir algo como um arrasto infinito como o do Konva JS. Alguém pode me ajudar com isso. Eu tento varius coisas, mas não deles estavam ok. Sou novo em p5js e javascript. Por favor, para quaisquer dicas. Somente esse elemento me impede de concluir o projeto inteiro.

var grid;
var current_img;
var BgCat1 = [];
var layerOne;
let show_grid = false;
Michał Mi
fonte
2
Estou confuso sobre o que você está tentando fazer. Deseja que a grade seja arrastável como o exemplo, infinitamente?
Quillbert Q.
sim .. eu quero grade para ser arrastado como o exemplo
Michał Mi

Respostas:

7

Pode haver uma solução mais elegante, mas aqui eu desenho uma célula extra em cada lado da grade para lidar com a envolvente; portanto, uma grade de 12x12 com 10x10 visível. Veja aqui: https://editor.p5js.org/rednoyz/full/uJCADfZXv

let dim = 10, sz;
let xoff = 0, yoff = 0;

function setup() {
  createCanvas(400, 400);
  sz = width/ dim;
}

function mouseDragged() {
  xoff += mouseX - pmouseX;
  yoff += mouseY - pmouseY;
}

function draw() {
  background(255);

  for (let i = 0; i < dim+2; i++) {
    for (let j = 0; j < dim+2; j++) {

      let x = ((xoff + j * sz) % (width+sz)) - sz;
      if (x < -sz) x += width+sz;

      let y = ((yoff + i * sz) % (height+sz)) - sz;
      if (y < -sz) y += height+sz;

      rect(x, y, sz, sz);
      text(i * 10 + j, x + sz/2, y + sz/2);
    }
  }
}
rednoyz
fonte
Você também pode colocar if((mouseX < width && mouseX > 0)&&(mouseY < height && mouseY > 0))em mouseDragged()função de trabalhar apenas sobre tela arrastando
darcane
mais alguma coisa que você está procurando nesta resposta, @ michał-mi?
rednoyz
Eu estava respondendo ao pedido do entrevistador para o código adicional, que mais tarde foi eliminado
rednoyz