Cambiare il cursore su HTML5 Canvas quando si trascina il mouse

Question

Ho creato un tipo di applicazione pennello con il tag Canvas. Ho voluto che quando il mouse è sulla tela il cursore cambia,

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

ho compiuto questo, ma Non riesco a capire come devo cambiare il cursore mentre si trascina il mouse per disegnare l'immagine

Answer 1

Utilizzare la :active CSS pseudo-classe per modificare il cursore quando il pulsante del mouse è premuto sopra l'elemento:

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

esempio di lavoro: http://jsfiddle.net/nXv63/

Answer 2

Two approcci mi viene in mente per questo, uno dei quali potrebbe realizzare ciò che si vuole:

1. utilizzare alcuni Javascript per cambiare il cursore, lungo le stesse linee come questo frammento jQuery:

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

   Se dovessi usarlo nell'evento per quando viene premuto il pulsante del mouse e ripristinare l'originale quando viene rilasciato, immagino che avrebbe l'effetto esatto che desideri.

2. Disegna il "cursore" sulla tela stessa e fai in modo che traccia la posizione del mouse sulla tela. In questo modo, puoi disegnare un cerchio in stile Photoshop (ecc.) Per indicare dove si sta svolgendo il disegno. Non sono sicuro di come potrebbero essere le prestazioni con questo approccio (non l'ho provato), ma immagino che dovrebbe andare bene. Usa semplicemente l'evento che viene sparato sulla mossa del mouse per la tela, che è presumibilmente ciò che stai già usando per tracciare dove dovrebbe essere posizionata la vernice.

Answer 3

funziona bene qui: http://jsfiddle.net/Mutant_Tractor/DMBWC/1/

Answer 4

Aggiungere una classe "trascinamento" alla tela mentre il trascinando l'azione è acceso (e rimuoverlo sul mouseUp)

Quindi aggiungere questo stile:

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

Answer 5

Per uno ancora alla ricerca di una soluzione a questo bug WebKit: https://bugs.webkit.org/show_bug.cgi?id=105355, questo è quello che ho fatto.

Ho aggiunto questa proprietà all'elemento body per rendere tutto il testo non selezionabile nella mia pagina e il gioco è fatto.

body { 
    -webkit-touch-callout: none; 

    -webkit-user-select: none; 

    -moz-user-select: none; 

    user-select: none; 
} 

Il problema è che se si ha realmente bisogno di un elemento di essere selezionabili, si dovrà cambiare il suo CSS per renderla tale.