Make the cursor a self-drawn image

做~自己de王妃 提交于 2019-12-24 07:13:52

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!