Странная проблема со смещением мыши при масштабировании и панорамировании с использованием функции выбора пользовательского объекта в Fabric.js

Я пытаюсь сделать так, чтобы круг на моем холсте можно было выбрать щелчком мыши. Тогда пользователю не нужно удерживать мышь, чтобы переместить объект. Проблема возникает, когда я пытаюсь масштабировать или панорамировать. По какой-то причине, вместо того, чтобы следовать за мышью, кажется, что круг сбрасывается в центр холста. Тогда есть значительное смещение от мыши и круга. Из-за этого я не могу отменить выбор круга, а если и могу, то ручки находятся не там, где, по моему мнению, они должны быть логически. Я начал с кода, упомянутого здесь: https://stackoverflow.com/a/35014746/1053106

Странная часть, которую я нашел по счастливой случайности. Кажется, что когда я комментирую объявление переменной moveObject (которая отслеживает, что я хочу переместить), функция масштабирования работает хорошо, но панорамирование все еще остается проблемой. Но что также странно, так это то, что он масштабируется правильно, хотя я получаю исключение. Посмотрите этот codepen. Прокомментируйте и раскомментируйте строку 51, чтобы увидеть поведение. Каждый раз выделяйте круг, а затем увеличивайте масштаб с помощью колесика мыши. У меня есть код масштабирования из учебника Fabric.js по масштабированию и панорамированию (хотя Я не могу на всю жизнь заставить последний пример на этой странице работать без сбоев в моей версии кода...)

  • Когда строка не закомментирована, вы можете удерживать Alt и mouseDown на холсте для панорамирования до тех пор, пока круг не выровняется с курсором, чтобы отменить выбор, если круг слишком смещен от положения мыши.
  • С закомментированной строкой масштабирование работает нормально, но панорамирование по-прежнему ломает ручку выбора. Вам нужно осмотреть холст в поисках ручки.

Ниже мой пример, показывающий зум сам по себе. Во-первых, я не объявляю moveObject, и масштабирование удерживает мышь и круг на одном уровне. Затем я объявляю эту переменную, и когда я масштабирую и перемещаю мышь, кажется, что круг сбрасывается в центр холста, из-за чего он не совпадает с мышью. У меня есть скрипт, чтобы показать щелчки мыши.

Функция масштабирования не работает при определении MoveObject

Вот мой пример, показывающий панорамирование с объявленной переменной и без нее. GIF был слишком большим для вставки, поэтому ссылка.

Кроме того, у меня есть сетка, к которой я хотел бы привязать круг. Кажется, это тоже становится шатким, если в моем mouse:move есть какой-либо код, чтобы заставить его щелкнуть. Строки 147 и 148 будут примерно такими:

movedObject.left=Math.round((opt.e.clientX -( movedObject.width/2) )/ grid) * grid /zoom;
movedObject.top = Math.round((opt.e.clientY - (movedObject.height/2) )/ grid) * grid/zoom;

canvas selected zooming fabricjs panning
person morrows_end    schedule 17.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я просто перебрал все возможные варианты положения мыши в моей функции mouse:move, пока не нашел что-то, что сработало. Я мог бы поклясться, что пробовал все варианты раньше, но безуспешно, поэтому я начал вести список результатов, т.е.

pointer.x pointer.y = No Joy  
options.e.layerX and options.e.layerY  = No Joy 
canvas._offset.left, canvas._offset.top   = No Joy 
options.clientX,  options.clientY  = No Joy

Попробовав различные варианты положения указателя, которые НЕ работают, я думаю, что нашел ответ. Решение состоит в том, чтобы использовать в вычислениях absolutePosition.x и absolutePosition.y.

movedObject.left= (Math.round((options.absolutePointer.x - movedObject.width / 2) / grid) * grid);
movedObject.top = (Math.round((options.absolutePointer.y - movedObject.height / 2)/ grid) * grid);

Теперь, независимо от коэффициента масштабирования или значения панорамирования, часть прилипает к указателю мыши, как я хочу.

person morrows_end    schedule 05.04.2019