Cambiar el cursor sobre HTML5 Lienzo al arrastrar el mouse

Question

He hecho un tipo de aplicación de pincel usando la etiqueta de Canvas. Yo quería que cuando el ratón está sobre el lienzo el cursor cambia,

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

que han logrado esto, pero no puedo encontrar la manera Tengo que pasar el cursor mientras arrastra el ratón para dibujar la imagen

Answer 1

Utilice la pseudo-clase :active CSS para cambiar el cursor cuando el botón del ratón está presionado sobre el elemento:

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

Ejemplo de trabajo: http://jsfiddle.net/nXv63/

Answer 2

Dos enfoques que se me ocurre para esto, uno de los cuales podría lograr lo que desea:

1. utilizar algo de JavaScript para cambiar el cursor, a lo largo de las mismas líneas que este fragmento de jQuery:

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

   Si tuviera que usar eso en el evento para cuando se presiona el botón del mouse, y restaurar el original cuando se suelta, me imagino que tendría el efecto exacto que desea.

2. Dibuje el "cursor" en el lienzo y haga que rastree la posición del mouse en el lienzo. De esta forma, podría dibujar un círculo de estilo Photoshop (etc.) para indicar dónde se realizará el dibujo. No estoy seguro de cómo podría ser el rendimiento con este enfoque (no lo he probado), pero me imagino que debería estar bien. Simplemente use el evento que se dispara al mover el mouse para el lienzo, que probablemente es lo que ya está usando para rastrear dónde debe colocarse la pintura.

Answer 3

funciona bien aquí: http://jsfiddle.net/Mutant_Tractor/DMBWC/1/

Answer 4

Agregue una clase "arrastrando" al lienzo mientras el acción de arrastre está en (y eliminar en mouseUp)

A continuación, agregue este estilo:

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

Answer 5

Para cualquiera todavía en busca de una solución a este error webkit: https://bugs.webkit.org/show_bug.cgi?id=105355, esto es lo que hice.

He añadido esta propiedad al elemento del cuerpo para que todo el texto no se pueda seleccionar en mi página y eso es todo.

body { 
    -webkit-touch-callout: none; 

    -webkit-user-select: none; 

    -moz-user-select: none; 

    user-select: none; 
} 

El problema es que si realmente necesita un elemento a ser seleccionable, que tendrá que cambiar su CSS para que así sea.