可拖动背景

Question

我想实现像 Konva js 中那样的无限拖动，谁能帮我解决这个问题。我尝试了各种各样的东西，但没有一个是好的。我是 p5js 和 javascript 的新手。请提供任何提示。只有这个因素阻止我完成整个项目。

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

Answer 1

可能有更优雅的解决方案，但这里我在网格的每一侧都绘制了一个额外的单元格来处理环绕，因此 12x12 网格可见 10x10。在此处查看运行：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);
    }
  }
}

可拖动背景

draggable backgroun

javascript

processing

p5.js