如果 p5 在不断重绘时滞后，我该怎么办?

Question

首先，我对p5.js完全陌生。所以我必须自己做一些绘图功能。其中之一是简单的线条。我已经弄清楚了所有这些，它通过拖动鼠标进行绘制(获取单击和释放的坐标(。问题是，如果我把它放在 draw(( 中，它开始滞后整个网站，因为它不断地重绘它。有没有办法在画线后暂停 draw(( 函数并在我开始画新线时恢复它？
代码如下：

let x1s;
let x2s;
let y1s;
let y2s;
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(0);
  drawLine(x1s, y1s, x2s, y2s, 255, 255, 255);
}
function putPixel(x, y, r, g, b) {
  loadPixels();
  let rgb = color(r, g, b);
  let d = pixelDensity();
  for (let i = 0; i < d; i++) {
    for (let j = 0; j < d; j++) {
      // loop over
      index = 4 * ((y * d + j) * width * d + (x * d + i));
      pixels[index] = red(rgb);
      pixels[index + 1] = green(rgb);
      pixels[index + 2] = blue(rgb);
      pixels[index + 3] = alpha(rgb);
      updatePixels();
    }
  }
}
function drawLineLow(x1, y1, x2, y2, r, g, b) {
  dx = x2 - x1;
  dy = y2 - y1;
  yi = 1;
  if (dy < 0) {
    yi = -1;
    dy = -dy;
  }
  D = 2 * dy - dx;
  y = y1;
  for (x = x1; x < x2; x++) {
    putPixel(x, y, r, g, b);
    if (D > 0) {
      y = y + yi;
      D = D - 2 * dx;
    }
    D = D + 2 * dy;
  }
}
function drawLineHigh(x1, y1, x2, y2, r, g, b) {
  dx = x2 - x1;
  dy = y2 - y1;
  xi = 1;
  if (dx < 0) {
    xi = -1;
    dx = -dx;
  }
  D = 2 * dx - dy;
  x = x1;
  for (y = y1; y < y2; y++) {
    putPixel(x, y, r, g, b);
    if (D > 0) {
      x = x + xi;
      D = D - 2 * dy;
    }
    D = D + 2 * dx;
  }
}
function drawLine(x1, y1, x2, y2, r, g, b) {
  if (abs(y2 - y1) < abs(x2 - x1)) {
    if (x1 > x2)
      drawLineLow(x2, y2, x1, y1, r, g, b);
    else
      drawLineLow(x1, y1, x2, y2, r, g, b);
  } else {
    if (y1 > y2)
      drawLineHigh(x2, y2, x1, y1, r, g, b);
    else
      drawLineHigh(x1, y1, x2, y2, r, g, b);
  }
}
function mousePressed() {
  x1s = mouseX;
  y1s = mouseY;
}
function mouseReleased() {
  x2s = mouseX;
  y2s = mouseY;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

由于您只需要在点的坐标发生变化时才需要重新绘制线条，因此您可以在drawing true而不是false时执行此操作。这样，画布将在不绘制时处于空闲状态，并且仅在实际需要时才进行重绘。

此外，p5.js本身提供了基本的形状绘制功能，因此您可以使用line()来绘制线条。

下面是代码的简化版本：

let x1s;
let x2s;
let y1s;
let y2s;
let drawing = false;
function setup() {
  createCanvas(400, 400);
  background(0);
}
function draw() {
  if (drawing) {
    background(0);
    stroke(255);
    line(x1s, y1s, x2s, y2s);
  }
}
function mousePressed() {
  x1s = x2s = mouseX;
  y1s = y2s = mouseY;
  drawing = true;
}
function mouseDragged() {
    x2s = mouseX;
    y2s = mouseY;
}
function mouseReleased() {
  drawing = false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>