ziehbarer Hintergrund


12

Ich möchte so etwas wie einen unendlichen Widerstand wie den in Konva erreichen. Kann mir jemand dabei helfen? Ich probiere verschiedene Dinge aus, aber keine davon war in Ordnung. Ich bin neu in p5js und Javascript. Bitte für Hinweise. Nur dieses Element hindert mich daran, das gesamte Projekt abzuschließen.

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

2
Ich bin verwirrt darüber, was Sie versuchen zu tun. Möchten Sie, dass das Raster wie im Beispiel unendlich ziehbar ist?
Quillbert Q.

ja .. ich möchte, dass das Gitter wie im Beispiel ziehbar ist
Michał Mi

Antworten:


7

Es mag eine elegantere Lösung geben, aber hier zeichne ich auf jeder Seite des Gitters eine zusätzliche Zelle, um den Umlauf zu handhaben, sodass ein 12x12-Gitter mit 10x10 sichtbar ist. Sehen Sie es hier: 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);
    }
  }
}

Sie können auch setzen if((mouseX < width && mouseX > 0)&&(mouseY < height && mouseY > 0))auf mouseDragged()Drag - Funktion zur Arbeit nur auf Leinwand
darcane

Was suchen Sie sonst noch in dieser Antwort, @ michał-mi?
Rednoyz

Ich antwortete auf die Anfrage des Fragestellers nach zusätzlichem Code, der später gelöscht wurde
rednoyz
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.