使光标成为自绘图像 [英] Make the cursor a self-drawn image

问题描述

我有一个绘画应用程序，我已经在 processing.js 中从头编写了程序，并将其合并到我的GitHub页面的markdown代码中。

I have a paint application program I have programmed from scratch in processing.js and incorporated it into my markdown code on my GitHub page.

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

This means I would prefer to not use CSS (I would have to link to a JavaScript program that creates a link element to the CSS file and appends it to the head).

在绘画程序中，有一个只绘制背景的橡皮擦，但我希望它看起来更像是他们通过将光标更改为橡皮擦而使用的橡皮擦当他们选择了橡皮擦时。我如何实现呢？

In the paint program, there is an eraser that just paints the background, but I want it to look more like they are using an eraser by changing the cursor to the eraser when they have the eraser selected. How could I implement this?

在自定义光标图像CSS ，它必须是图像，但我想要在文件中调用的函数，这样我就可以总是更新它。我也想使用JavaScript，而不是CSS。

At Custom Cursor Image CSS, it needs to be an image, but I want a function that I call inside the file so I can always update it. I also would like to use JavaScript, not CSS.

我已阅读 https://processing.org/tutorials/interactivity/ ，但是自定义光标没有任何内容，只是命名的光标和图像。

I have read up on https://processing.org/tutorials/interactivity/ but there is nothing in there about custom cursors, just named ones and images.

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

I am using the createGraphics function but I can't get it to work as a cursor: http://processingjs.org/reference/createGraphics_/

我在这些地方托管了该程序

I host this program in these places

• 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

• 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

推荐答案

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

One approach is to set the cursor to none which will hide the cursor, and then draw the cursor however you want inside your Processing sketch. Here's a very basic example:

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

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

This will show your cursor as an ellipse.

另一种方法可能是使用数据URI 。您必须将图形转换为64位带内衬的图像，然后将其传递到CSS中。我还没有实际测试过。

Another approach might be to use a data URI. You'd have to convert your drawing into a 64-bit endoded image, and then pass that into the CSS. I haven't actually tested this.

这篇关于使光标成为自绘图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！