У меня есть родительский div, который отображает график, который можно вращать. Я хочу расставлять точки при щелчке мышью. Это моя функция места:
module.exports.place = function (event, id) {
let div = document.createElement("div");
div.className = "container-fluid";
div.id = id;
let avakio_wrapper = document.getElementById("avakio");
avakio_wrapper.appendChild(div);
let parentPosition = getPosition(event.currentTarget);
xPosition = event.clientX - parentPosition.x - div.clientWidth / 2;
yPosition = event.clientY - parentPosition.y - div.clientHeight / 2;
div.style.left = xPosition + "px";
div.style.top = yPosition + "px";
}
Когда график не повернут, он работает так, как ожидалось, хотя, когда я поворачиваю график, он сначала помещает точку под щелчком мыши, а затем применяет преобразование вращения и перемещается Это. У меня есть скриншоты, показывающие, что я описываю. Красная точка показывает позицию щелчка. Я ценю любую помощь.


ОБНОВЛЕНИЕ !!!!
Вот реализация моего кода:
// Calculate clicking pos based of top-left corner of div
xPosition = event.clientX - parentPosition.x - dot.clientWidth / 2;
yPosition = event.clientY - parentPosition.y - dot.clientHeight / 2;
let centerx = parentDiv.clientWidth / 2;
let centery = parentDiv.clientHeight / 2;
// Find Rotation angle
let rot = parentDiv.style.getPropertyValue("transform");
if (rot != "") {
rot = rot.split("(")[1].split("deg")[0];
} else {
rot = 0;
}
// Perform Invert Rotation
xPosition = centerx - xPosition;
yPosition = centery - yPosition;
let xRot =
xPosition * Math.cos(rot * (Math.PI / 180)) +
yPosition * Math.sin(rot * (Math.PI / 180));
let yRot =
-xPosition * Math.sin(rot * (Math.PI / 180)) +
yPosition * Math.cos(rot * (Math.PI / 180));
// Calculate again based top-left corner
dot.style.left = centerx - xRot + "px";
dot.style.top = centery - yRot + "px";
Однако я бегаю по некоторым проблемам. Когда родительский div поворачивается, точки смещаются на несколько пикселей в зависимости от угла поворота. У меня есть скриншоты с разными углами поворота. Я много дней занимался математическими вычислениями на бумаге, но до сих пор не могу понять, чем это вызвано.
