พื้นหลังที่ลากได้


12

ฉันต้องการประสบความสำเร็จในการลากอย่างไม่มีที่สิ้นสุดเหมือนที่ Konva js ทุกคนสามารถช่วยเหลือฉันได้ ฉันลองสิ่งต่าง ๆ แต่ไม่ใช่ของพวกเขาก็โอเค ฉันใหม่ใน p5js และ javascript กรุณาให้คำแนะนำใด ๆ เฉพาะองค์ประกอบนี้ทำให้ฉันไม่สามารถทำโครงการทั้งหมดให้เสร็จ

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

2
ฉันสับสนในสิ่งที่คุณพยายามจะทำ คุณต้องการให้ลากตารางได้อย่างเช่นตัวอย่างหรือไม่?
Quillbert Q.

ใช่ .. ฉันต้องการให้ลากตารางได้อย่างเช่น
Michał Mi

คำตอบ:


7

อาจมีวิธีแก้ปัญหาที่สง่างามกว่า แต่ที่นี่ฉันวาดเซลล์พิเศษที่ด้านข้างของตารางแต่ละเส้นเพื่อจัดการกับการพันดังนั้นตาราง 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);
    }
  }
}

นอกจากนี้คุณยังสามารถใส่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.