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

Question

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

<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

Для тех, кто все еще ищет решение этой ошибки веб-набора: 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, чтобы сделать его таким.

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

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

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

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