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.