Html 拖动鼠标时将光标更改为 HTML5 Canvas
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4945874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change cursor over HTML5 Canvas when dragging the mouse
提问by Yahoo
I have made a paint brush type of application using the Canvas Tag . I wanted that when the mouse is on the canvas the Cursor Changes ,
我使用 Canvas Tag 制作了一个画笔类型的应用程序。我希望当鼠标在画布上时 Cursor Changes ，
<canvas id="draw" style="cursor: url(image/pencil.cur)">
I have accomplished this but i cant figure out how shall i change the cursor while I Drag the mouse for drawing the image
我已经完成了这个，但我不知道如何在拖动鼠标绘制图像时更改光标
回答by Andy E
Use the :activeCSS pseudo-class to change the cursor when the mouse button is down over the element:
:active当鼠标按钮在元素上时，使用CSS 伪类来改变光标：
#draw:active {
cursor: url(image/pencil.cur);
}
Working example: http://jsfiddle.net/nXv63/
工作示例：http: //jsfiddle.net/nXv63/
回答by Callistino
For any one still looking for a solution to this webkit bug: https://bugs.webkit.org/show_bug.cgi?id=105355, this is what I did.
对于仍在寻找此 webkit 错误解决方案的任何人：https://bugs.webkit.org/show_bug.cgi?id =105355 ，这就是我所做的。
I added this property to the body element to make all text unselectable in my page and that's it.
我将此属性添加到 body 元素，以使页面中的所有文本都无法选择，仅此而已。
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
The problem is that if you really need an element to be selectable, you will have to change its CSS to make it so.
问题是，如果你真的需要一个元素是可选的，你将不得不改变它的 CSS 以使其如此。
回答by Mark Embling
Two approaches I can think of for this, one of which might accomplish what you want:
为此，我可以想到两种方法，其中一种方法可能会完成您想要的操作：
Use some JavaScript to change the cursor, along the same lines as this jQuery fragment:
$('canvas#draw').css('cursor', 'url(image/another-cursor.cur)');If you were to use that in the event for when the mouse button is pressed, and restore the original when it is released, I imagine that would have the exact effect you desire.
Draw the "cursor" on the canvas itself, and have it track the mouse position on the canvas. This way, you could draw a Photoshop-style circle (etc) to indicate where the drawing is going to take place. I'm not sure how performance might be with this approach (I've not tried it), but I imagine it ought to be fine. Just use the event which is fired on mouse move for the canvas, which is presumably what you're already using to track where the paint ought to be placed.
使用一些 JavaScript 更改光标，与此 jQuery 片段相同：
$('canvas#draw').css('cursor', 'url(image/another-cursor.cur)');如果您在按下鼠标按钮时使用它，并在释放时恢复原始状态，我想这将具有您想要的确切效果。
在画布本身上绘制“光标”，并让它跟踪画布上的鼠标位置。通过这种方式，您可以绘制一个 Photoshop 风格的圆圈（等）来指示绘图将发生的位置。我不确定这种方法的性能如何（我没有尝试过），但我想它应该没问题。只需使用鼠标移动时为画布触发的事件，这可能是您已经用来跟踪应该放置油漆的位置的事件。
回答by Myles Gray
Works fine here: http://jsfiddle.net/Mutant_Tractor/DMBWC/1/
回答by Omiod
Add a "dragging" class to the canvas while the dragging action is on (and remove it on mouseUp)
在拖动操作开启时向画布添加一个“拖动”类（并在 mouseUp 上将其删除）
Then add this style:
然后添加这个样式：
canvas {cursor: default;}
canvas.dragging {cursor: crosshair;}
