问题
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.
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?
Research - What I have already Tried
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.
I have read up on https://processing.org/tutorials/interactivity/ but there is nothing in there about custom cursors, just named ones and images.
Update
I am using the createGraphics function but I can't get it to work as a cursor: http://processingjs.org/reference/createGraphics_/
Links
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
回答1:
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.
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.
来源:https://stackoverflow.com/questions/52322112/make-the-cursor-a-self-drawn-image