Изменить курсор над HTML5 Холст при перетаскивании мыши

Question

Я создал приложение для рисования кистью с помощью тега Canvas. Я хотел, чтобы при наведении курсора мыши на холсте курсор Изменения,

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

Исполнив это, но я не могу понять, как же я изменить курсор в то время как я перетащить мышью для нанесения изображения

Answer 1

Используйте :active CSS псевдо-класс, чтобы изменить курсор, когда кнопка мыши нажата над элементом:

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

Рабочий пример: http://jsfiddle.net/nXv63/

Answer 2

Two подходы, я могу думать для этого, один из которых может выполнить то, что вы хотите:

1. изменить курсор использовать некоторые JavaScript, по той же схеме, как этот фрагмент JQuery:

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

   Если вы использовали это в случае, когда при нажатии кнопки мыши и восстановления оригинала, когда он выпущен, я предполагаю, что у вас будет точный эффект.

2. Нарисуйте «курсор» на самом холсте и проследите за положением мыши на холсте. Таким образом, вы можете нарисовать круг в стиле Photoshop (и т. Д.), Чтобы указать, где будет происходить рисование. Я не уверен, как производительность может быть связана с этим подходом (я не пробовал), но я думаю, что все должно быть хорошо. Просто используйте событие, которое запускается при перемещении мыши на холст, который, предположительно, вы уже используете, чтобы отслеживать, где должна быть размещена краска.

Answer 3

Прекрасно работает здесь: http://jsfiddle.net/Mutant_Tractor/DMBWC/1/

Answer 4

Добавить класс «перетаскивания» на холст, в то время как перетаскивание действие на (и удалить его на MouseUp)

Затем добавьте этот стиль:

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

Answer 5

Для любого одного до сих пор ищет решение этой WebKit ошибки: https://bugs.webkit.org/show_bug.cgi?id=105355, это то, что я сделал.

Я добавил это свойство к элементу body, чтобы весь текст не был выбран на моей странице, и все.

body { 
    -webkit-touch-callout: none; 

    -webkit-user-select: none; 

    -moz-user-select: none; 

    user-select: none; 
} 

Проблема в том, что если вам действительно нужен элемент, который можно выбрать, вам придется изменить его CSS, чтобы сделать его таким.