Всем привет!
Начинаю знакомиться с канвасом. Не могу разобрать, как должен работать алгоритм Брезенхэма. По идее он должен заполнять пустые клетки, когда быстро рисуешь указателем мыши. Но пропуски остаются. Почему?
Привет!
Есть предположение, что проблема может быть в следующем. Я думаю, что между событиями “mousedown” есть некоторый временной отрезок. То есть события “mousedown” приходят не после каждого передвижения курсора мыши между двумя соседними пикселями экрана, а просто, ну скажем, каждые n миллисекунд, когда обнаружено передвижение мыши. В результате имело бы смысл отлавливать два соседних события “mousedown” и как-то алгоритмически достраивать на канвасе линию между (x1, y1) и (x2, y2) координатами. Самый простой вариант по прямой между этими точками.
Не срабатывает блок кода отвечающий за заполнения пустот потому что условие
while (x1 != x2 || y1 != y2) {
всегда false.
Ты прав. Фишка вопроса в том что код который должен строить линию уже есть. Но линию не строит.
А как отслеживать изменяющиеся координаты? Да, они действительно равны получаются.
В общем виде (я использую несуществующие API) примерно так
node.on('mousedown', function (event) {
let prevCoordinates = getCoordinates(event)
node.on('mousemove', function (event) {
// координаты текущего события
const currentCoordinates = getCoordinates(event)
// тут алгоритм заполнения пространства между координатами
// из-за особенности работы событий (выстреливают максимум 60 раз в секунду)
// currentCoordinates и prevCoordinates могут быть на достаточно большом растоянии друг от друга
// тут по сути применяется алгоритм построения прямой между точками
buildLine(currentCoordinates, prevCoordinates)
// запоминаем текущее положение
prevCoordinates = currentCoordinates
})
// важно что mouseup может произойти за пределами того узла на котором считывается mousemove. Ловим события на корневом узле.
// mousedown
document.on('mouseup', function () {
node.off('mousemove')
})
})
Круто, я всё понял)
Получилось, благодарю!
1 лайк
Хз, я когда изучала канвас просто подключала JQEARY, mousemove и расчерчивала невидимую сетку для рисования используя округление до ближайшего десятка)