javascript - 在 p5.js 中如何将光标替换为圆圈而不是将其绘制到 Canvas 上？

Question

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

可能的解决方案 1: 使用 p5 原生的 cursor() 函数替换光标。

为什么它不起作用: p5 cursor function只接受以下参数:

ARROW, CROSS, HAND, MOVE, TEXT, or WAIT, or path for image

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

可能的解决方案 2: 使用 noCursor() 函数，然后在光标位置绘制圆圈，同时绘制背景，如下所示:

var brushSize = 50;

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


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

}

为什么它不起作用:虽然这个解决方案获得了预期的效果，即用画笔大小的圆圈替换光标，但不断更新的背景阻止我实际绘制到 Canvas 上想刷的时候刷。

有什么方法可以在不实际将椭圆绘制到 Canvas 的情况下替换光标？有什么方法可以保存然后立即重新加载 p5 中的 Canvas 吗？我在 API 文档中找不到这样的方法。任何提示表示赞赏。

Answer 1

根据 the reference ，您可以将 URL 传递到 cursor() 函数以设置图像。

如果你想使用你绘制的图像，你将不得不提前绘制它们并将它们保存到文件中，然后使用这些文件。像这样:

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

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

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

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