在 p5.js 中创建着色画笔：问题排查与解决方案

本文旨在帮助开发者解决在使用 p5.js 创建着色画笔时遇到的常见问题。我们将通过分析问题代码，提供修正后的示例代码，并详细解释关键步骤，确保你能够成功实现一个功能完善的着色画笔。文章涵盖了颜色选择、画笔大小调整、清空画布和保存图像等功能的实现。

问题分析

原始代码存在以下几个问题：

1. draw() 函数使用不当： 在 draw() 函数中设置 brushColor = colorPicker.color(); 和 noStroke(); 会导致每一帧都重复设置颜色和禁用描边，这并不是画笔功能的正确实现方式。draw() 函数应该主要负责根据用户的交互绘制图形。
2. keyTyped() 函数中的错误： 在 keyTyped() 函数中，清空画布和保存画布的代码实现不正确。清空画布应该使用 clear() 函数，保存画布应该使用 saveCanvas() 函数，并且应该直接使用 p 实例的函数。
3. mouseDragged() 函数中的颜色设置： fill(colorPicker) 是错误的。应该使用 colorPicker.color() 获取颜色值。
4. 坐标问题： mouseX 和 mouseY 可能存在问题，建议使用事件对象 e 传递的客户端坐标 e.clientX 和 e.clientY。

解决方案

下面提供一个修正后的 p5.js 着色画笔示例代码，并详细解释每个部分的功能：

const sketch = function(p) {

  let colorPicker;
  let brushSize = 20;

  p.setup = function() {
    p.createCanvas(600, 600);
    colorPicker = p.createColorPicker('red');
    colorPicker.position(0, 0);
  };



  p.keyPressed = function(e) {
    let key = e.key;
    if (key === '=') brushSize += brushSize * 0.1;
    else if (key === '-') brushSize -= brushSize * 0.1;
    else if (key === 'c') p.clear();
    else if (key === 's') p.saveCanvas('myCanvas', 'jpg');
  }

  p.mouseDragged = function(e) {
    color = colorPicker.color()
    p.fill(color);
    p.stroke(color);
    p.ellipse(e.clientX, e.clientY, brushSize, brushSize / 2)
  }

};

let myp5 = new p5(sketch);

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

代码解释：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

1. sketch 函数： 使用 p5.js 的实例模式，将所有代码封装在 sketch 函数中，避免全局变量污染。
2. setup() 函数：
   • p.createCanvas(600, 600); 创建一个 600x600 像素的画布。
   • colorPicker = p.createColorPicker('red'); 创建一个颜色选择器，初始颜色为红色。
   • colorPicker.position(0, 0); 设置颜色选择器的位置。
3. keyPressed() 函数：
   • 监听键盘事件，当按下 = 键时，画笔大小增加 10%。
   • 当按下 - 键时，画笔大小减少 10%。
   • 当按下 c 键时，调用 p.clear() 清空画布。
     • 当按下 s 键时，调用 p.saveCanvas() 保存画布为 myCanvas.jpg。
4. mouseDragged() 函数：
   • color = colorPicker.color() 获取当前颜色选择器中的颜色。
   • p.fill(color); 设置填充颜色为当前选择的颜色。
   • p.stroke(color); 设置描边颜色为当前选择的颜色。
   • p.ellipse(e.clientX, e.clientY, brushSize, brushSize / 2) 在鼠标拖动的位置绘制一个椭圆。e.clientX 和 e.clientY 获取鼠标在浏览器窗口中的坐标，避免坐标问题。

使用方法：

1. 将上述代码复制到 HTML 文件中，确保引入 p5.js 库。
2. 打开 HTML 文件，即可看到一个简单的着色画笔应用。
3. 通过颜色选择器选择颜色，拖动鼠标即可绘制。
4. 使用 = 和 - 键调整画笔大小。
5. 使用 c 键清空画布。
6. 使用 s 键保存画布。

注意事项

• 确保引入了 p5.js 库。
• 理解 p5.js 的实例模式，避免全局变量污染。
• 使用事件对象 e 传递的客户端坐标，避免坐标问题。
• 根据实际需求调整画笔大小和颜色。
• 可以根据需要添加更多的功能，例如调整画笔形状、添加背景颜色等。

总结

通过本文的讲解，你应该能够理解如何在 p5.js 中创建一个基本的着色画笔。 关键在于理解 p5.js 的事件处理机制，以及正确使用 p5.js 提供的函数。 通过不断实践和尝试，你可以创建出更加复杂和有趣的着色画笔应用。

以上就是在 p5.js 中创建着色画笔：问题排查与解决方案的详细内容，更多请关注php中文网其它相关文章！