Положение курсора в зависимости от масштаба холста

координаты

У меня есть холст который изначально имеет размер экрана пользователя (изображён фиолетовым).

После масштабирования область экрана пользователя принимает значение widthscale, heightscale (изображён красным).

Мы имеем отступы до левой и верхней грани масштабированного холста current_screen.x0, current_screen.y0 и к центру трансформированного холста current_screen.x1, current_screen.y1.

При этом координаты положения курсора отсчитывается от верхнего левого угла холста (изображены зелёным).

Как корректно рассчитать положение курсора относительно масштабированного холста? При наведении на центр координат положение курсора всегда должно показывать х = 0, у = 0.

function scale() {
        canvas.addEventListener("wheel", onmousewheel, false);
        canvas.addEventListener("DOMMouseScroll", onmousewheel, false);
        canvas.addEventListener("mousemove", onmousewheel, false);
    
        function onmousewheel(event) {
            position.x = event.clientX*scale_factor;
            position.y = event.clientY*scale_factor;
            var delta = event.type === "wheel" ? event.wheelDelta : -event.detail;
            var increment = delta > 0 ? 1.1 : 0.9;
            scale *= increment;

            current_screen.x0 = (current_screen.x0 - position.x) * increment + position.x;
            current_screen.y0 = (current_screen.y0 - position.y) * increment + position.y;
            current_screen.x1 = (current_screen.x1 - position.x) * increment + position.x;
            current_screen.y1 = (current_screen.y1 - position.y) * increment + position.y;

            cursor.x = Math.floor(DRAW.px_mm((canvas_inner_width/2-(canvas_inner_width-position.x)))/scale);
            cursor.y = -Math.floor(DRAW.px_mm((canvas_inner_height/2-(canvas_inner_height-position.y)))/scale);

            document.getElementsByClassName('x-pointer')[0].innerText = cursor.x;
            document.getElementsByClassName('y-pointer')[0].innerText = cursor.y; 
            
            CANVAS.redraw();
            event.preventDefault();
        }
    },

Ответы (0 шт):