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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

Ответ 5

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

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

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