Question

问题：我正在尝试使用p5.js创建一个简单的绘图应用。我想在光标位置显示一个代表绘图笔刷大小的圆圈，而不是标准的光标图像。

潜在解决方案1：使用p5原生的cursor()函数替换光标。

为何不起作用：p5 cursor function仅采用以下参数：

ARROW，CROSS，HAND，MOVE，TEXT或WAIT，或图片路径

因此，没有使用椭圆类替换光标的原生方法。

潜在解决方案2：使用noCursor()功能，然后在光标位置绘制圆圈，同时绘制背景，如下：

var brushSize = 50;

function setup() {
  createCanvas(1080,720);
  noCursor();
}


function draw() {
  background(100);
  ellipse(mouseX,mouseY,brushSize);

}

为什么它不起作用：虽然此解决方案获得了所需的效果，即用光标替换光标，但不断更新的背景会阻止我实际绘制到画布上我想要刷。

有没有办法在没有将椭圆实际绘制到画布的情况下替换光标？有没有办法保存，然后立即重新加载p5中的画布？我找不到这样的方法来搜索API文档。任何提示都表示赞赏。

Answer 1

根据the reference，您可以将网址传递到cursor()功能以设置图片。

如果您想使用您绘制的图像，则必须提前绘制它们并将它们保存到文件中，然后使用这些文件。像这样：

cursor('images/ellipse-15.png');

其中ellipse-15.png是您提前生成的图片，例如，brushSize为15时匹配。

Btw P5.js只是设置光标CSS属性。您可以阅读更多相关信息here。

如果您想使用noCursor()方法并自己绘制椭圆，可以将绘图绘制到缓冲区（createGraphics()函数是您的朋友），然后在上面绘制椭圆每一帧。我可能仍然使用十字光标，因为如果你自己绘制它会有一些烦人的延迟。

Answer 2

在画布容器内创建一个圆形DIV，并将其显示在实际画布的顶部。

如何用圆圈替换光标而不是在p5.js中将其绘制到画布？

2 个答案: