背景位于 draw() 函数中，为什么我无法绘制？ p5.js

Question

我正在 p5.js 上制作一个基本的绘图应用程序。

我已将我的背景置于绘图功能下，因为我已插入滑块来更改背景的 rgb。

一旦我这样做了，我就不能画画了。我有一个 mousePressed 函数，当我将背景移动到 setup() 时该函数起作用。

知道为什么会这样吗？

let brushSize;
let white;
let redB;
let yellowB;
let blueB;
let blackB;
let greenB;
let pinkB;
let brownB;
let brushColor;


let rSlide, gSlide, bSlide;
let r, g, b;
let imgLego;
let imgBrush;
let fontHead;
let fontMid;
let x;

function preload() {
  imgLego = loadImage("images/lego.png");
  imgBrush = loadImage("images/paint_brush.png");
  fontHead = loadFont("fonts/shizuru.ttf");
  fontMid = loadFont("fonts/concertOne.ttf");
  
}// close preload function

function setup() {
  x = 10;
  createCanvas(1000, 600);
  noStroke();

  // create the slider for the brush size
  brushSize = createSlider(1, 100, 20);

  // create the sliders for red, gree, blue values
  rSlide = createSlider(0, 255, 255);
  gSlide = createSlider(0, 255, 255);
  bSlide = createSlider(0, 255, 255);

  // position the sliders
  rSlide.position(x, x * 20);
  gSlide.position(x, x * 22);
  bSlide.position(x, x * 24);
  brushSize.position(x, x * 26);

  // variables to hold the colour (background)
  r = 255;
  g = 255;
  b = 255;
  
  // color variables for brush
  redB = color(255);
  whiteB = color(255,0,0);
  yellowB = color(246, 236, 54);
  blueB = color(0,0,255);
  blackB = color(0);
  greenB = color(0,170,35);
  pinkB = color(255,53,184);
  brownB = color(155,103,60);
  brushColor = redB;
}

function draw() {
  
 
  background(r, g, b);
  noStroke();
  
  // poisition the text & value of slider
  textAlign(LEFT, TOP);
  fill(120, 120, 255);
  textFont(fontMid);
  textSize(15);
  text("red : " + rSlide.value(), x*2 + rSlide.width, x*20);
  text("green : " + gSlide.value(), x*2 + gSlide.width, x*22);
  text("blue : " + bSlide.value(), x*2 + bSlide.width, x*24);
  text("brush : ", x*2 + bSlide.width, x*26);

  // read the value of the slider and store it in a variable
  r = rSlide.value();
  g = gSlide.value();
  b = bSlide.value();

  // create & position the default brush to follow the mouse
  //ellipse(mouseX, mouseY, brushSize.value(), brushSize.value());
  
  // customise "background" text
  fill(0);
  textSize(20);
  text("BACKGROUND", 20, 180);
  
  // red "navbar"
  fill(255,0,0)
  rect(0,0,1000,120,0,0,50,0);
  
  // customse "sketch" text
  fill(255)
  textFont(fontHead);
  textSize(40);
  text("SKETCH", 180, 10)
  
  // images
  image(imgBrush, 930, 40, 40, 40);
  image(imgLego, 20, 15, 160, 90);
  
  //**lego block top right corner**//
  stroke(0);
  strokeWeight(3)
  // yellow block
  fill(246, 236, 54);
  rect(748,18,164,84,5)
  
  // paint buttons
  ellipseMode(CENTER);
  // white button
  fill(whiteB);
  ellipse(770,40,30);
  // red button
  fill(redB);
  ellipse(810,40,30);
  // yellow button
  fill(yellowB);
  ellipse(850,40,30);
  // blue button
  fill(blueB);
  ellipse(890,40,30);
  // black button
  fill(blackB);
  ellipse(770,80,30);
  // green button
  fill(greenB);
  ellipse(810,80,30);
  // pink button
  fill(pinkB);
  ellipse(850,80,30);
  // brown button
  fill(brownB);
  ellipse(890,80,30);
}


// create function to allow the mosue to draw the relevant colours from the lego bloack colour paletter - top right corner

function mouseDragged() {
  stroke(brushColor);
  strokeWeight(5);
  line(mouseX,mouseY,pmouseX,pmouseY);
}

Answer 1

注意draw函数是连续执行的

事情是这样的：

mouseDragged画一条线
draw 函数在下一帧运行，函数中的任何内容都会在顶部重新绘制

因此，如果 draw 函数中有一个 background() 调用，它将在之前绘制的任何内容之上重新绘制背景。因此操作顺序在处理中非常重要。

在您的草图中，您可以在调用 background() 之后在绘图循环内绘制它，而不是在 mouseDragged 中绘制线条。例如：

// Globally accessed variable, declared at the top
// Stores the metadata for all the lines drawn in mouseDragged
let drawnLines = []

function mouseDragged() {
  drawnLines.push({
    mouseX: mouseX,
    mouseY: mouseY,
    pmouseX: pmouseX,
    pmouseY: pmouseY,
  });
}

function draw() {
  // Draw the background
  background(255, 255, 255);

  // Draw the lines drawn by the user
  stroke(brushColor);
  strokeWeight(5);
  drawnLines.forEach(drawnLine => {
    line(
      drawnLine.mouseX,
      drawnLine.mouseY,
      drawnLine.pmouseX,
      drawnLine.pmouseY);
  });
}

背景位于 draw() 函数中，为什么我无法绘制？ p5.js

Why can't I draw when background is located in the draw() function? p5.js

javascript

drawing

function

p5.js