드래그 가능한 backgroun


12

Konva js와 같은 무한한 드래그와 같은 것을 얻고 싶습니다. 누구든지 나를 도울 수 있습니까? 나는 varius 일을 시도하지만 그중 아무것도 아닙니다. p5js와 자바 스크립트의 새로운 기능입니다. 힌트가 있으면 알려주세요. 이 요소만으로 전체 프로젝트를 완료 할 수 없습니다.

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

2
당신이하려는 일에 대해 혼란 스럽습니다. 예제처럼 그리드를 드래그 할 수있게 하시겠습니까?
Quillbert Q.

예 .. 그리드를 예제처럼 드래그 할 수 있기를 원합니다
Michał Mi

답변:


7

더 우아한 솔루션이있을 수 있지만 여기서는 랩 어라운드를 처리하기 위해 그리드의 각면에 여분의 셀을 그리므로 10x10이 보이는 12x12 그리드입니다. 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?
rednoyz

추가 코드에 대한 질문자의 요청에 응답 한 후 나중에 삭제되었습니다.
rednoyz
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.