在p5.js中实现绘画时切换圆形、矩形画笔的方法是什么？

解答 #

是否需要新增变量？ #

需要，你至少要新增1个全局变量存储当前选中的画笔类型，还可以按需补充画笔大小这类扩展变量，本次实现我们新增brushType（存储画笔类型）和brushSize（存储画笔尺寸）两个变量即可。

实现逻辑 #

• 在原有颜色选择区下方新增画笔类型选择预览块，点击对应块即可切换画笔类型
• 新增画笔选中状态提示，当前选中的画笔类型块会显示高亮边框
• 修改绘画触发逻辑，鼠标按下时根据当前选中的画笔类型调用对应绘图API完成绘制

修改后完整代码 #

var brushColor;
// 新增画笔相关变量
var brushType = 'circle'; // 可选值：circle/rect
var brushSize = 10; // 画笔尺寸

function setup() {
 createCanvas(600, 600);
 strokeWeight(2);
 background(255);
 brushColor = color(50);
}

function draw() {
 if (mouseIsPressed) {
   // 左侧功能区点击判断
   if (mouseX <= 50) {
     // 颜色选择逻辑
     if (mouseY <= 50) {
       brushColor = color(0, 0, 255);
     } else if (mouseY <= 100) {
       brushColor = color(66, 244, 194);
     } else if (mouseY <= 150) {
       brushColor = color(255, 0, 199);
     } else if (mouseY <= 200) {
       brushColor = color(249, 99, 0);
     } 
     // 新增画笔类型选择逻辑
     else if (mouseY <= 250) {
       brushType = 'circle';
     } else if (mouseY <= 300) {
       brushType = 'rect';
     }
   } 
   // 画布区域绘画逻辑
   else {
     fill(brushColor);
     stroke(brushColor);
     if(brushType === 'circle'){
       ellipse(mouseX, mouseY, brushSize, brushSize);
     } else if(brushType === 'rect'){
       rect(mouseX - brushSize/2, mouseY - brushSize/2, brushSize, brushSize);
     }
   }
 }

 // 绘制颜色选择块
 stroke(color(0));
 fill(0, 0, 255);
 rect(0, 0, 50, 50);
 fill(66, 244, 194);
 rect(0, 50, 50, 50);
 fill(255, 0, 199);
 rect(0, 100, 50, 50);
 fill(249, 99, 0);
 rect(0, 150, 50, 50);
 
 // 绘制画笔选择块
 fill(255);
 // 圆形画笔块，选中时加红色高亮边框
 stroke(brushType === 'circle' ? color(255,0,0) : color(0));
 rect(0, 200, 50, 50);
 fill(0);
 ellipse(25, 225, 20, 20);
 // 矩形画笔块，选中时加红色高亮边框
 stroke(brushType === 'rect' ? color(255,0,0) : color(0));
 rect(0, 250, 50, 50);
 fill(0);
 rect(15, 265, 20, 20);
}

操作说明 #

点击左侧上方4个色块可切换绘画颜色，点击左侧下方两个图形块可切换圆形/矩形画笔，在右侧空白区域按住鼠标即可绘画。

内容的提问来源于stack exchange，提问作者user13571954