Размещение элемента внутри масштабированного + преобразованного Div на основе положения наружного курсора ⇐ CSS

[Anonymous]

Через четыре часа намазчивания головы, я думаю, мне нужна помощь. Попробую объяснить это как можно более, как это возможно. p> масштабирование происходит с использованием сценария Panzoom, который применяет Transform: Scale Translate To Div: https://github.com/timmywil/panzoom
Вот мой Html: < /p>

Код: Выделить всё

[img]/assets/map.jpg[/img]

[img]/assets/pin.jpg[/img]



Ustaw punkt A

элемент pin-a по умолчанию скрыт и дает класс Show через JavaScript.
Вот изображение :

Процесс - это то, что Я щелкну правой правой кнопкой мыши, чтобы открыть новое контекстное меню, а затем нажмите «UStaw Punkt A». Я бросаю булавку. Как вы можете видеть, расположение контекстного меню рассчитывается правильно и открывается, когда мой курсор мыши. Однако, когда я хочу использовать эту позицию, чтобы разместить булавку, учитывая, что изображение масштабируется и перемещается, моя математика полностью выходит из удара. Преобразования для того, чтобы он был липким.

Код: Выделить всё

let elem = document.getElementById('map-in')
panzoom = Panzoom(elem, {
maxScale: 5,
contain: "outside"
});

$("#map-in").on("contextmenu", function(e) {
e.preventDefault();

var elm = $("#map");
point_left = e.pageX - elm.offset().left;
point_top = e.pageY - elm.offset().top;

$("#map-context-menu").css({
top: point_top,
left: point_left
}).addClass("show");
});

$("#map-point-a").on("click", function(e) {
e.preventDefault();

/* getPan returns an object {x: number, y: number} taken from styles */
let pan_left = panzoom.getPan().x;
let pan_top  = panzoom.getPan().y;

/* returns value of scale() */
let pan_scale = panzoom.getScale();

/* Point left and point top are variables saved when context menu is opened */
let point_x = point_left;
let point_y = point_top;

$("#pin-a").css({
top: point_y,
left: point_x
}).addClass("show");
});
< /code>
Когда я использую прокрутка колеса, вот пример стилей, применяемых к внутреннему контейнеру: < /p>
cursor: move; user-select: none; touch-action: none; transform-origin: 50% 50%;
transition: none 0s ease 0s; transform: scale(1.49182) translate(-9.81022px, 2.35833px);
< /code>
То, что я не делаю, - это как применить математику. Допустим, мое контекстное меню открывается на уровне 300 300 по сравнению с основным контейнером постороннего.(point_left - pan_left) * pan_scale

[*]

Код: Выделить всё

(point_left + (pan_left * -1)) / pan_scale

[*]

Код: Выделить всё

point_left - (pan_left / pan_scale)

Но ни один из них не работает. Я предполагаю, что мне не хватает решающей части того, как работает трансформация, и, следовательно, не могу понять математику, но у меня нет других идей ... по сути я пытаюсь выяснить, как перевести x, y из курсора относительно основного контейнера к x, y преобразованного изображения. < /p>
конкретный пример < /h2>
Положение курсора при открытии контекстного меню: x: 458, y: 519
Scale: 1.16
pan: x: 97, y: -97
Желтая точка - это то, где я на самом деле щелкнул правой кнопкой мыши:


Подробнее здесь: https://stackoverflow.com/questions/755 ... rsor-posit