2013-02-14 66 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