如何用圆圈替换光标，而不是在p5.js中将其绘制到画布上? [英] How can I replace my cursor with a circle instead of drawing it to canvas in p5.js?

问题描述

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

The problem: I'm trying to create a simple drawing app using p5.js. Instead of the standard cursor image, I'd like to show a circle at my cursor location that represents the size of the drawing brush.

潜在的解决方案1:使用p5固有的cursor()函数替换光标.

Potential solution 1: Replace the cursor using the cursor() function native to p5.

为什么不起作用: p5游标功能仅采用以下参数:

箭头，交叉，手动，移动，文本或等待，或图像的路径

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

因此，没有使用ellipse类替换光标的原生方法.

As such, there's no native way to replace the cursor using the ellipse class.

潜在的解决方案2:使用noCursor()函数，然后在光标位置绘制圆，同时绘制背景，例如:

Potential solution 2: Use the noCursor() function and then draw the circle at the cursor location, while also drawing the background, as such:

var brushSize = 50;

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


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

}

为什么不起作用:尽管此解决方案获得了预期的效果，即用画笔大小的圆圈替换了光标，但不断更新的背景使我无法实际使用我想刷的时候.

Why it doesn't work: While this solution gets the desired effect i.e. replacing the cursor with a circle the size of the brush, the constantly updating background prevents me from actually drawing to the canvas with the brush when I want to.

有什么方法可以替换光标而不实际将椭圆绘制到画布上吗?有什么方法可以保存然后立即在p5中重新加载画布?我找不到在API文档中搜索的方法.任何提示表示赞赏.

Is there some way I can replace the cursor without actually drawing the ellipse to the canvas? Is there any way to save and then instantly reload a canvas in p5? I couldn't find such a method searching through the API docs. Any hints are appreciated.

推荐答案

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

According to the reference, you can pass a URL into the cursor() function to set an image.

如果要使用绘制的图像，则必须提前绘制它们并将其保存到文件中，然后再使用这些文件.像这样:

If you want to use an image that you draw, you're going to have to draw them ahead of time and save them to files, and then use those files. Something like this:

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

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

Where ellipse-15.png is an image that you generated ahead of time, to match when brushSize is 15, for example.

顺便说一句P5.js只是设置了游标CSS属性.您可以在此处中了解更多信息.

Btw P5.js is just setting the cursor CSS property. You can read more about it here.

如果要使用noCursor()方法自己绘制椭圆，则可以将图形绘制到缓冲区(createGraphics()函数是您的朋友)，然后在每个帧的顶部绘制椭圆.我仍然可能会使用十字光标，因为如果您自己绘制它会有些烦人的滞后.

If you want to go with the noCursor() approach and draw the ellipse yourself, you could draw your drawing to a buffer (the createGraphics() function is your friend) and then draw the ellipse on top of that every frame. I'd still probably use a cross cursor just because there's going to be some annoying lag if you draw it yourself.

这篇关于如何用圆圈替换光标，而不是在p5.js中将其绘制到画布上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！