перетягується backgroun


12

Я хочу досягти чогось на кшталт нескінченного перетягування, як той у Konva js. Хтось може мені в цьому допомогти. Я пробую різні речі, але не з них було нормально. Я новий у p5js та javascript. Будь ласка, будь-які підказки. Тільки цей елемент заважає мені завершити весь проект.

var grid;
var current_img;
var BgCat1 = [];
var layerOne;
let show_grid = false;

2
Я розгублений у тому, що ви намагаєтесь зробити. Ви хочете, щоб сітка була нескінченною, як приклад, нескінченно?
Квілберт Q.

так .. я хочу, щоб сітка була перетягуваною, як приклад
Michał Mi

Відповіді:


7

Можливо, є більш елегантне рішення, але тут я малюю додаткову клітинку з кожної сторони сітки для обробки обмотки, тому видно сітку 12х12 розміром 10х10. Дивіться його тут: 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);
    }
  }
}

Ви також можете помістити if((mouseX < width && mouseX > 0)&&(mouseY < height && mouseY > 0))на mouseDragged()функції роботи тільки на полотні тягне
darcane

що-небудь ще ви шукаєте у цій відповіді, @ michał-mi?
партйз

Я відповідав на запитання запитувача щодо додаткового коду, який згодом було видалено
організ
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.