如何在p5.js中用一个圆形替代鼠标光标而不是将其绘制到画布上？

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文档中没有找到这样的方法。任何提示都将不胜感激。

- Skylar Kennedy

Answer 1

根据参考资料，您可以将URL传递到cursor()函数中以设置图像。

如果您想使用自己绘制的图像，则需要预先绘制并保存到文件中，然后使用这些文件。代码示例如下：

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

这里的ellipse-15.png是您提前生成的图像，以匹配例如brushSize为15时的情况。

顺便说一下，P5.js只是设置光标CSS属性。您可以在这里阅读更多相关信息。

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

- Kevin Workman

---

嘿，凯文，谢谢你的回复！你知道是否有办法使用createGraphics()生成一个循环缓冲区，还是它总是会成为一个矩形对象挡住画布的一部分？ - Skylar Kennedy

实际上，我想到了一个不同的解决方案，但是遇到了另一个完全不同的问题。我使用了 createGraphics() 来跨越整个画布，在新缓冲区的顶部渲染光标椭圆并重新生成缓冲区的背景。我试图使背景相对于画布透明，但我只能使其相对于自身透明。您知道有没有一种解决方法，可以重新创建透明背景，从而实现预期的结果？ - Skylar Kennedy

@SkylarKennedy 请在单独的帖子中提出后续问题。我不明白你所说的“相对于自身透明”的意思。从createGraphics()返回的缓冲区默认情况下是透明的。 - Kevin Workman

谢谢Kevin，我在这里提出了后续问题：https://stackoverflow.com/questions/49710913/how-can-i-make-backgrounds-in-p5-js-transparent-but-continue-to-hide-elements-dr - Skylar Kennedy

Answer 2

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

- artur bień

---

欢迎。请扩展您的答案，包含更多信息和代码，以展示如何完成此操作。目前，您的答案更像是一条评论，存在被删除的风险。请参见[答案]。 - Bugs