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;

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

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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.