#javascript #html #css #angular
#javascript #HTML #css #angular
Вопрос:
В настоящее время я пытаюсь реализовать функцию панорамирования и масштабирования с помощью Angular.
У меня есть изображение карты, которое я хотел бы иметь возможность увеличивать и уменьшать масштаб, а также перемещать с помощью вертикальной и горизонтальной прокрутки. Масштабирование я хотел бы сделать с помощью удерживаемой клавиши Shift и прокрутки с этим.
С чем я борюсь, так это с источником преобразования. Ниже приведен код, который я использовал до сих пор, но, к сожалению, это работает только тогда, когда transform-origin установлено значение 0% 0% . Я хотел бы увеличить масштаб точки изображения, на которой в данный момент находится курсор, однако, если я переместу transform-origin его на что-то другое, кроме 0% 0% , части изображения будут обрезаны.
Вот проект на stackblitz.Удерживайте нажатой клавишу alt и прокрутите, чтобы увидеть проблему в действии.
<div style="width: 100%; height: 100%; overflow: scroll;">
<img src="assets/map.jpg" style="transform: scale({{ zoom }}); transform-origin: 0% 0%;">
</div>
Как я мог этого добиться?
Комментарии:
1. Вы можете просто использовать библиотеку листовок для создания интерактивных карт
2. Я думал об этом, но leaflet сильно усложняет мой проект, где единственное, что мне нужно, — это панорамирование и масштабирование. Я хотел бы, чтобы это было как можно меньше, поэтому я стараюсь избегать таких сложных библиотек. Однако это отличная мысль, и если я не смогу придумать другого способа, мне, возможно, все равно придется использовать leaflet . Спасибо!