backgroun yang dapat diseret

12

Saya ingin mencapai sesuatu seperti hambatan tak terbatas seperti yang ada di Konva. Adakah yang bisa membantu saya dengan ini. Saya mencoba hal-hal varius tetapi tidak ada yang ok. Saya baru di p5js dan javascript. Tolong untuk petunjuk. Hanya elemen ini yang mencegah saya menyelesaikan seluruh proyek.

var grid;
var current_img;
var BgCat1 = [];
var layerOne;
let show_grid = false;
Michał Mi
sumber
2
Saya bingung apa yang ingin Anda lakukan. Apakah Anda ingin grid dapat diseret seperti contoh, tanpa batas?
Quillbert Q.
ya .. saya ingin grid dapat diseret seperti contohnya
Michał Mi

Jawaban:

7

Mungkin ada solusi yang lebih elegan, tetapi di sini saya menggambar sel ekstra di setiap sisi grid untuk menangani sampulnya, sehingga grid 12x12 dengan 10x10 terlihat. Lihat dijalankan di sini: 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
sumber
Anda juga dapat menempatkan if((mouseX < width && mouseX > 0)&&(mouseY < height && mouseY > 0))pada mouseDragged()fungsi untuk bekerja hanya pada kanvas menyeret
darcane
hal lain yang Anda cari dalam jawaban ini, @ michał-mi?
rednoyz
Saya menanggapi permintaan kode tambahan si penanya, yang kemudian dihapus
rednoyz