Проблема масштабирования HTML-холста

Question

Недавно я решил углубиться в мир HTML5 и холста и столкнулся с проблемой, которую не могу понять, как ее решить.

Я использую технику увеличения, упомянутую в в этом вопросе , так как мне нужно иметь возможность увеличить конкретную точку.

Однако проблема, с которой я столкнулся, - это когда вы увеличиваете область, затем выполняете большое движение мыши, а затем уменьшаете масштаб. Вся точка обзора и объекты становятся перекошенными. (объекты, которые ранее занимали весь холст, теперь частично или иногда вообще не видны.)

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

Вот демонстрация, чтобы получить представление о проблеме: (снова, чтобы воспроизвести, просто увеличьте, переместите мышь на разумное расстояние и уменьшите)

Демонстрация нерабочего состояния

Answer 1

Это работает как задумано.Когда вы применяете свой перевод контекста, основанный на положении мыши, он будет масштабироваться по центру этой позиции.

Чтобы добиться фиксированного поведения при уменьшении масштаба, я думаю, что вы хотите, вам нужно установить mouseX и mouseY только для увеличения, а затем использовать последнюю mouseX / mouseY (или, возможно, центр холста, или некоторую точку вмежду) для уменьшения.

Обновлен JSFiddle