Zmiana kursora na płótnie HTML5 podczas przeciągania myszą

Question

Zrobiłem aplikację typu pędzla za pomocą znacznika Canvas. Chciałem, że gdy mysz jest na płótnie Kursor zmieni,

<canvas id="draw" style="cursor: url(image/pencil.cur)"> 

I dokonaliśmy tego, ale nie mogę dowiedzieć się, jak mam zmienić kursor, a ja Przeciągnij myszki do rysowania obrazu

Answer 1

Użyj :active CSS pseudo-klasy, aby zmienić kursor, gdy przycisk myszy jest naciśnięty nad elementem:

#draw:active { 
    cursor: url(image/pencil.cur); 
} 

przykład robocza: http://jsfiddle.net/nXv63/

Answer 2

Two podejścia mogę myśleć o tym, z których jeden może osiągnąć to, co chcesz:

1. Stosowanie niektórych JavaScript, aby zmienić kursor, na takich samych zasadach jak to jQuery fragment:

   $('canvas#draw').css('cursor', 'url(image/another-cursor.cur)'); 
   

   Jeśli użyjesz tego w przypadku, gdy naciśniesz przycisk myszy i przywrócisz oryginał po zwolnieniu, wyobrażam sobie, że przyniesie to pożądany efekt.

2. Narysuj "kursor" na samym płótnie, aby śledzić pozycję myszy na płótnie. W ten sposób możesz narysować okrąg w stylu Photoshopa (itp.), Aby wskazać miejsce, w którym ma się odbyć rysunek. Nie jestem pewien, jak może wyglądać takie podejście (nie próbowałem tego), ale wyobrażam sobie, że powinno być dobrze. Wystarczy użyć zdarzenia, które jest uruchamiane w ruchu myszy na płótnie, co prawdopodobnie jest już używane do śledzenia położenia farby.

Answer 3

działa dobrze tutaj: http://jsfiddle.net/Mutant_Tractor/DMBWC/1/

Answer 4

Dodaj klasę "przeciągania" do obszaru roboczego, podczas gdy przeciąganie działania jest włączony (i usunąć go na mouseUp)

Następnie dodać ten styl:

canvas {cursor: default;} 
canvas.dragging {cursor: crosshair;} 

Answer 5

Dla jednego nadal szuka rozwiązania tego WebKit błąd: https://bugs.webkit.org/show_bug.cgi?id=105355, jest to, co zrobiłem.

Dodałem tę właściwość do elementu body, aby cały tekst nie był zaznaczalny na mojej stronie i to wszystko.

body { 
    -webkit-touch-callout: none; 

    -webkit-user-select: none; 

    -moz-user-select: none; 

    user-select: none; 
} 

Problem polega na tym, że jeśli naprawdę potrzebujesz elementu do wybrania, będziesz musiał zmienić jego CSS, aby tak się stało.