Я пытаюсь сделать так, чтобы круг на моем холсте можно было выбрать щелчком мыши. Тогда пользователю не нужно удерживать мышь, чтобы переместить объект. Проблема возникает, когда я пытаюсь увеличить или панорамировать. Почему-то вместо того, чтобы следовать за мышью, кажется, что круг сбрасывается в центр холста. Тогда есть значительное смещение от мыши и круга. Из-за этого я не могу отменить выбор круга, или, если я могу, ручки не там, где я думаю, что они должны быть логически. Я начал с кода, упомянутого здесь: 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;