Позиция щелчка относительно элемента div с абсолютным масштабированием ⇐ CSS

[Anonymous]

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

Примечание. Для Zoom это нормально, но при панорамировании вместе с масштабированием все сходит с ума.









let canvas = document.getElementById('canvas');
let nodeContainer = document.getElementById('node-container');
let pz = {
offset: {
x: 0.0,
y: 0.0
},
zoom: 1
};
let isDragging = false;
let c = 0;

// pan and zoom

const updateDom = () => {
let x = pz.offset.x * pz.zoom +'px';
let y = pz.offset.y * pz.zoom +'px';
let z = pz.zoom;
nodeContainer.style.transform = `translate(${x}, ${y}) scale(${z})`
}

const handleMouseDown = () => {
isDragging = true;
};

const handleMouseUp = () => {
isDragging = false;
};

const handleMouseMove = (e) => {
if (!isDragging) {
return;
}

if (e.buttons !== 1) {
isDragging = false;

return;
}

pz.offset = {
x: pz.offset.x + e.movementX / pz.zoom,
y: pz.offset.y + e.movementY / pz.zoom
};

updateDom();

};

const handleWheel = (e) => {
e.preventDefault();
e.stopPropagation();

if (e.ctrlKey) {
const speedFactor =
(e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * 10;
const pinchDelta = -e.deltaY * speedFactor;
pz.zoom = Math.min(
1.3,
Math.max(0.1, pz.zoom * Math.pow(2, pinchDelta))
)
}

updateDom();
}

canvas.onwheel = handleWheel;
canvas.onmousedown = handleMouseDown;
canvas.onmouseup = handleMouseUp;
canvas.onmousemove = handleMouseMove;

// drag and drop

canvas.addEventListener('click', (e) => {
let nc = nodeContainer.getBoundingClientRect();
let pzx = pz.offset.x / pz.zoom;
let pzy = pz.offset.y / pz.zoom;

let marker = document.createElement('span');
marker.innerText = '+'
marker.style.fontSize = '19pt';
marker.style.position = 'absolute';

let nx = (e.x/pz.zoom) + nc.x;
let ny = (e.y/pz.zoom) + nc.y;

marker.style.left = nx - pzx + 'px'
marker.style.top = ny - pzy + 'px'

nodeContainer.appendChild(marker);

});

canvas.addEventListener('dragover', (e) => e.preventDefault());


Подробнее здесь: https://stackoverflow.com/questions/787 ... scaled-div