Javascript p5.js：在绘图外部绘制元素

我的问题很简单。在p5.js中，有一个draw函数。我认为您只能绘制元素（如此函数内部的矩形）。我想在一个函数中画一个矩形，这个函数在draw之外。（仅由某些事件触发）。有人知道我该怎么做吗

编辑：仅使用rect（x、y、w、h）在外部绘制不起作用
还尝试在draw（）中创建this.drawRect=function（）{}，也没有运气

TL；博士：

您的矩形可能是在您看到它之前绘制的：）

参考：

---

让我们假设您在鼠标按下光标时要绘制一个什么样的框。根据您的用例，您可能希望：

• 不断地重画一切

  // try changing 60 to eg. 1, and click fast while moving the cursor
  // - you'll see it will still only update once a second
  function setup() {
    createCanvas(400, 400)
    frameRate(60) // make draw be called 60 times/s (default?)
  }
  // keeping "state" as an object is a common practice... 
  const state = {x: 0, y: 0} // initialize state
  // ...then it can be updated whenever, eg. on interaction,
  //  without caring about the drawing
  function mousePressed() {
    // update state on interaction
    state.x = mouseX; state.y = mouseY
  }
  // ...the screen will then update independently
  function draw() {
    // (avoid changing the state here)
    background(220) // clear the canvas
    rect(state.x, state.y, 50, 50) // draw according to state
  }
  // by separating "logic" (eg. changing the state) and drawing:
  //  - a "game" will "behave" the same even at different fps,
  //    important for multiplayer etc.
  //  - code will be simpler to reason about and work with, etc
  

• 仅在必要时重新绘制

  // using noLoop() in setup, draw() will only be called once initially
  // then, either use rect in eg. mousePressed, or:
  // keep using state, but manually call redraw() after changing the state
  pros = "more efficient if less redraws then eg. 60fps is needed"
  cons = "need to know when to invoke redraw,"
       + "possibly makes code a bit more complicated"
  

  // using either point 1 or 2, but in addition keeps track of the
  // previous state, then, only redraws the part of the screen necessary
  // eg. instead of calling background(200), which is the same as:
  fill(200); rect(0,0,width,hight); fill(255) // to clear the screen (and restore fill color)
  fill(200); rect(oldState.x,oldState.y,50,50); fill(255) // clearing only what was previously drawn
  /* followed by */ rect(state.x,state.y,50,50); // as normal
  // (assumes noStroke() is called in setup)
  pros = "possibly much more efficient if large canvas"
  cons = "possibly more complicated"
  

• 只需要重新绘制必要的内容

  // using noLoop() in setup, draw() will only be called once initially
  // then, either use rect in eg. mousePressed, or:
  // keep using state, but manually call redraw() after changing the state
  pros = "more efficient if less redraws then eg. 60fps is needed"
  cons = "need to know when to invoke redraw,"
       + "possibly makes code a bit more complicated"
  

  // using either point 1 or 2, but in addition keeps track of the
  // previous state, then, only redraws the part of the screen necessary
  // eg. instead of calling background(200), which is the same as:
  fill(200); rect(0,0,width,hight); fill(255) // to clear the screen (and restore fill color)
  fill(200); rect(oldState.x,oldState.y,50,50); fill(255) // clearing only what was previously drawn
  /* followed by */ rect(state.x,state.y,50,50); // as normal
  // (assumes noStroke() is called in setup)
  pros = "possibly much more efficient if large canvas"
  cons = "possibly more complicated"