本文旨在帮助开发者解决在使用 p5.js 创建着色画笔时遇到的常见问题。我们将通过分析问题代码，提供修正后的示例代码，并详细解释关键步骤，确保你能够成功实现一个功能完善的着色画笔。文章涵盖了颜色选择、画笔大小调整、清空画布和保存图像等功能的实现。
问题分析
原始代码存在以下几个问题：
- draw() 函数使用不当： 在 draw() 函数中设置 brushColor = colorPicker.color(); 和 noStroke(); 会导致每一帧都重复设置颜色和禁用描边，这并不是画笔功能的正确实现方式。draw() 函数应该主要负责根据用户的交互绘制图形。
- keyTyped() 函数中的错误： 在 keyTyped() 函数中，清空画布和保存画布的代码实现不正确。清空画布应该使用 clear() 函数，保存画布应该使用 saveCanvas() 函数，并且应该直接使用 p 实例的函数。
- mouseDragged() 函数中的颜色设置： fill(colorPicker) 是错误的。应该使用 colorPicker.color() 获取颜色值。
- 坐标问题： 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);代码解释：
- sketch 函数： 使用 p5.js 的实例模式，将所有代码封装在 sketch 函数中，避免全局变量污染。
-
setup() 函数：
- p.createCanvas(600, 600); 创建一个 600x600 像素的画布。
- colorPicker = p.createColorPicker('red'); 创建一个颜色选择器，初始颜色为红色。
- colorPicker.position(0, 0); 设置颜色选择器的位置。
-
keyPressed() 函数：
- 监听键盘事件，当按下 = 键时，画笔大小增加 10%。
- 当按下 - 键时，画笔大小减少 10%。
- 当按下 c 键时，调用 p.clear() 清空画布。
- 当按下 s 键时，调用 p.saveCanvas() 保存画布为 myCanvas.jpg。
-
mouseDragged() 函数：
- color = colorPicker.color() 获取当前颜色选择器中的颜色。
- p.fill(color); 设置填充颜色为当前选择的颜色。
- p.stroke(color); 设置描边颜色为当前选择的颜色。
- p.ellipse(e.clientX, e.clientY, brushSize, brushSize / 2) 在鼠标拖动的位置绘制一个椭圆。e.clientX 和 e.clientY 获取鼠标在浏览器窗口中的坐标，避免坐标问题。
使用方法：
- 将上述代码复制到 HTML 文件中，确保引入 p5.js 库。
- 打开 HTML 文件，即可看到一个简单的着色画笔应用。
- 通过颜色选择器选择颜色，拖动鼠标即可绘制。
- 使用 = 和 - 键调整画笔大小。
- 使用 c 键清空画布。
- 使用 s 键保存画布。
注意事项
- 确保引入了 p5.js 库。
- 理解 p5.js 的实例模式，避免全局变量污染。
- 使用事件对象 e 传递的客户端坐标，避免坐标问题。
- 根据实际需求调整画笔大小和颜色。
- 可以根据需要添加更多的功能，例如调整画笔形状、添加背景颜色等。
总结
通过本文的讲解，你应该能够理解如何在 p5.js 中创建一个基本的着色画笔。 关键在于理解 p5.js 的事件处理机制，以及正确使用 p5.js 提供的函数。 通过不断实践和尝试，你可以创建出更加复杂和有趣的着色画笔应用。
