2013-02-14 67 views
1

我正在建立一个网站,并为它的一部分,我有一个白板功能(这基本上是一个画布)。我试图为白板实现橡皮擦功能,并且我希望光标在选择橡皮擦时改变形状,以便它与擦除将发生的方式相匹配(此时我正试图擦除呈圆形)。到目前为止,我已经试过这样:将光标更改为圆形?

$('#canvasDiv').css('cursor','url(https://example.com/eraser_cursor.png)'); 

然而,这并不有2个原因的工作:

  1. 虽然光标的图像是它不是光标为中心的圆圈,它会看起来用户正在擦除别的东西。

  2. 一旦用户开始擦除,并且他保持“单击”,则光标变为不同的形状。

有没有办法解决这个问题?

+0

在你的CSS声明你应该能够利用':active'伪选择器在用户点击鼠标按钮时改变光标。这是未经测试的,但可能有帮助...另外,您应该能够更新橡皮擦图标以包含一些将实际图标偏移到正确位置的空白区域(透明部分),否则请查看Pawel_W的答案。 – Jasper 2013-02-14 00:36:08

+0

画布标签保留给 html5元素。如果你想使用html5画布,我可以帮助,但我怀疑这是你想要做的。我建议您删除该标签,因为它与您要使用的技术无关。 – Saturnix 2013-02-14 00:49:07

回答

3
  1. 还有 “XY” 选项 - cursor: url() x y(据我所知只能在FF /铬)

  2. 我认为!important应该修复它

+0

1.它的工作原理 2.我尝试了!重要的选项,但它似乎没有工作(我使用chrome)。我不得不加载一个事件监听器到mousedown并做event.preventDefault(); – user502248 2013-02-19 00:20:04