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

Question

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

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

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

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

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

Кроме того, у меня есть сетка, к которой я бы хотел привязать круг. Похоже, это тоже становится все шатко, если в моей мышке: 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;

Answer 1

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

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);

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