keyIsPressed 在点击鼠标的画布上书写 p5js

Question

我正在开发一个功能，该功能使用户可以在单击鼠标的情况下在屏幕上书写，但是存在一些问题。

首先： keyIsPressed 被执行多次，使得每个键单击一次就会出现多次。

其次：在将 mouseX 和 mouseY 设置回 -1 之前，它只允许打印单个字母。

这是我的代码：

function setup() {
  createCanvas(400, 400);
  var startMouseX = -1;
  var startMouseY = -1;
  var drawing = false;
}

function draw() {
  background(220);
  if(mouseIsPressed)
    {
       startMouseX = mouseX;
       startMouseY = mouseY;

       drawing = true;
    }
    else if(keyIsPressed)
        {
            textSize(20);
            text(key,startMouseX,startMouseY);
            startMouseX += textWidth(key);            
        }
    else{
        drawing = false;
        startMouseX = -1;
        startMouseY = -1;
    }

}

任何帮助将不胜感激，谢谢

Answer 1

我认为使用“绘图”变量的方法是有效的。
但是您可以使用 keyTyped() 函数，而不是在绘图中绘制新字母。以同样的方式，您可以使用 mouseMoved() 重置“drawing”变量

var drawing = true;

function setup() {
    createCanvas(400, 400);
}

function keyTyped() {
    if (drawing) text(key, mouseX, mouseY);
    drawing = false;
}

function mouseMoved() {
    drawing = true;
  }

Answer 2

我的解决方案：

let drawing = false;
let drawMouseX = -1;
let drawMouseY = -1;


function setup() {
  
  createCanvas(400, 400);
  
  background("white");
  
}

function keyTyped(){
  
  if(!drawing){
  
    drawing = true;
    
    drawMouseX = mouseX;
    drawMouseY = mouseY;
  
  }
  
  text(key, drawMouseX, drawMouseY)
    
  drawMouseX += textWidth(key);
  
}

function mouseMoved(){
  
  drawing = false;
  
}

这使得您输入的内容永久显示在画布上。这是你想要的吗？如果没有，事情就会困难得多。