使光标成为自绘图像

Question

我有一个绘画应用程序，我在 processing.js 中从头开始编写并将其合并到我的 GitHub 页面上的降价代码中。

这意味着我宁愿不使用 CSS（我必须 link 到一个 JavaScript 程序，该程序创建一个 link 元素到 CSS 文件并将其附加到文件头）。

在绘画程序中，有一个橡皮擦仅用于绘制背景，但我希望它看起来更像他们在使用橡皮擦，方法是在他们选择了橡皮擦后将光标更改为橡皮擦。我该如何实施？

研究 - 我已经尝试过的

在 Custom Cursor Image CSS，它需要是一个图像，但我想要一个我在文件中调用的函数，这样我就可以随时更新它。我也想使用 JavaScript，而不是 CSS。

我已经阅读了 https://processing.org/tutorials/interactivity/ 但其中没有关于自定义光标的内容，只有命名的光标和图像。

更新

我正在使用 createGraphics 函数，但无法将其用作游标：http://processingjs.org/reference/createGraphics_/

链接

我在这些地方举办这个节目

• https://knowledgeablekangaroo.github.io/paint-a-picture-backup/
• https://www.khanacademy.org/computer-programming/paint-a-picture-v219/4631918938554368
• https://www.khanacademy.org/computer-programming/paint-a-picture/5366591758565376

Answer 1

一种方法是将光标设置为 none，这将隐藏光标，然后在 Processing 草图中根据需要绘制光标。这是一个非常基本的例子：

void draw(){
  background(32);
  ellipse(mouseX, mouseY, 20, 20);
}

这会将您的光标显示为椭圆。

另一种方法可能是使用 data URI。您必须将绘图转换为 64 位内嵌图像，然后将其传递到 CSS。我还没有真正测试过这个。