如何将光标替换为圆圈而不是将其绘制到 p5.js 中的 canvas？

Question

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

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

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

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

因此，没有使用椭圆替换光标的本机方法 class。

方案二：使用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() 函数是您的朋友），然后在上绘制椭圆最重要的是每一帧。我仍然可能会使用十字光标，因为如果你自己画的话会有一些恼人的滞后。

Answer 2

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

如何将光标替换为圆圈而不是将其绘制到 p5.js 中的 canvas？

How can I replace my cursor with a circle instead of drawing it to canvas in p5.js?

javascript

rendering

canvas

p5.js