Platzieren eines Elements in scaled + transformierte DIV basierend auf der Position des externen Cursors ⇐ HTML

[Guest]

Nach vier Stunden Kopfkratzer denke ich, dass ich Hilfe brauche. Ich werde versuchen, es so gut wie möglich zu erklären. p> Die Skalierung erfolgt mit der Verwendung des Panzoom -Skripts, das Transformation anwendet: Skalierung übersetzt in ein Div: https://github.com/timmywil/panzoom
Hier ist mein Html: < /p>

Code: Select all

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

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



Ustaw punkt A

Das Element Pin-A wird standardmäßig versteckt und eine Klasse show über JavaScript.
Hier ist das Bild :

Der Prozess Ich klicke mit der rechten Maustaste, um ein neues Kontextmenü zu öffnen, und dann auf das Klicken "ustaw punkt a". Ich werde eine Pin fallen. Wie Sie sehen können, wird der Kontextmenü -Standort korrekt berechnet und wird geöffnet, wenn mein Mauszeiger ist. Wenn ich diese Position jedoch verwenden möchte, um einen Pin zu platzieren, wenn man bedenkt, dass das Bild skaliert und bewegt ist, geht meine Mathematik völlig aus dem Gleichgewicht heraus. < /P>
Der Stift befindet Transformationen, damit es klebrig ist.

Code: Select all

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>
Wenn ich das Rad Scrolling verwendecursor: 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>
Was ich nicht unscharf, ist, wie man die Mathematik anwendet. Nehmen wir an, mein Kontextmenü wird mit 300.300 relativ zum Haupt -Außenseiter -Container geöffnet.(point_left - pan_left) * pan_scale

[*]

Code: Select all

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

[*]

Code: Select all

point_left - (pan_left / pan_scale)

Aber keiner davon funktioniert. Ich gehe davon aus Relativ zum Hauptbehälter zum x, y des transformierten Bildes. 458, y: 519
Skala: 1.16
Pan: x: 97, y: -97
Der gelbe Punkt ist dort, wo ich tatsächlich mit der rechten Maustaste geklickt habe: